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

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","IconAssets","Box","Divider","Icon","Image","ImageWithPlaceholder","Modal","PressBox","ProgressBar","RegexText","Switch","Text","TextInput","VideoThumbnail","ActionMenu","Alert","Avatar","Badge","BottomSheet","Button","ChannelFrozenBanner","DialogProvider","useActionMenu","useAlert","usePrompt","useBottomSheet","Header","LoadingSpinner","MenuBar","GroupChannelMessage","GroupChannelPreview","OpenChannelMessage","OpenChannelPreview","OutlinedButton","Placeholder","ProfileCard","Prompt","Toast","useToast","ToastProvider","createSelectByColorScheme","createScaleFactor","createStyleSheet","createTypography","getDefaultHeaderHeight","HeaderStyleContext","HeaderStyleProvider","useHeaderStyle","createTheme","DarkUIKitTheme","LightUIKitTheme","Palette","UIKitThemeContext","UIKitThemeProvider","useUIKitTheme"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\n\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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"}
+{"version":3,"names":["default","IconAssets","Box","Divider","Icon","Image","ImageWithPlaceholder","Modal","PressBox","ProgressBar","RegexText","Switch","Text","TextInput","VideoThumbnail","ActionMenu","Alert","Avatar","Badge","BottomSheet","Button","ChannelFrozenBanner","DialogProvider","useActionMenu","useAlert","usePrompt","useBottomSheet","GroupChannelMessage","GroupChannelPreview","Header","LoadingSpinner","MenuBar","OpenChannelMessage","OpenChannelPreview","OutlinedButton","Placeholder","ProfileCard","Prompt","Toast","useToast","ToastProvider","TypingIndicatorBubble","createSelectByColorScheme","createScaleFactor","createStyleSheet","createTypography","getDefaultHeaderHeight","HeaderStyleContext","HeaderStyleProvider","useHeaderStyle","createTheme","DarkUIKitTheme","LightUIKitTheme","Palette","UIKitThemeContext","UIKitThemeProvider","useUIKitTheme"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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"}

package/lib/module/styles/createStyleSheet.js

@@ -12,11 +12,15 @@ const preProcessor = {
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,
+  'paddingVertical': SCALE_FACTOR_WITH_STR,
+  'paddingHorizontal': SCALE_FACTOR_WITH_STR,
   'paddingTop': SCALE_FACTOR_WITH_STR,
   'paddingBottom': SCALE_FACTOR_WITH_STR,
   'paddingLeft': SCALE_FACTOR_WITH_STR,
   'paddingRight': SCALE_FACTOR_WITH_STR,
   'margin': SCALE_FACTOR_WITH_STR,
+  'marginVertical': SCALE_FACTOR_WITH_STR,
+  'marginHorizontal': SCALE_FACTOR_WITH_STR,
   'marginTop': SCALE_FACTOR_WITH_STR,
   'marginBottom': SCALE_FACTOR_WITH_STR,
   'marginLeft': SCALE_FACTOR_WITH_STR,

package/lib/module/styles/createStyleSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","DEFAULT_SCALE_FACTOR","SCALE_FACTOR_WITH_STR","val","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","create"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));\n\nconst preProcessor: Partial<StylePreprocessor> = {\n  'fontSize': DEFAULT_SCALE_FACTOR,\n  'lineHeight': DEFAULT_SCALE_FACTOR,\n  'borderRadius': DEFAULT_SCALE_FACTOR,\n  'minWidth': SCALE_FACTOR_WITH_STR,\n  'maxWidth': SCALE_FACTOR_WITH_STR,\n  'minHeight': SCALE_FACTOR_WITH_STR,\n  'maxHeight': SCALE_FACTOR_WITH_STR,\n  'height': SCALE_FACTOR_WITH_STR,\n  'width': SCALE_FACTOR_WITH_STR,\n  'padding': SCALE_FACTOR_WITH_STR,\n  'paddingTop': SCALE_FACTOR_WITH_STR,\n  'paddingBottom': SCALE_FACTOR_WITH_STR,\n  'paddingLeft': SCALE_FACTOR_WITH_STR,\n  'paddingRight': SCALE_FACTOR_WITH_STR,\n  'margin': SCALE_FACTOR_WITH_STR,\n  'marginTop': SCALE_FACTOR_WITH_STR,\n  'marginBottom': SCALE_FACTOR_WITH_STR,\n  'marginLeft': SCALE_FACTOR_WITH_STR,\n  'marginRight': SCALE_FACTOR_WITH_STR,\n  'left': SCALE_FACTOR_WITH_STR,\n  'right': SCALE_FACTOR_WITH_STR,\n  'top': SCALE_FACTOR_WITH_STR,\n  'bottom': SCALE_FACTOR_WITH_STR,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {\n  Object.values(styles).forEach((style) => {\n    // @ts-ignore\n    const styleKeys = Object.keys(style);\n    const styleLen = styleKeys.length;\n\n    const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n    keys.forEach((key) => {\n      // @ts-ignore\n      if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n    });\n  });\n\n  return StyleSheet.create<T>(styles);\n};\n\nexport default createStyleSheet;\n"],"mappings":"AAAA,SAAqBA,UAAU,QAA8B,cAAc;AAE3E,SAASC,oBAAoB,QAAQ,qBAAqB;AAK1D,MAAMC,qBAAqB,GAAIC,GAAoB,IAAM,OAAOA,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAGF,oBAAoB,CAACE,GAAG,CAAE;AAEnH,MAAMC,YAAwC,GAAG;EAC/C,UAAU,EAAEH,oBAAoB;EAChC,YAAY,EAAEA,oBAAoB;EAClC,cAAc,EAAEA,oBAAoB;EACpC,UAAU,EAAEC,qBAAqB;EACjC,UAAU,EAAEA,qBAAqB;EACjC,WAAW,EAAEA,qBAAqB;EAClC,WAAW,EAAEA,qBAAqB;EAClC,QAAQ,EAAEA,qBAAqB;EAC/B,OAAO,EAAEA,qBAAqB;EAC9B,SAAS,EAAEA,qBAAqB;EAChC,YAAY,EAAEA,qBAAqB;EACnC,eAAe,EAAEA,qBAAqB;EACtC,aAAa,EAAEA,qBAAqB;EACpC,cAAc,EAAEA,qBAAqB;EACrC,QAAQ,EAAEA,qBAAqB;EAC/B,WAAW,EAAEA,qBAAqB;EAClC,cAAc,EAAEA,qBAAqB;EACrC,YAAY,EAAEA,qBAAqB;EACnC,aAAa,EAAEA,qBAAqB;EACpC,MAAM,EAAEA,qBAAqB;EAC7B,OAAO,EAAEA,qBAAqB;EAC9B,KAAK,EAAEA,qBAAqB;EAC5B,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMG,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAyCC,MAAqC,IAAQ;EAC1GL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOjB,UAAU,CAACkB,MAAM,CAAIP,MAAM,CAAC;AACrC,CAAC;AAED,eAAeD,gBAAgB"}
+{"version":3,"names":["StyleSheet","DEFAULT_SCALE_FACTOR","SCALE_FACTOR_WITH_STR","val","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","create"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));\n\nconst preProcessor: Partial<StylePreprocessor> = {\n  'fontSize': DEFAULT_SCALE_FACTOR,\n  'lineHeight': DEFAULT_SCALE_FACTOR,\n  'borderRadius': DEFAULT_SCALE_FACTOR,\n  'minWidth': SCALE_FACTOR_WITH_STR,\n  'maxWidth': SCALE_FACTOR_WITH_STR,\n  'minHeight': SCALE_FACTOR_WITH_STR,\n  'maxHeight': SCALE_FACTOR_WITH_STR,\n  'height': SCALE_FACTOR_WITH_STR,\n  'width': SCALE_FACTOR_WITH_STR,\n  'padding': SCALE_FACTOR_WITH_STR,\n  'paddingVertical': SCALE_FACTOR_WITH_STR,\n  'paddingHorizontal': SCALE_FACTOR_WITH_STR,\n  'paddingTop': SCALE_FACTOR_WITH_STR,\n  'paddingBottom': SCALE_FACTOR_WITH_STR,\n  'paddingLeft': SCALE_FACTOR_WITH_STR,\n  'paddingRight': SCALE_FACTOR_WITH_STR,\n  'margin': SCALE_FACTOR_WITH_STR,\n  'marginVertical': SCALE_FACTOR_WITH_STR,\n  'marginHorizontal': SCALE_FACTOR_WITH_STR,\n  'marginTop': SCALE_FACTOR_WITH_STR,\n  'marginBottom': SCALE_FACTOR_WITH_STR,\n  'marginLeft': SCALE_FACTOR_WITH_STR,\n  'marginRight': SCALE_FACTOR_WITH_STR,\n  'left': SCALE_FACTOR_WITH_STR,\n  'right': SCALE_FACTOR_WITH_STR,\n  'top': SCALE_FACTOR_WITH_STR,\n  'bottom': SCALE_FACTOR_WITH_STR,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {\n  Object.values(styles).forEach((style) => {\n    // @ts-ignore\n    const styleKeys = Object.keys(style);\n    const styleLen = styleKeys.length;\n\n    const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n    keys.forEach((key) => {\n      // @ts-ignore\n      if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n    });\n  });\n\n  return StyleSheet.create<T>(styles);\n};\n\nexport default createStyleSheet;\n"],"mappings":"AAAA,SAAqBA,UAAU,QAA8B,cAAc;AAE3E,SAASC,oBAAoB,QAAQ,qBAAqB;AAK1D,MAAMC,qBAAqB,GAAIC,GAAoB,IAAM,OAAOA,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAGF,oBAAoB,CAACE,GAAG,CAAE;AAEnH,MAAMC,YAAwC,GAAG;EAC/C,UAAU,EAAEH,oBAAoB;EAChC,YAAY,EAAEA,oBAAoB;EAClC,cAAc,EAAEA,oBAAoB;EACpC,UAAU,EAAEC,qBAAqB;EACjC,UAAU,EAAEA,qBAAqB;EACjC,WAAW,EAAEA,qBAAqB;EAClC,WAAW,EAAEA,qBAAqB;EAClC,QAAQ,EAAEA,qBAAqB;EAC/B,OAAO,EAAEA,qBAAqB;EAC9B,SAAS,EAAEA,qBAAqB;EAChC,iBAAiB,EAAEA,qBAAqB;EACxC,mBAAmB,EAAEA,qBAAqB;EAC1C,YAAY,EAAEA,qBAAqB;EACnC,eAAe,EAAEA,qBAAqB;EACtC,aAAa,EAAEA,qBAAqB;EACpC,cAAc,EAAEA,qBAAqB;EACrC,QAAQ,EAAEA,qBAAqB;EAC/B,gBAAgB,EAAEA,qBAAqB;EACvC,kBAAkB,EAAEA,qBAAqB;EACzC,WAAW,EAAEA,qBAAqB;EAClC,cAAc,EAAEA,qBAAqB;EACrC,YAAY,EAAEA,qBAAqB;EACnC,aAAa,EAAEA,qBAAqB;EACpC,MAAM,EAAEA,qBAAqB;EAC7B,OAAO,EAAEA,qBAAqB;EAC9B,KAAK,EAAEA,qBAAqB;EAC5B,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMG,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAyCC,MAAqC,IAAQ;EAC1GL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOjB,UAAU,CAACkB,MAAM,CAAIP,MAAM,CAAC;AACrC,CAAC;AAED,eAAeD,gBAAgB"}

package/lib/module/ui/Avatar/AvatarStack.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { View } from 'react-native';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+const DEFAULT_MAX = 3;
+const DEFAULT_BORDER_WIDTH = 2;
+const DEFAULT_AVATAR_GAP = -4;
+const DEFAULT_AVATAR_SIZE = 26;
+const DEFAULT_REMAINS_MAX = 99;
+const AvatarStack = _ref => {
+  let {
+    children,
+    containerStyle,
+    styles,
+    maxAvatar = DEFAULT_MAX,
+    size = DEFAULT_AVATAR_SIZE,
+    avatarGap = DEFAULT_AVATAR_GAP
+  } = _ref;
+  const {
+    colors,
+    palette,
+    select
+  } = useUIKitTheme();
+  const defaultStyles = {
+    borderWidth: DEFAULT_BORDER_WIDTH,
+    borderColor: colors.background,
+    remainsTextColor: colors.onBackground02,
+    remainsBackgroundColor: select({
+      light: palette.background100,
+      dark: palette.background600
+    })
+  };
+  const avatarStyles = {
+    ...defaultStyles,
+    ...styles
+  };
+  const childrenArray = React.Children.toArray(children).filter(it => /*#__PURE__*/React.isValidElement(it));
+  const remains = childrenArray.length - maxAvatar;
+  const shouldRenderRemains = remains > 0;
+  const actualSize = size + avatarStyles.borderWidth * 2;
+  const actualGap = avatarGap - avatarStyles.borderWidth;
+  const renderAvatars = () => {
+    return childrenArray.slice(0, maxAvatar).map((child, index) => /*#__PURE__*/React.cloneElement(child, {
+      size: actualSize,
+      containerStyle: {
+        left: actualGap * index,
+        borderWidth: avatarStyles.borderWidth,
+        borderColor: avatarStyles.borderColor
+      }
+    }));
+  };
+  const renderRemainsCount = () => {
+    if (!shouldRenderRemains) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [avatarStyles, {
+        left: actualGap * maxAvatar,
+        width: actualSize,
+        height: actualSize,
+        borderRadius: actualSize / 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: avatarStyles.remainsBackgroundColor
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: avatarStyles.remainsTextColor,
+        fontSize: 8
+      },
+      caption4: true
+    }, `+${Math.min(remains, DEFAULT_REMAINS_MAX)}`));
+  };
+  const calculateWidth = () => {
+    const widthEach = actualSize + actualGap;
+    const avatarCountOffset = shouldRenderRemains ? 1 : 0;
+    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;
+    const count = avatarCount + avatarCountOffset;
+    return widthEach * count + avatarStyles.borderWidth;
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [containerStyle, {
+      left: -avatarStyles.borderWidth,
+      flexDirection: 'row',
+      width: calculateWidth()
+    }]
+  }, renderAvatars(), renderRemainsCount());
+};
+export default AvatarStack;
+//# sourceMappingURL=AvatarStack.js.map

package/lib/module/ui/Avatar/AvatarStack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","useUIKitTheme","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","_ref","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","left","renderRemainsCount","createElement","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as ReactElement, {\n        size: actualSize,\n        containerStyle: {\n          left: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            left: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { left: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"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"}

package/lib/module/ui/Avatar/index.js

@@ -7,6 +7,7 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
+import AvatarStack from './AvatarStack';
 const Avatar = _ref => {
   let {
     uri,
@@ -71,6 +72,7 @@ const styles = createStyleSheet({
 });
 export default Object.assign(Avatar, {
   Group: AvatarGroup,
-  Icon: AvatarIcon
+  Icon: AvatarIcon,
+  Stack: AvatarStack
 });
 //# sourceMappingURL=index.js.map

package/lib/module/ui/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","StyleSheet","View","conditionChaining","Icon","Image","createStyleSheet","useUIKitTheme","AvatarGroup","AvatarIcon","Avatar","_ref","uri","square","muted","size","containerStyle","colors","palette","loadFailure","setLoadFailure","createElement","style","styles","container","width","height","borderRadius","backgroundColor","background300","Boolean","onError","source","resizeMode","absoluteFill","icon","color","onBackgroundReverse01","MutedOverlay","_ref2","primary300","opacity","onBackgroundDark01","alignItems","justifyContent","overflow","Object","assign","Group"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\n\ntype Props = {\n  uri?: string;\n  size?: number;\n  square?: boolean;\n  muted?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {\n  const { colors, palette } = useUIKitTheme();\n  const [loadFailure, setLoadFailure] = useState(false);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },\n        containerStyle,\n      ]}\n    >\n      {conditionChaining(\n        [Boolean(uri) && !loadFailure],\n        [\n          <Image\n            onError={() => setLoadFailure(true)}\n            source={{ uri }}\n            resizeMode={'cover'}\n            style={StyleSheet.absoluteFill}\n          />,\n          <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,\n        ],\n      )}\n      {muted && <MutedOverlay size={size} />}\n    </View>\n  );\n};\n\nconst MutedOverlay = ({ size }: { size: number }) => {\n  const { palette } = useUIKitTheme();\n  return (\n    <View style={[styles.container, StyleSheet.absoluteFill]}>\n      <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />\n      <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport default Object.assign(Avatar, {\n  Group: AvatarGroup,\n  Icon: AvatarIcon,\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAErE,SAASC,iBAAiB,QAAQ,uBAAuB;AAEzD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,KAAK,MAAM,wBAAwB;AAC1C,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,UAAU,MAAM,cAAc;AAUrC,MAAMC,MAAM,GAAGC,IAAA,IAAsE;EAAA,IAArE;IAAEC,GAAG;IAAEC,MAAM;IAAEC,KAAK,GAAG,KAAK;IAAEC,IAAI,GAAG,EAAE;IAAEC;EAAsB,CAAC,GAAAL,IAAA;EAC9E,MAAM;IAAEM,MAAM;IAAEC;EAAQ,CAAC,GAAGX,aAAa,EAAE;EAC3C,MAAM,CAACY,WAAW,EAAEC,cAAc,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EAErD,oBACED,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IACHoB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,KAAK,EAAEV,IAAI;MAAEW,MAAM,EAAEX,IAAI;MAAEY,YAAY,EAAEd,MAAM,GAAG,CAAC,GAAGE,IAAI,GAAG,CAAC;MAAEa,eAAe,EAAEV,OAAO,CAACW;IAAc,CAAC,EAC1Gb,cAAc;EACd,GAEDb,iBAAiB,CAChB,CAAC2B,OAAO,CAAClB,GAAG,CAAC,IAAI,CAACO,WAAW,CAAC,EAC9B,cACEpB,KAAA,CAAAsB,aAAA,CAAChB,KAAK;IACJ0B,OAAO,EAAEA,CAAA,KAAMX,cAAc,CAAC,IAAI,CAAE;IACpCY,MAAM,EAAE;MAAEpB;IAAI,CAAE;IAChBqB,UAAU,EAAE,OAAQ;IACpBX,KAAK,EAAErB,UAAU,CAACiC;EAAa,EAC/B,eACFnC,KAAA,CAAAsB,aAAA,CAACjB,IAAI;IAAC+B,IAAI,EAAE,MAAO;IAACpB,IAAI,EAAEA,IAAI,GAAG,CAAE;IAACqB,KAAK,EAAEnB,MAAM,CAACoB;EAAsB,EAAG,CAC5E,CACF,EACAvB,KAAK,iBAAIf,KAAA,CAAAsB,aAAA,CAACiB,YAAY;IAACvB,IAAI,EAAEA;EAAK,EAAG,CACjC;AAEX,CAAC;AAED,MAAMuB,YAAY,GAAGC,KAAA,IAAgC;EAAA,IAA/B;IAAExB;EAAuB,CAAC,GAAAwB,KAAA;EAC9C,MAAM;IAAErB;EAAQ,CAAC,GAAGX,aAAa,EAAE;EACnC,oBACER,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IAACoB,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEvB,UAAU,CAACiC,YAAY;EAAE,gBACvDnC,KAAA,CAAAsB,aAAA,CAACnB,IAAI;IAACoB,KAAK,EAAE,CAACrB,UAAU,CAACiC,YAAY,EAAE;MAAEN,eAAe,EAAEV,OAAO,CAACsB,UAAU;MAAEC,OAAO,EAAE;IAAI,CAAC;EAAE,EAAG,eACjG1C,KAAA,CAAAsB,aAAA,CAACjB,IAAI;IAACgC,KAAK,EAAElB,OAAO,CAACwB,kBAAmB;IAACP,IAAI,EAAE,MAAO;IAACpB,IAAI,EAAEA,IAAI,GAAG;EAAK,EAAG,CACvE;AAEX,CAAC;AAED,MAAMQ,MAAM,GAAGjB,gBAAgB,CAAC;EAC9BkB,SAAS,EAAE;IACTmB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAeC,MAAM,CAACC,MAAM,CAACrC,MAAM,EAAE;EACnCsC,KAAK,EAAExC,WAAW;EAClBJ,IAAI,EAAEK;AACR,CAAC,CAAC"}
+{"version":3,"names":["React","useState","StyleSheet","View","conditionChaining","Icon","Image","createStyleSheet","useUIKitTheme","AvatarGroup","AvatarIcon","AvatarStack","Avatar","_ref","uri","square","muted","size","containerStyle","colors","palette","loadFailure","setLoadFailure","createElement","style","styles","container","width","height","borderRadius","backgroundColor","background300","Boolean","onError","source","resizeMode","absoluteFill","icon","color","onBackgroundReverse01","MutedOverlay","_ref2","primary300","opacity","onBackgroundDark01","alignItems","justifyContent","overflow","Object","assign","Group","Stack"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\nimport AvatarStack from './AvatarStack';\n\ntype Props = {\n  uri?: string;\n  size?: number;\n  square?: boolean;\n  muted?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {\n  const { colors, palette } = useUIKitTheme();\n  const [loadFailure, setLoadFailure] = useState(false);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },\n        containerStyle,\n      ]}\n    >\n      {conditionChaining(\n        [Boolean(uri) && !loadFailure],\n        [\n          <Image\n            onError={() => setLoadFailure(true)}\n            source={{ uri }}\n            resizeMode={'cover'}\n            style={StyleSheet.absoluteFill}\n          />,\n          <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,\n        ],\n      )}\n      {muted && <MutedOverlay size={size} />}\n    </View>\n  );\n};\n\nconst MutedOverlay = ({ size }: { size: number }) => {\n  const { palette } = useUIKitTheme();\n  return (\n    <View style={[styles.container, StyleSheet.absoluteFill]}>\n      <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />\n      <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport default Object.assign(Avatar, {\n  Group: AvatarGroup,\n  Icon: AvatarIcon,\n  Stack: AvatarStack,\n});\n"],"mappings":"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"}

package/lib/module/ui/TypingIndicatorBubble/index.js

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import Box from '../../components/Box';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+const TypingIndicatorBubble = _ref => {
+  let {
+    typingUsers,
+    containerStyle,
+    maxAvatar
+  } = _ref;
+  const {
+    select,
+    palette,
+    colors
+  } = useUIKitTheme();
+  if (typingUsers.length === 0) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    style: containerStyle
+  }, /*#__PURE__*/React.createElement(Avatar.Stack, {
+    size: 26,
+    maxAvatar: maxAvatar,
+    styles: {
+      remainsTextColor: colors.onBackground02,
+      remainsBackgroundColor: select({
+        light: palette.background100,
+        dark: palette.background400
+      })
+    },
+    containerStyle: {
+      marginRight: 12
+    }
+  }, typingUsers.map((user, index) => /*#__PURE__*/React.createElement(Avatar, {
+    key: index,
+    uri: user.profileUrl
+  }))), /*#__PURE__*/React.createElement(TypingDots, {
+    dotColor: select({
+      light: palette.background100,
+      dark: palette.background400
+    }),
+    backgroundColor: colors.onBackground02
+  }));
+};
+const TypingDots = _ref2 => {
+  let {
+    dotColor,
+    backgroundColor
+  } = _ref2;
+  const animation = useRef(new Animated.Value(0)).current;
+  const dots = matrix.map(_ref3 => {
+    let [timeline, scale, opacity] = _ref3;
+    return [animation.interpolate({
+      inputRange: timeline,
+      outputRange: scale,
+      extrapolate: 'clamp'
+    }), animation.interpolate({
+      inputRange: timeline,
+      outputRange: opacity,
+      extrapolate: 'clamp'
+    })];
+  });
+  useEffect(() => {
+    const animated = Animated.loop(Animated.timing(animation, {
+      toValue: 1.4,
+      duration: 1400,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }));
+    animated.start();
+    return () => animated.reset();
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    height: 34,
+    backgroundColor: dotColor
+  }, dots.map((_ref4, index) => {
+    let [scale, opacity] = _ref4;
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      key: index,
+      style: [styles.dot, {
+        marginRight: index === dots.length - 1 ? 0 : 6,
+        opacity: opacity,
+        transform: [{
+          scale: scale
+        }],
+        backgroundColor: backgroundColor
+      }]
+    });
+  }));
+};
+const matrix = [[[0.4, 0.7, 1.0], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.6, 0.9, 1.2], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]], [[0.8, 1.1, 1.4], [1.0, 1.2, 1.0], [0.12, 0.38, 0.12]]];
+const styles = createStyleSheet({
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  }
+});
+export default TypingIndicatorBubble;
+//# sourceMappingURL=index.js.map

