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

package/lib/typescript/src/components/Box/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ViewProps, ViewStyle } from 'react-native';
 import type { UIKitColors, UIKitPalette } from '../../types';
 type BaseBoxProps = Pick<ViewStyle, 'flex' | 'flexShrink' | 'flexGrow' | 'flexDirection' | 'alignItems' | 'justifyContent' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'borderBottomColor' | 'borderBottomWidth' | 'margin' | 'marginHorizontal' | 'marginVertical' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom' | 'overflow' | 'width' | 'height'> & {
@@ -7,5 +8,5 @@ type BaseBoxProps = Pick<ViewStyle, 'flex' | 'flexShrink' | 'flexGrow' | 'flexDi
     }) => string);
 };
 type BoxProps = BaseBoxProps & ViewProps;
-declare const Box: ({ style, children, ...props }: BoxProps) => JSX.Element;
+declare const Box: ({ style, children, ...props }: BoxProps) => React.JSX.Element;
 export default Box;

package/lib/typescript/src/components/Divider/index.d.ts

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

package/lib/typescript/src/components/Icon/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ImageStyle, StyleProp, ViewStyle } from 'react-native';
 import { FileType } from '@sendbird/uikit-utils';
 import IconAssets from '../../assets/icon';
@@ -9,11 +10,79 @@ type Props = {
     style?: StyleProp<ImageStyle>;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const Icon: ((props: Props) => JSX.Element) & {
-    Assets: typeof IconAssets;
-    File: typeof FileIcon;
+declare const _default: (({ icon, color, size, containerStyle, style }: Props) => React.JSX.Element) & {
+    Assets: {
+        'chat-hide': any;
+        'chat-show': any;
+        add: any;
+        archive: any;
+        'arrow-left': any;
+        'audio-off-filled': any;
+        'audio-off': any;
+        'audio-on-filled': any;
+        'audio-on': any;
+        ban: any;
+        broadcast: any;
+        camera: any;
+        channels: any;
+        'chat-filled': any;
+        chat: any;
+        'checkbox-off': any;
+        'checkbox-on': any;
+        'chevron-down': any;
+        'chevron-right': any;
+        close: any;
+        copy: any;
+        create: any;
+        delete: any;
+        document: any;
+        'done-all': any;
+        done: any;
+        download: any;
+        edit: any;
+        'emoji-more': any;
+        error: any;
+        'file-audio': any;
+        'file-document': any;
+        freeze: any;
+        gif: any;
+        info: any;
+        leave: any;
+        members: any;
+        message: any;
+        moderation: any;
+        more: any;
+        mute: any;
+        'notifications-filled': any;
+        'notifications-off-filled': any;
+        notifications: any;
+        operator: any;
+        pause: any;
+        photo: any;
+        play: any;
+        plus: any;
+        question: any;
+        'radio-off': any;
+        'radio-on': any;
+        recording: any;
+        refresh: any;
+        remove: any;
+        'reply-filled': any;
+        reply: any;
+        search: any;
+        send: any;
+        'settings-filled': any;
+        spinner: any;
+        stop: any;
+        streaming: any;
+        supergroup: any;
+        theme: any;
+        'thumbnail-none': any;
+        unarchive: any;
+        user: any;
+    };
+    File: ({ fileType, ...props }: Omit<Props, "icon"> & {
+        fileType: FileType;
+    }) => React.JSX.Element;
 };
-declare const FileIcon: ({ fileType, ...props }: Omit<Props, "icon"> & {
-    fileType: FileType;
-}) => JSX.Element;
-export default Icon;
+export default _default;

package/lib/typescript/src/components/Image/FastImageInternal.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { FastImageProps } from 'react-native-fast-image';
-declare let FastImageInternal: (props: FastImageProps) => JSX.Element | null;
+declare let FastImageInternal: (props: FastImageProps) => ReactNode | null;
 export default FastImageInternal;

package/lib/typescript/src/components/Image/index.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import type { ImageProps as NativeImageProps } from 'react-native';
 export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'onError'> {
     onLoad?: (event: {
@@ -9,6 +10,6 @@ export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'o
     }) => void;
     tintColor?: string;
 }
-export type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
+export type SendbirdImageComponent = (props: SendbirdImageProps) => ReactNode;
 declare const _default: SendbirdImageComponent;
 export default _default;

package/lib/typescript/src/components/ImageWithPlaceholder/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     source: number | {
@@ -7,5 +8,5 @@ type Props = {
     height?: number | string;
     style?: StyleProp<ViewStyle>;
 };
-declare const ImageWithPlaceholder: (props: Props) => JSX.Element;
+declare const ImageWithPlaceholder: (props: Props) => React.JSX.Element;
 export default ImageWithPlaceholder;

package/lib/typescript/src/components/Modal/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ModalProps, StyleProp, ViewStyle } from 'react-native';
 type ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';
 type Props = {
@@ -14,5 +15,5 @@ type Props = {
  * Modal Close: Triggered by Modal.props.onClose() call
  * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false
  * */
-declare const Modal: ({ children, onClose, backgroundStyle, onDismiss, type, visible, disableBackgroundClose, enableKeyboardAvoid, statusBarTranslucent, ...props }: Props) => JSX.Element;
+declare const Modal: ({ children, onClose, backgroundStyle, onDismiss, type, visible, disableBackgroundClose, enableKeyboardAvoid, statusBarTranslucent, ...props }: Props) => React.JSX.Element;
 export default Modal;

package/lib/typescript/src/components/PressBox/index.d.ts

@@ -4,6 +4,7 @@ type PressBoxStateParams = {
     pressed: boolean;
 };
 type Props = {
+    disabled?: boolean;
     onPress?: (event: GestureResponderEvent) => void;
     onLongPress?: (event: GestureResponderEvent) => void;
     delayLongPress?: number;
@@ -13,5 +14,5 @@ type Props = {
     children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);
 };
 export declare const DEFAULT_LONG_PRESS_DELAY = 350;
-declare const PressBox: (props: Props) => JSX.Element;
+declare const PressBox: (props: Props) => React.JSX.Element;
 export default PressBox;

package/lib/typescript/src/components/ProgressBar/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+type Props = {
+    current: number;
+    total: number;
+    trackColor?: string;
+    barColor?: string;
+    overlay?: ReactNode | undefined;
+    style?: ViewStyle;
+};
+declare const ProgressBar: ({ current, total, trackColor, barColor, overlay, style }: Props) => React.JSX.Element;
+export default ProgressBar;

package/lib/typescript/src/components/RegexText/index.d.ts

@@ -1,3 +1,4 @@
+import React, { ReactNode } from 'react';
 import { TextProps } from '../Text';
 export interface RegexTextPattern {
     regex: RegExp;
@@ -7,10 +8,10 @@ export interface RegexTextPattern {
         index: number;
         keyPrefix: string;
         parentProps?: TextProps;
-    }): string | JSX.Element;
+    }): string | ReactNode;
 }
 type Props = {
     patterns: RegexTextPattern[];
 } & TextProps;
-declare const RegexText: ({ children, patterns, ...props }: Props) => JSX.Element;
+declare const RegexText: ({ children, patterns, ...props }: Props) => React.JSX.Element;
 export default RegexText;

package/lib/typescript/src/components/Switch/index.d.ts

@@ -7,5 +7,5 @@ type SwitchProps = React.PropsWithChildren<{
     value: boolean;
     onChangeValue: (val: boolean) => void;
 }>;
-declare const Switch: ({ value, onChangeValue, inactiveThumbColor, inactiveTrackColor, trackColor, thumbColor, }: SwitchProps) => JSX.Element;
+declare const Switch: ({ value, onChangeValue, inactiveThumbColor, inactiveTrackColor, trackColor, thumbColor, }: SwitchProps) => React.JSX.Element;
 export default Switch;

package/lib/typescript/src/components/Text/index.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { TextProps as RNTextProps } from 'react-native';
 import type { TypoName, UIKitTheme } from '../../types';
 type TypographyProps = Partial<Record<TypoName, boolean>>;
 export type TextProps = RNTextProps & TypographyProps & {
     color?: ((colors: UIKitTheme['colors']) => string) | string;
 };
-declare const Text: ({ children, color, style, ...props }: TextProps) => JSX.Element;
+declare const Text: ({ children, color, style, ...props }: TextProps) => React.JSX.Element;
 export default Text;

package/lib/typescript/src/components/VideoThumbnail/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     source: string;
@@ -9,5 +10,5 @@ type Props = {
     /** @deprecated please use `source` prop **/
     videoSource?: string;
 };
-export declare const VideoThumbnail: ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize }: Props) => JSX.Element;
+export declare const VideoThumbnail: ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize }: Props) => React.JSX.Element;
 export {};

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

