@sendbird/uikit-react-native-foundation 1.0.1 → 1.0.2

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

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Platform, Pressable } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const Switch = _ref => {
+  let {
+    value,
+    onChangeValue,
+    inactiveThumbColor,
+    inactiveTrackColor,
+    trackColor,
+    thumbColor
+  } = _ref;
+  const {
+    select,
+    palette,
+    colors
+  } = useUIKitTheme();
+  const position = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const animation = Animated.timing(position, {
+      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,
+      duration: 150,
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [value]);
+
+  const createInterpolate = (offValue, onValue) => {
+    return position.interpolate({
+      inputRange: [styles.thumbOff.left, styles.thumbOn.left],
+      outputRange: [offValue, onValue],
+      extrapolate: 'clamp'
+    });
+  };
+
+  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);
+
+  const _thumbColor = createInterpolate(inactiveThumbColor ?? palette.background300, thumbColor ?? select({
+    light: palette.primary400,
+    dark: palette.primary300
+  }));
+
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: () => onChangeValue(!value),
+    style: [styles.container]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.track, {
+      backgroundColor: _trackColor
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.thumb, {
+      backgroundColor: _thumbColor,
+      transform: [{
+        translateX: position
+      }]
+    }]
+  }));
+};
+
+const OFFSET = {
+  W: 20,
+  H: 16
+};
+const styles = createStyleSheet({
+  container: {
+    width: OFFSET.W + OFFSET.H,
+    height: OFFSET.H,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  track: {
+    width: '100%',
+    height: '100%',
+    borderRadius: OFFSET.H / 2,
+    position: 'absolute'
+  },
+  thumb: {
+    width: OFFSET.W,
+    height: OFFSET.W,
+    borderRadius: OFFSET.W / 2,
+    ...Platform.select({
+      android: {
+        elevation: 2
+      },
+      ios: {
+        shadowColor: 'black',
+        shadowRadius: 1,
+        shadowOffset: {
+          width: 0,
+          height: 2
+        },
+        shadowOpacity: 0.4
+      }
+    })
+  },
+  thumbOn: {
+    left: OFFSET.H / 2
+  },
+  thumbOff: {
+    left: -OFFSET.H / 2
+  }
+});
+export default Switch;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Animated","Platform","Pressable","createStyleSheet","useUIKitTheme","Switch","value","onChangeValue","inactiveThumbColor","inactiveTrackColor","trackColor","thumbColor","select","palette","colors","position","Value","current","animation","timing","toValue","styles","thumbOn","left","thumbOff","duration","useNativeDriver","start","stop","createInterpolate","offValue","onValue","interpolate","inputRange","outputRange","extrapolate","_trackColor","onBackground04","primary200","_thumbColor","background300","light","primary400","dark","primary300","container","track","backgroundColor","thumb","transform","translateX","OFFSET","W","H","width","height","alignItems","justifyContent","borderRadius","android","elevation","ios","shadowColor","shadowRadius","shadowOffset","shadowOpacity"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Platform, Pressable } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype SwitchProps = React.PropsWithChildren<{\n  trackColor?: string;\n  thumbColor?: string;\n  inactiveThumbColor?: string;\n  inactiveTrackColor?: string;\n\n  value: boolean;\n  onChangeValue: (val: boolean) => void;\n}>;\nconst Switch = ({\n  value,\n  onChangeValue,\n  inactiveThumbColor,\n  inactiveTrackColor,\n  trackColor,\n  thumbColor,\n}: SwitchProps) => {\n  const { select, palette, colors } = useUIKitTheme();\n  const position = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    const animation = Animated.timing(position, {\n      toValue: value ? styles.thumbOn.left : styles.thumbOff.left,\n      duration: 150,\n      useNativeDriver: false,\n    });\n    animation.start();\n    return () => animation.stop();\n  }, [value]);\n\n  const createInterpolate = <T extends string>(offValue: T, onValue: T) => {\n    return position.interpolate({\n      inputRange: [styles.thumbOff.left, styles.thumbOn.left],\n      outputRange: [offValue, onValue],\n      extrapolate: 'clamp',\n    });\n  };\n  const _trackColor = createInterpolate(inactiveTrackColor ?? colors.onBackground04, trackColor ?? palette.primary200);\n  const _thumbColor = createInterpolate(\n    inactiveThumbColor ?? palette.background300,\n    thumbColor ?? select({ light: palette.primary400, dark: palette.primary300 }),\n  );\n\n  return (\n    <Pressable onPress={() => onChangeValue(!value)} style={[styles.container]}>\n      <Animated.View style={[styles.track, { backgroundColor: _trackColor }]} />\n      <Animated.View style={[styles.thumb, { backgroundColor: _thumbColor, transform: [{ translateX: position }] }]} />\n    </Pressable>\n  );\n};\n\nconst OFFSET = { W: 20, H: 16 };\nconst styles = createStyleSheet({\n  container: {\n    width: OFFSET.W + OFFSET.H,\n    height: OFFSET.H,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    width: '100%',\n    height: '100%',\n    borderRadius: OFFSET.H / 2,\n    position: 'absolute',\n  },\n  thumb: {\n    width: OFFSET.W,\n    height: OFFSET.W,\n    borderRadius: OFFSET.W / 2,\n    ...Platform.select({\n      android: {\n        elevation: 2,\n      },\n      ios: {\n        shadowColor: 'black',\n        shadowRadius: 1,\n        shadowOffset: { width: 0, height: 2 },\n        shadowOpacity: 0.4,\n      },\n    }),\n  },\n  thumbOn: {\n    left: OFFSET.H / 2,\n  },\n  thumbOff: {\n    left: -OFFSET.H / 2,\n  },\n});\n\nexport default Switch;\n"],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const Text = _ref => {
+  let {
+    children,
+    color,
+    style,
+    ...props
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const typoStyle = useTypographyFilter(props);
+  return /*#__PURE__*/React.createElement(RNText, _extends({
+    style: [{
+      color: typeof color === 'string' ? color : (color === null || color === void 0 ? void 0 : color(colors)) ?? colors.text
+    }, typoStyle, style]
+  }, props), children);
+};
+
+const useTypographyFilter = _ref2 => {
+  let {
+    h1,
+    h2,
+    subtitle1,
+    subtitle2,
+    body1,
+    body2,
+    body3,
+    button,
+    caption1,
+    caption2,
+    caption3,
+    caption4
+  } = _ref2;
+  const {
+    typography
+  } = useUIKitTheme();
+  if (h1) return typography.h1;
+  if (h2) return typography.h2;
+  if (subtitle1) return typography.subtitle1;
+  if (subtitle2) return typography.subtitle2;
+  if (body1) return typography.body1;
+  if (body2) return typography.body2;
+  if (body3) return typography.body3;
+  if (button) return typography.button;
+  if (caption1) return typography.caption1;
+  if (caption2) return typography.caption2;
+  if (caption3) return typography.caption3;
+  if (caption4) return typography.caption4;
+  return {};
+};
+
+export default Text;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","RNText","useUIKitTheme","children","color","style","props","colors","typoStyle","useTypographyFilter","text","h1","h2","subtitle1","subtitle2","body1","body2","body3","button","caption1","caption2","caption3","caption4","typography"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Text as RNText, TextProps as RNTextProps } from 'react-native';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { TypoName, UIKitTheme } from '../../types';\n\ntype TypographyProps = Partial<Record<TypoName, boolean>>;\nexport type TextProps = RNTextProps & TypographyProps & { color?: ((colors: UIKitTheme['colors']) => string) | string };\nconst Text = ({ children, color, style, ...props }: TextProps) => {\n  const { colors } = useUIKitTheme();\n  const typoStyle = useTypographyFilter(props);\n  return (\n    <RNText\n      style={[{ color: typeof color === 'string' ? color : color?.(colors) ?? colors.text }, typoStyle, style]}\n      {...props}\n    >\n      {children}\n    </RNText>\n  );\n};\n\nconst useTypographyFilter = ({\n  h1,\n  h2,\n  subtitle1,\n  subtitle2,\n  body1,\n  body2,\n  body3,\n  button,\n  caption1,\n  caption2,\n  caption3,\n  caption4,\n}: TypographyProps) => {\n  const { typography } = useUIKitTheme();\n  if (h1) return typography.h1;\n  if (h2) return typography.h2;\n  if (subtitle1) return typography.subtitle1;\n  if (subtitle2) return typography.subtitle2;\n  if (body1) return typography.body1;\n  if (body2) return typography.body2;\n  if (body3) return typography.body3;\n  if (button) return typography.button;\n  if (caption1) return typography.caption1;\n  if (caption2) return typography.caption2;\n  if (caption3) return typography.caption3;\n  if (caption4) return typography.caption4;\n  return {};\n};\n\nexport default Text;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAI,IAAIC,MAAjB,QAAyD,cAAzD;AAEA,OAAOC,aAAP,MAA0B,2BAA1B;;AAKA,MAAMF,IAAI,GAAG,QAAqD;EAAA,IAApD;IAAEG,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0B,GAAGC;EAA7B,CAAoD;EAChE,MAAM;IAAEC;EAAF,IAAaL,aAAa,EAAhC;EACA,MAAMM,SAAS,GAAGC,mBAAmB,CAACH,KAAD,CAArC;EACA,oBACE,oBAAC,MAAD;IACE,KAAK,EAAE,CAAC;MAAEF,KAAK,EAAE,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoC,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAGG,MAAH,CAAL,KAAmBA,MAAM,CAACG;IAAvE,CAAD,EAAgFF,SAAhF,EAA2FH,KAA3F;EADT,GAEMC,KAFN,GAIGH,QAJH,CADF;AAQD,CAXD;;AAaA,MAAMM,mBAAmB,GAAG,SAaL;EAAA,IAbM;IAC3BE,EAD2B;IAE3BC,EAF2B;IAG3BC,SAH2B;IAI3BC,SAJ2B;IAK3BC,KAL2B;IAM3BC,KAN2B;IAO3BC,KAP2B;IAQ3BC,MAR2B;IAS3BC,QAT2B;IAU3BC,QAV2B;IAW3BC,QAX2B;IAY3BC;EAZ2B,CAaN;EACrB,MAAM;IAAEC;EAAF,IAAiBrB,aAAa,EAApC;EACA,IAAIS,EAAJ,EAAQ,OAAOY,UAAU,CAACZ,EAAlB;EACR,IAAIC,EAAJ,EAAQ,OAAOW,UAAU,CAACX,EAAlB;EACR,IAAIC,SAAJ,EAAe,OAAOU,UAAU,CAACV,SAAlB;EACf,IAAIC,SAAJ,EAAe,OAAOS,UAAU,CAACT,SAAlB;EACf,IAAIC,KAAJ,EAAW,OAAOQ,UAAU,CAACR,KAAlB;EACX,IAAIC,KAAJ,EAAW,OAAOO,UAAU,CAACP,KAAlB;EACX,IAAIC,KAAJ,EAAW,OAAOM,UAAU,CAACN,KAAlB;EACX,IAAIC,MAAJ,EAAY,OAAOK,UAAU,CAACL,MAAlB;EACZ,IAAIC,QAAJ,EAAc,OAAOI,UAAU,CAACJ,QAAlB;EACd,IAAIC,QAAJ,EAAc,OAAOG,UAAU,CAACH,QAAlB;EACd,IAAIC,QAAJ,EAAc,OAAOE,UAAU,CAACF,QAAlB;EACd,IAAIC,QAAJ,EAAc,OAAOC,UAAU,CAACD,QAAlB;EACd,OAAO,EAAP;AACD,CA5BD;;AA8BA,eAAetB,IAAf"}

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