package/lib/module/ui/TypingIndicatorBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Animated","Easing","Box","createStyleSheet","useUIKitTheme","Avatar","TypingIndicatorBubble","_ref","typingUsers","containerStyle","maxAvatar","select","palette","colors","length","createElement","flexDirection","justifyContent","alignItems","style","Stack","size","styles","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background400","marginRight","map","user","index","key","uri","profileUrl","TypingDots","dotColor","backgroundColor","_ref2","animation","Value","current","dots","matrix","_ref3","timeline","scale","opacity","interpolate","inputRange","outputRange","extrapolate","animated","loop","timing","toValue","duration","easing","linear","useNativeDriver","start","reset","borderRadius","paddingHorizontal","height","_ref4","View","dot","transform","width"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n  typingUsers: SendbirdUser[];\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n};\n\nconst TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {\n  const { select, palette, colors } = useUIKitTheme();\n\n  if (typingUsers.length === 0) return null;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>\n      <Avatar.Stack\n        size={26}\n        maxAvatar={maxAvatar}\n        styles={{\n          remainsTextColor: colors.onBackground02,\n          remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),\n        }}\n        containerStyle={{ marginRight: 12 }}\n      >\n        {typingUsers.map((user, index) => (\n          <Avatar key={index} uri={user.profileUrl} />\n        ))}\n      </Avatar.Stack>\n      <TypingDots\n        dotColor={select({ light: palette.background100, dark: palette.background400 })}\n        backgroundColor={colors.onBackground02}\n      />\n    </Box>\n  );\n};\n\ntype TypingDotsProps = {\n  dotColor: string;\n  backgroundColor: string;\n};\nconst TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {\n  const animation = useRef(new Animated.Value(0)).current;\n  const dots = matrix.map(([timeline, scale, opacity]) => [\n    animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),\n    animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),\n  ]);\n\n  useEffect(() => {\n    const animated = Animated.loop(\n      Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),\n    );\n    animated.start();\n    return () => animated.reset();\n  }, []);\n\n  return (\n    <Box\n      flexDirection={'row'}\n      alignItems={'center'}\n      justifyContent={'center'}\n      borderRadius={16}\n      paddingHorizontal={12}\n      height={34}\n      backgroundColor={dotColor}\n    >\n      {dots.map(([scale, opacity], index) => {\n        return (\n          <Animated.View\n            key={index}\n            style={[\n              styles.dot,\n              {\n                marginRight: index === dots.length - 1 ? 0 : 6,\n                opacity: opacity,\n                transform: [{ scale: scale }],\n                backgroundColor: backgroundColor,\n              },\n            ]}\n          />\n        );\n      })}\n    </Box>\n  );\n};\n\nconst matrix = [\n  [\n    [0.4, 0.7, 1.0],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.6, 0.9, 1.2],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.8, 1.1, 1.4],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n];\n\nconst styles = createStyleSheet({\n  dot: {\n    width: 8,\n    height: 8,\n    borderRadius: 4,\n  },\n});\n\nexport default TypingIndicatorBubble;\n"],"mappings":"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"}

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