@@ -8,6 +8,7 @@ export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
 export { default as PressBox } from './components/PressBox';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';
 export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
@@ -23,13 +24,13 @@ export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
+export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
+export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar } from './ui/MenuBar';
 export type { MenuBarProps } from './ui/MenuBar';
-export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
-export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
-export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
 export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
 export { default as OpenChannelPreview } from './ui/OpenChannelPreview';
@@ -38,6 +39,7 @@ export { default as Placeholder } from './ui/Placeholder';
 export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
+export { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
 export { default as createScaleFactor } from './styles/createScaleFactor';

package/lib/typescript/src/styles/HeaderStyleContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { HeaderProps } from '../ui/Header';
 export type HeaderStyleContextType = {
-    HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
+    HeaderComponent: (props: HeaderProps) => React.ReactNode | null;
     defaultTitleAlign: 'left' | 'center';
     statusBarTranslucent: boolean;
     topInset: number;
@@ -9,5 +9,5 @@ export type HeaderStyleContextType = {
 };
 export declare const HeaderStyleContext: React.Context<HeaderStyleContextType>;
 type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
-export declare const HeaderStyleProvider: ({ children, HeaderComponent, defaultTitleAlign, statusBarTranslucent, }: React.PropsWithChildren<Props>) => JSX.Element;
+export declare const HeaderStyleProvider: ({ children, HeaderComponent, defaultTitleAlign, statusBarTranslucent, }: React.PropsWithChildren<Props>) => React.JSX.Element;
 export {};

package/lib/typescript/src/styles/createScaleFactor.d.ts

@@ -1,6 +1,5 @@
-declare const createScaleFactor: {
-    (deviceWidth?: number): (dp: number) => number;
-    updateScaleFactor(scaleFactor: (dp: number) => number): void;
-};
 export declare let DEFAULT_SCALE_FACTOR: (dp: number) => number;
-export default createScaleFactor;
+declare const _default: ((deviceWidth?: number) => (dp: number) => number) & {
+    updateScaleFactor: (scaleFactor: (dp: number) => number) => void;
+};
+export default _default;

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/AvatarStack.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type Props = React.PropsWithChildren<{
+    size?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    maxAvatar?: number;
+    avatarGap?: number;
+    styles?: {
+        borderWidth?: number;
+        borderColor?: string;
+        remainsTextColor?: string;
+        remainsBackgroundColor?: string;
+    };
+}>;
+declare const AvatarStack: ({ children, containerStyle, styles, maxAvatar, size, avatarGap, }: Props) => React.JSX.Element;
+export default AvatarStack;

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,32 @@ 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;
+    Stack: ({ children, containerStyle, styles, maxAvatar, size, avatarGap, }: {
+        size?: number | undefined;
+        containerStyle?: StyleProp<ViewStyle>;
+        maxAvatar?: number | undefined;
+        avatarGap?: number | undefined;
+        styles?: {
+            borderWidth?: number | undefined;
+            borderColor?: string | undefined;
+            remainsTextColor?: string | undefined;
+            remainsBackgroundColor?: string | undefined;
+        } | undefined;
+    } & {
+        children?: React.ReactNode;
+    }) => 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;