@@ -0,0 +1,43 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
+  let {
+    children,
+    style,
+    variant = 'default',
+    editable = true,
+    ...props
+  } = _ref;
+  const {
+    typography,
+    colors
+  } = useUIKitTheme();
+  const variantStyle = colors['ui']['input'][variant];
+  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;
+  const underlineStyle = variant === 'underline' && {
+    borderBottomWidth: 2,
+    borderBottomColor: inputStyle.highlight
+  };
+  return /*#__PURE__*/React.createElement(RNTextInput, _extends({
+    ref: ref,
+    editable: editable,
+    selectionColor: inputStyle.highlight,
+    placeholderTextColor: inputStyle.placeholder,
+    style: [typography.body3, styles.input, {
+      color: inputStyle.text,
+      backgroundColor: inputStyle.background
+    }, underlineStyle, style]
+  }, props), children);
+});
+const styles = createStyleSheet({
+  input: {
+    paddingVertical: 8,
+    paddingHorizontal: 16
+  }
+});
+export default TextInput;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","TextInput","RNTextInput","createStyleSheet","useUIKitTheme","forwardRef","ref","children","style","variant","editable","props","typography","colors","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","placeholder","body3","styles","input","color","text","backgroundColor","background","paddingVertical","paddingHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TextInput as RNTextInput, TextInputProps } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { UIKitTheme } from '../../types';\n\ntype Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;\nconst TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(\n  { children, style, variant = 'default', editable = true, ...props },\n  ref,\n) {\n  const { typography, colors } = useUIKitTheme();\n\n  const variantStyle = colors['ui']['input'][variant];\n  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;\n  const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };\n\n  return (\n    <RNTextInput\n      ref={ref}\n      editable={editable}\n      selectionColor={inputStyle.highlight}\n      placeholderTextColor={inputStyle.placeholder}\n      style={[\n        typography.body3,\n        styles.input,\n        { color: inputStyle.text, backgroundColor: inputStyle.background },\n        underlineStyle,\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </RNTextInput>\n  );\n});\n\nconst styles = createStyleSheet({\n  input: {\n    paddingVertical: 8,\n    paddingHorizontal: 16,\n  },\n});\n\nexport default TextInput;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAS,IAAIC,WAAtB,QAAyD,cAAzD;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AAIA,MAAMH,SAAS,gBAAGD,KAAK,CAACK,UAAN,CAAqC,SAASJ,SAAT,OAErDK,GAFqD,EAGrD;EAAA,IAFA;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,OAAO,GAAG,SAA7B;IAAwCC,QAAQ,GAAG,IAAnD;IAAyD,GAAGC;EAA5D,CAEA;EACA,MAAM;IAAEC,UAAF;IAAcC;EAAd,IAAyBT,aAAa,EAA5C;EAEA,MAAMU,YAAY,GAAGD,MAAM,CAAC,IAAD,CAAN,CAAa,OAAb,EAAsBJ,OAAtB,CAArB;EACA,MAAMM,UAAU,GAAGL,QAAQ,GAAGI,YAAY,CAACE,MAAhB,GAAyBF,YAAY,CAACG,QAAjE;EACA,MAAMC,cAAc,GAAGT,OAAO,KAAK,WAAZ,IAA2B;IAAEU,iBAAiB,EAAE,CAArB;IAAwBC,iBAAiB,EAAEL,UAAU,CAACM;EAAtD,CAAlD;EAEA,oBACE,oBAAC,WAAD;IACE,GAAG,EAAEf,GADP;IAEE,QAAQ,EAAEI,QAFZ;IAGE,cAAc,EAAEK,UAAU,CAACM,SAH7B;IAIE,oBAAoB,EAAEN,UAAU,CAACO,WAJnC;IAKE,KAAK,EAAE,CACLV,UAAU,CAACW,KADN,EAELC,MAAM,CAACC,KAFF,EAGL;MAAEC,KAAK,EAAEX,UAAU,CAACY,IAApB;MAA0BC,eAAe,EAAEb,UAAU,CAACc;IAAtD,CAHK,EAILX,cAJK,EAKLV,KALK;EALT,GAYMG,KAZN,GAcGJ,QAdH,CADF;AAkBD,CA5BiB,CAAlB;AA8BA,MAAMiB,MAAM,GAAGrB,gBAAgB,CAAC;EAC9BsB,KAAK,EAAE;IACLK,eAAe,EAAE,CADZ;IAELC,iBAAiB,EAAE;EAFd;AADuB,CAAD,CAA/B;AAOA,eAAe9B,SAAf"}

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