@@ -24,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';
@@ -39,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/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

@@ -20,5 +20,19 @@ declare const _default: (({ uri, square, muted, size, containerStyle }: Props) =
         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/TypingIndicatorBubble/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+type Props = {
+    typingUsers: SendbirdUser[];
+    containerStyle?: StyleProp<ViewStyle>;
+    maxAvatar?: number;
+};
+declare const TypingIndicatorBubble: ({ typingUsers, containerStyle, maxAvatar }: Props) => React.JSX.Element | null;
+export default TypingIndicatorBubble;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.2.0"
+    "@sendbird/uikit-utils": "3.3.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -85,5 +85,5 @@
       ]
     ]
   },
-  "gitHead": "dd029581f658a7970b14932df21d45a265694893"
+  "gitHead": "51adda5f33a7bb450b51ce30f505dcc9884e9586"
 }

package/src/components/TextInput/index.tsx

@@ -15,6 +15,10 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
   const variantStyle = colors['ui']['input'][variant];
   const inputStyle = editable ? variantStyle.active : variantStyle.disabled;
   const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };
+  const fontStyle = {
+    ...typography.body3,
+    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,
+  };
 
   return (
     <RNTextInput
@@ -23,7 +27,7 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
       selectionColor={inputStyle.highlight}
       placeholderTextColor={inputStyle.placeholder}
       style={[
-        typography.body3,
+        fontStyle,
         styles.input,
         { color: inputStyle.text, backgroundColor: inputStyle.background },
         underlineStyle,
@@ -38,8 +42,11 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
 
 const styles = createStyleSheet({
   input: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
+    includeFontPadding: false,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
 });
 

package/src/index.ts

@@ -26,14 +26,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';
@@ -42,6 +41,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';

package/src/styles/createStyleSheet.ts

@@ -18,11 +18,15 @@ const preProcessor: Partial<StylePreprocessor> = {
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,
+  'paddingVertical': SCALE_FACTOR_WITH_STR,
+  'paddingHorizontal': SCALE_FACTOR_WITH_STR,
   'paddingTop': SCALE_FACTOR_WITH_STR,
   'paddingBottom': SCALE_FACTOR_WITH_STR,
   'paddingLeft': SCALE_FACTOR_WITH_STR,
   'paddingRight': SCALE_FACTOR_WITH_STR,
   'margin': SCALE_FACTOR_WITH_STR,
+  'marginVertical': SCALE_FACTOR_WITH_STR,
+  'marginHorizontal': SCALE_FACTOR_WITH_STR,
   'marginTop': SCALE_FACTOR_WITH_STR,
   'marginBottom': SCALE_FACTOR_WITH_STR,
   'marginLeft': SCALE_FACTOR_WITH_STR,