@@ -0,0 +1,156 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import Text from '../Text';
+const ToastContext = /*#__PURE__*/createContext(null);
+
+const useOpacity = () => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const transition = useCallback(value => Animated.timing(opacity, {
+    toValue: value,
+    duration: 500,
+    useNativeDriver: true
+  }).start(), []);
+  return {
+    opacity,
+    show: () => transition(1),
+    hide: () => transition(0)
+  };
+};
+
+const Toast = _ref => {
+  let {
+    visible,
+    type,
+    children,
+    top,
+    bottom
+  } = _ref;
+  const {
+    colors,
+    select,
+    palette
+  } = useUIKitTheme();
+  const {
+    opacity,
+    show,
+    hide
+  } = useOpacity();
+  const color = useMemo(() => {
+    if (type === 'error') {
+      return select({
+        dark: palette.error300,
+        light: palette.error200
+      });
+    }
+
+    if (type === 'success') {
+      return select({
+        dark: palette.secondary300,
+        light: palette.secondary200
+      });
+    }
+
+    return 'transparent';
+  }, [type, select]);
+  const backgroundColor = useMemo(() => {
+    return select({
+      light: 'rgba(0,0,0,0.64)',
+      dark: 'rgba(255,255,255,0.64)'
+    });
+  }, [select]);
+  useEffect(() => {
+    visible ? show() : hide();
+  }, [visible]);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    pointerEvents: 'none',
+    style: [styles.toast, {
+      opacity,
+      top,
+      bottom,
+      backgroundColor
+    }]
+  }, type !== 'normal' && /*#__PURE__*/React.createElement(Icon, {
+    icon: type === 'success' ? 'done' : 'error',
+    color: color,
+    containerStyle: styles.icon
+  }), /*#__PURE__*/React.createElement(Text, {
+    color: colors.onBackgroundReverse01,
+    body3: true,
+    numberOfLines: 2,
+    style: styles.text
+  }, children));
+};
+
+const VISIBLE_MS = 3000;
+export const ToastProvider = _ref2 => {
+  let {
+    children,
+    dismissTimeout = VISIBLE_MS
+  } = _ref2;
+  const [state, setState] = useState({
+    visible: false,
+    type: 'error',
+    text: ''
+  });
+  const {
+    bottom
+  } = useSafeAreaInsets();
+  useEffect(() => {
+    if (!state.visible) return;
+    const hideTimeout = setTimeout(() => {
+      setState(prev => ({ ...prev,
+        visible: false
+      }));
+    }, dismissTimeout);
+    return () => clearTimeout(hideTimeout);
+  });
+  return /*#__PURE__*/React.createElement(ToastContext.Provider, {
+    value: {
+      show: function (text) {
+        let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'normal';
+        return text && setState({
+          text,
+          type,
+          visible: true
+        });
+      }
+    }
+  }, children, /*#__PURE__*/React.createElement(Toast, {
+    type: state.type,
+    visible: state.visible,
+    bottom: bottom + styles.toastPosition.bottom
+  }, state.text));
+};
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');
+  return context;
+};
+const styles = createStyleSheet({
+  toast: {
+    position: 'absolute',
+    height: 48,
+    paddingHorizontal: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    borderRadius: 24,
+    flexDirection: 'row'
+  },
+  icon: {
+    marginRight: 4
+  },
+  text: {
+    maxWidth: 240,
+    paddingHorizontal: 4
+  },
+  toastPosition: {
+    bottom: 60
+  }
+});
+export default Toast;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useCallback","useContext","useEffect","useMemo","useRef","useState","Animated","useSafeAreaInsets","createStyleSheet","useUIKitTheme","Icon","Text","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","styles","toast","icon","onBackgroundReverse01","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = useCallback(\n    (value: number) => Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start(),\n    [],\n  );\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n        {state.text}\n      </Toast>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useMemo } from 'react';
+import { Linking } from 'react-native';
+import { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';
+import createStyleSheet from '../../styles/createStyleSheet';
+import Text from '../Text';
+
+const openUrl = (url, httpProtocol) => {
+  const targetUrl = httpProtocol ? url : 'https://' + url;
+  Linking.openURL(targetUrl).catch(err => Logger.warn('[URLParsedText]', 'Cannot open url', err));
+};
+
+const URLParsedText = _ref => {
+  let {
+    children,
+    onPressUrl = openUrl,
+    strict,
+    ...props
+  } = _ref;
+  const parsedChildren = useMemo(() => {
+    return React.Children.map(React.Children.toArray(children), child => {
+      if (typeof child === 'string') {
+        return replaceUrlAsComponents(child, url => {
+          return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
+            suppressHighlighting: true,
+            onPress: () => onPressUrl === null || onPressUrl === void 0 ? void 0 : onPressUrl(url, url.startsWith('http')),
+            style: [props.style, styles.url]
+          }), url);
+        }, strict);
+      }
+
+      return child;
+    });
+  }, [children]);
+  return /*#__PURE__*/React.createElement(Text, props, parsedChildren);
+};
+
+const styles = createStyleSheet({
+  url: {
+    textDecorationLine: 'underline'
+  }
+});
+export default URLParsedText;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Linking","Logger","replaceUrlAsComponents","createStyleSheet","Text","openUrl","url","httpProtocol","targetUrl","openURL","catch","err","warn","URLParsedText","children","onPressUrl","strict","props","parsedChildren","Children","map","toArray","child","startsWith","style","styles","textDecorationLine"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Linking } from 'react-native';\n\nimport { Logger, replaceUrlAsComponents } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport type { TextProps } from '../Text';\nimport Text from '../Text';\n\ntype OnPressUrl = (url: string, httpProtocol: boolean) => void;\n\nconst openUrl: OnPressUrl = (url, httpProtocol) => {\n  const targetUrl = httpProtocol ? url : 'https://' + url;\n  Linking.openURL(targetUrl).catch((err) => Logger.warn('[URLParsedText]', 'Cannot open url', err));\n};\n\ntype Props = TextProps & {\n  onPressUrl?: OnPressUrl;\n  strict?: boolean;\n};\nconst URLParsedText = ({ children, onPressUrl = openUrl, strict, ...props }: Props) => {\n  const parsedChildren = useMemo((): React.ReactNode => {\n    return React.Children.map(React.Children.toArray(children), (child) => {\n      if (typeof child === 'string') {\n        return replaceUrlAsComponents(\n          child,\n          (url) => {\n            return (\n              <Text\n                {...props}\n                suppressHighlighting\n                onPress={() => onPressUrl?.(url, url.startsWith('http'))}\n                style={[props.style, styles.url]}\n              >\n                {url}\n              </Text>\n            );\n          },\n          strict,\n        );\n      }\n\n      return child;\n    });\n  }, [children]);\n\n  return <Text {...props}>{parsedChildren}</Text>;\n};\nconst styles = createStyleSheet({\n  url: { textDecorationLine: 'underline' },\n});\nexport default URLParsedText;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,OAAT,QAAwB,cAAxB;AAEA,SAASC,MAAT,EAAiBC,sBAAjB,QAA+C,uBAA/C;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AAEA,OAAOC,IAAP,MAAiB,SAAjB;;AAIA,MAAMC,OAAmB,GAAG,CAACC,GAAD,EAAMC,YAAN,KAAuB;EACjD,MAAMC,SAAS,GAAGD,YAAY,GAAGD,GAAH,GAAS,aAAaA,GAApD;EACAN,OAAO,CAACS,OAAR,CAAgBD,SAAhB,EAA2BE,KAA3B,CAAkCC,GAAD,IAASV,MAAM,CAACW,IAAP,CAAY,iBAAZ,EAA+B,iBAA/B,EAAkDD,GAAlD,CAA1C;AACD,CAHD;;AASA,MAAME,aAAa,GAAG,QAAiE;EAAA,IAAhE;IAAEC,QAAF;IAAYC,UAAU,GAAGV,OAAzB;IAAkCW,MAAlC;IAA0C,GAAGC;EAA7C,CAAgE;EACrF,MAAMC,cAAc,GAAGnB,OAAO,CAAC,MAAuB;IACpD,OAAOD,KAAK,CAACqB,QAAN,CAAeC,GAAf,CAAmBtB,KAAK,CAACqB,QAAN,CAAeE,OAAf,CAAuBP,QAAvB,CAAnB,EAAsDQ,KAAD,IAAW;MACrE,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;QAC7B,OAAOpB,sBAAsB,CAC3BoB,KAD2B,EAE1BhB,GAAD,IAAS;UACP,oBACE,oBAAC,IAAD,eACMW,KADN;YAEE,oBAAoB,MAFtB;YAGE,OAAO,EAAE,MAAMF,UAAN,aAAMA,UAAN,uBAAMA,UAAU,CAAGT,GAAH,EAAQA,GAAG,CAACiB,UAAJ,CAAe,MAAf,CAAR,CAH3B;YAIE,KAAK,EAAE,CAACN,KAAK,CAACO,KAAP,EAAcC,MAAM,CAACnB,GAArB;UAJT,IAMGA,GANH,CADF;QAUD,CAb0B,EAc3BU,MAd2B,CAA7B;MAgBD;;MAED,OAAOM,KAAP;IACD,CArBM,CAAP;EAsBD,CAvB6B,EAuB3B,CAACR,QAAD,CAvB2B,CAA9B;EAyBA,oBAAO,oBAAC,IAAD,EAAUG,KAAV,EAAkBC,cAAlB,CAAP;AACD,CA3BD;;AA4BA,MAAMO,MAAM,GAAGtB,gBAAgB,CAAC;EAC9BG,GAAG,EAAE;IAAEoB,kBAAkB,EAAE;EAAtB;AADyB,CAAD,CAA/B;AAGA,eAAeb,aAAf"}

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

@@ -0,0 +1,62 @@
+declare const IconAssets: {
+    'chat-hide': any;
+    'chat-show': any;
+    add: any;
+    archive: any;
+    'arrow-left': 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;
+    moderations: any;
+    more: any;
+    mute: any;
+    'notifications-filled': any;
+    'notifications-off-filled': any;
+    notifications: any;
+    operator: any;
+    photo: any;
+    play: any;
+    plus: any;
+    question: any;
+    refresh: any;
+    remove: any;
+    'reply-filled': any;
+    reply: any;
+    search: any;
+    send: any;
+    'settings-filled': any;
+    spinner: any;
+    streaming: any;
+    supergroup: any;
+    theme: any;
+    'thumbnail-none': any;
+    unarchive: any;
+    user: any;
+};
+export default IconAssets;

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

@@ -0,0 +1,3 @@
+import type { SendbirdImageComponent } from './index';
+declare const Image_FastImage: SendbirdImageComponent;
+export default Image_FastImage;

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

@@ -0,0 +1,3 @@
+import type { SendbirdImageComponent } from './index';
+declare const Image_ReactNative: SendbirdImageComponent;
+export default Image_ReactNative;

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

@@ -0,0 +1,14 @@
+import type { ImageProps as NativeImageProps } from 'react-native';
+export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'onError'> {
+    onLoad?: (event: {
+        width: number;
+        height: number;
+    }) => void;
+    onError?: (event: {
+        error?: unknown;
+    }) => void;
+    tintColor?: string;
+}
+export declare type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
+declare const _default: SendbirdImageComponent;
+export default _default;

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

@@ -0,0 +1,45 @@
+/** Assets **/
+export { default as IconAssets } from './assets/icon';
+/** Component **/
+export { default as Image } from './components/Image';
+/** UI **/
+export { default as ActionMenu, ActionMenuItem } from './ui/ActionMenu';
+export { default as Alert } from './ui/Alert';
+export { default as Avatar } from './ui/Avatar';
+export { default as Badge } from './ui/Badge';
+export { default as BottomSheet, BottomSheetItem } 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 Divider } from './ui/Divider';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
+export { default as Header } from './ui/Header';
+export { default as Icon } from './ui/Icon';
+export { default as LoadingSpinner } from './ui/LoadingSpinner';
+export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as Modal } from './ui/Modal';
+export { default as Placeholder } from './ui/Placeholder';
+export { default as Prompt } from './ui/Prompt';
+export { default as Switch } from './ui/Switch';
+export { default as Text } from './ui/Text';
+export { default as TextInput } from './ui/TextInput';
+export { default as Toast, useToast, ToastProvider } from './ui/Toast';
+export { default as URLParsedText } from './ui/URLParsedText';
+/** Styles **/
+export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';
+export { default as createScaleFactor } from './styles/createScaleFactor';
+export { default as createStyleSheet } from './styles/createStyleSheet';
+export { default as createTypography, UIKitTypographyOverrides } from './styles/createTypography';
+export { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';
+export { HeaderStyleContext, HeaderStyleProvider, HeaderStyleContextType } from './styles/HeaderStyleContext';
+export { default as useHeaderStyle } from './styles/useHeaderStyle';
+/** Theme **/
+export { default as createTheme } from './theme/createTheme';
+export { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';
+export { default as LightUIKitTheme } from './theme/LightUIKitTheme';
+export { default as Palette } from './theme/Palette';
+export { default as UIKitThemeContext } from './theme/UIKitThemeContext';
+export { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';
+export { default as useUIKitTheme } from './theme/useUIKitTheme';
+/** Types **/
+export type { TypoName, UIKitTheme, UIKitTypography, FontAttributes, BaseHeaderProps, UIKitColorScheme, UIKitColors, ComponentColorTree, UIKitPalette, HeaderElement, HeaderPartProps, ComponentColors, Component, GetColorTree, } from './types';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { BaseHeaderProps, HeaderElement } from '../types';
+export declare type HeaderStyleContextType = {
+    HeaderComponent: (props: BaseHeaderProps<{
+        title?: HeaderElement;
+        left?: HeaderElement;
+        right?: HeaderElement;
+        onPressLeft?: () => void;
+        onPressRight?: () => void;
+    }, {
+        clearTitleMargin?: boolean;
+    }>) => React.ReactElement | null;
+    defaultTitleAlign: 'left' | 'center';
+    statusBarTranslucent: boolean;
+    topInset: number;
+};
+export declare const HeaderStyleContext: React.Context<HeaderStyleContextType>;
+declare type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
+export declare const HeaderStyleProvider: ({ children, HeaderComponent, defaultTitleAlign, statusBarTranslucent, }: React.PropsWithChildren<Props>) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+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;

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

@@ -0,0 +1,9 @@
+import type { UIKitColorScheme, UIKitTheme } from '../types';
+/**
+ * select method factory
+ * Select method returns the most fitting value for the color scheme you are currently running on.
+ * @param colorScheme
+ * @returns Function
+ * */
+declare const createSelectByColorScheme: (colorScheme: UIKitColorScheme) => UIKitTheme['select'];
+export default createSelectByColorScheme;

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

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+/**
+ * Create StyleSheet with customized pre-processor
+ * Return a StyleSheet that pre-processed
+ * @param styles
+ * @returns StyleSheet
+ * */
+declare const createStyleSheet: <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>) => T;
+export default createStyleSheet;