@sendbird/uikit-react-native-foundation 1.0.0-rc.1

package/lib/commonjs/ui/Alert/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _DialogBox = _interopRequireDefault(require("../Dialog/DialogBox"));
+
+var _Modal = _interopRequireDefault(require("../Modal"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Alert = _ref => {
+  let {
+    onDismiss,
+    visible,
+    onHide,
+    title = '',
+    message = '',
+    buttons = [{
+      text: 'OK'
+    }]
+  } = _ref;
+  const {
+    statusBarTranslucent
+  } = (0, _useHeaderStyle.default)();
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    onClose: onHide,
+    onDismiss: onDismiss,
+    statusBarTranslucent: statusBarTranslucent,
+    visible: visible,
+    backgroundStyle: {
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+    style: styles.container
+  }, Boolean(title) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.titleContainer
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    h1: true,
+    color: colors.ui.dialog.default.none.text,
+    numberOfLines: 1,
+    style: {
+      flex: 1
+    }
+  }, title)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.messageContainer
+  }, Boolean(message) && /*#__PURE__*/_react.default.createElement(_Text.default, {
+    subtitle2: !title,
+    body3: Boolean(title),
+    color: !title ? colors.ui.dialog.default.none.text : colors.ui.dialog.default.none.message,
+    numberOfLines: 3
+  }, message)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.buttonContainer
+  }, buttons.map((_ref2, index) => {
+    let {
+      text = 'OK',
+      style = 'default',
+      onPress
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      key: text + index,
+      variant: 'text',
+      style: styles.button,
+      onPress: async () => {
+        try {
+          onPress === null || onPress === void 0 ? void 0 : onPress();
+        } finally {
+          onHide();
+        }
+      },
+      contentColor: style === 'destructive' ? colors.ui.dialog.default.none.destructive : colors.ui.dialog.default.none.highlight
+    }, text);
+  }))));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    paddingTop: 20
+  },
+  titleContainer: {
+    paddingBottom: 16,
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  messageContainer: {
+    paddingHorizontal: 24,
+    marginBottom: 12
+  },
+  button: {
+    marginLeft: 8
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 12
+  }
+});
+var _default = Alert;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/ui/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Alert","onDismiss","visible","onHide","title","message","buttons","text","statusBarTranslucent","useHeaderStyle","colors","useUIKitTheme","alignItems","justifyContent","styles","container","Boolean","titleContainer","ui","dialog","default","none","flex","messageContainer","buttonContainer","map","index","style","onPress","button","destructive","highlight","createStyleSheet","paddingTop","paddingBottom","paddingHorizontal","flexDirection","marginBottom","marginLeft","padding"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertButton, View } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\nimport Modal from '../Modal';\nimport Text from '../Text';\n\nexport type AlertItem = {\n  title?: string;\n  message?: string;\n  buttons?: AlertButton[];\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n} & AlertItem;\nconst Alert: React.FC<Props> = ({\n  onDismiss,\n  visible,\n  onHide,\n  title = '',\n  message = '',\n  buttons = [{ text: 'OK' }],\n}) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Modal\n      onClose={onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox style={styles.container}>\n        {Boolean(title) && (\n          <View style={styles.titleContainer}>\n            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.messageContainer}>\n          {Boolean(message) && (\n            <Text\n              subtitle2={!title}\n              body3={Boolean(title)}\n              color={!title ? colors.ui.dialog.default.none.text : colors.ui.dialog.default.none.message}\n              numberOfLines={3}\n            >\n              {message}\n            </Text>\n          )}\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text = 'OK', style = 'default', onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                onPress={async () => {\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n                contentColor={\n                  style === 'destructive'\n                    ? colors.ui.dialog.default.none.destructive\n                    : colors.ui.dialog.default.none.highlight\n                }\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 20,\n  },\n  titleContainer: {\n    paddingBottom: 16,\n    paddingHorizontal: 24,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  messageContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  button: {\n    marginLeft: 8,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n});\n\nexport default Alert;\n"],"mappings":"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"}

package/lib/commonjs/ui/Avatar/AvatarGroup.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const MAX = 4;
+
+const AvatarGroup = _ref => {
+  let {
+    children,
+    containerStyle,
+    size = 56
+  } = _ref;
+
+  const childAmount = _react.default.Children.count(children);
+
+  if (childAmount === 0) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [containerStyle, {
+        overflow: 'hidden',
+        width: size,
+        height: size,
+        borderRadius: size,
+        backgroundColor: 'rgba(120,120,120,0.2)'
+      }]
+    });
+  }
+
+  const avatars = (0, _react.useMemo)(() => {
+    var _React$Children$map;
+
+    return ((_React$Children$map = _react.default.Children.map(children, (child, index) => {
+      if (index + 1 > MAX) return child;
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
+      if (childAmount === 1) return /*#__PURE__*/_react.default.cloneElement(child, {
+        size,
+        containerStyle
+      });
+      const top = getTopPoint(index, childAmount) * size;
+      const left = getLeftPoint(index) * size;
+      const width = getWidthPoint(index, childAmount) * size;
+      const height = getHeightPoint(index, childAmount) * size;
+      const innerLeft = -getInnerLeft(index, childAmount) * size;
+      const innerTop = -getInnerTop(childAmount) * size;
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: {
+          overflow: 'hidden',
+          position: 'absolute',
+          top,
+          left,
+          width,
+          height
+        }
+      }, /*#__PURE__*/_react.default.cloneElement(child, {
+        size,
+        square: true,
+        containerStyle: {
+          left: innerLeft,
+          top: innerTop
+        }
+      }));
+    })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.slice(0, 4)) ?? [];
+  }, [children]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [containerStyle, {
+      overflow: 'hidden',
+      width: size,
+      height: size,
+      borderRadius: size
+    }]
+  }, avatars);
+};
+
+const getHeightPoint = (_, total) => {
+  if (total === 2) return 1;
+  return 0.5;
+};
+
+const getWidthPoint = (idx, total) => {
+  if (total === 3 && idx === 0) return 1;
+  return 0.5;
+};
+
+const getTopPoint = (idx, total) => {
+  if (total === 2) return -0.025;
+  if (total === 3 && idx === 0) return -0.025;
+  if (total === 3 && idx !== 0) return 0.525;
+  if (idx === 0 || idx === 1) return -0.025;
+  return 0.525;
+};
+
+const getLeftPoint = idx => {
+  if (idx === 0 || idx === 2) return -0.025;
+  return 0.525;
+};
+
+const getInnerLeft = (idx, total) => {
+  if (total === 3 && idx === 0) return 0;
+  return 0.25;
+};
+
+const getInnerTop = total => {
+  if (total === 2) return 0;
+  return 0.25;
+};
+
+var _default = AvatarGroup;
+exports.default = _default;
+//# sourceMappingURL=AvatarGroup.js.map

package/lib/commonjs/ui/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MAX","AvatarGroup","children","containerStyle","size","childAmount","React","Children","count","overflow","width","height","borderRadius","backgroundColor","avatars","useMemo","map","child","index","isValidElement","cloneElement","top","getTopPoint","left","getLeftPoint","getWidthPoint","getHeightPoint","innerLeft","getInnerLeft","innerTop","getInnerTop","position","square","slice","_","total","idx"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype Props = { size?: number; containerStyle?: StyleProp<ViewStyle> };\nconst AvatarGroup: React.FC<Props> = ({ children, containerStyle, size = 56 }) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const avatars = useMemo(() => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) return React.cloneElement(child, { size, containerStyle });\n\n        const top = getTopPoint(index, childAmount) * size;\n        const left = getLeftPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerLeft = -getInnerLeft(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, left, width, height }}>\n            {React.cloneElement(child, { size, square: true, containerStyle: { left: innerLeft, top: innerTop } })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  }, [children]);\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {avatars}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return -0.025;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getLeftPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerLeft = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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"}

package/lib/commonjs/ui/Avatar/AvatarIcon.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const AvatarIcon = _ref => {
+  let {
+    size = 56,
+    icon,
+    containerStyle,
+    backgroundColor
+  } = _ref;
+  const {
+    colors,
+    palette
+  } = (0, _useUIKitTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: backgroundColor ?? palette.background300
+    }, containerStyle]
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: icon,
+    size: size / 2,
+    color: colors.onBackgroundReverse01
+  }));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = AvatarIcon;
+exports.default = _default;
+//# sourceMappingURL=AvatarIcon.js.map

package/lib/commonjs/ui/Avatar/AvatarIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AvatarIcon","size","icon","containerStyle","backgroundColor","colors","palette","useUIKitTheme","styles","container","width","height","borderRadius","background300","onBackgroundReverse01","createStyleSheet","overflow","alignItems","justifyContent"],"sources":["AvatarIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\n\ntype Props = {\n  icon: keyof typeof Icon.Assets;\n  size?: number;\n  backgroundColor?: string;\n  containerStyle?: StyleProp<ViewStyle>;\n};\nconst AvatarIcon: React.FC<Props> = ({ size = 56, icon, containerStyle, backgroundColor }) => {\n  const { colors, palette } = useUIKitTheme();\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          backgroundColor: backgroundColor ?? palette.background300,\n        },\n        containerStyle,\n      ]}\n    >\n      <Icon icon={icon} size={size / 2} color={colors.onBackgroundReverse01} />\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\nexport default AvatarIcon;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;AAQA,MAAMA,UAA2B,GAAG,QAA0D;EAAA,IAAzD;IAAEC,IAAI,GAAG,EAAT;IAAaC,IAAb;IAAmBC,cAAnB;IAAmCC;EAAnC,CAAyD;EAC5F,MAAM;IAAEC,MAAF;IAAUC;EAAV,IAAsB,IAAAC,sBAAA,GAA5B;EACA,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,SADF,EAEL;MACEC,KAAK,EAAET,IADT;MAEEU,MAAM,EAAEV,IAFV;MAGEW,YAAY,EAAEX,IAAI,GAAG,CAHvB;MAIEG,eAAe,EAAEA,eAAe,IAAIE,OAAO,CAACO;IAJ9C,CAFK,EAQLV,cARK;EADT,gBAYE,6BAAC,aAAD;IAAM,IAAI,EAAED,IAAZ;IAAkB,IAAI,EAAED,IAAI,GAAG,CAA/B;IAAkC,KAAK,EAAEI,MAAM,CAACS;EAAhD,EAZF,CADF;AAgBD,CAlBD;;AAmBA,MAAMN,MAAM,GAAG,IAAAO,yBAAA,EAAiB;EAC9BN,SAAS,EAAE;IACTO,QAAQ,EAAE,QADD;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE;EAHP;AADmB,CAAjB,CAAf;eAOelB,U"}

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _Image = _interopRequireDefault(require("../../components/Image"));
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup"));
+
+var _AvatarIcon = _interopRequireDefault(require("./AvatarIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Avatar = _ref => {
+  let {
+    uri,
+    square,
+    muted = false,
+    size = 56,
+    containerStyle
+  } = _ref;
+  const {
+    colors,
+    palette
+  } = (0, _useUIKitTheme.default)();
+  const [loadFailure, setLoadFailure] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      width: size,
+      height: size,
+      borderRadius: square ? 0 : size / 2,
+      backgroundColor: palette.background300
+    }, containerStyle]
+  }, (0, _uikitUtils.conditionChaining)([Boolean(uri) && !loadFailure], [/*#__PURE__*/_react.default.createElement(_Image.default, {
+    onError: () => setLoadFailure(true),
+    source: {
+      uri
+    },
+    resizeMode: 'cover',
+    style: _reactNative.StyleSheet.absoluteFill
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: 'user',
+    size: size / 2,
+    color: colors.onBackgroundReverse01
+  })]), muted && /*#__PURE__*/_react.default.createElement(MutedOverlay, {
+    size: size
+  }));
+};
+
+const MutedOverlay = _ref2 => {
+  let {
+    size
+  } = _ref2;
+  const {
+    palette
+  } = (0, _useUIKitTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, _reactNative.StyleSheet.absoluteFill]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, {
+      backgroundColor: palette.primary300,
+      opacity: 0.5
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    color: palette.onBackgroundDark01,
+    icon: 'mute',
+    size: size * 0.72
+  }));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  }
+});
+Avatar.Group = _AvatarGroup.default;
+Avatar.Icon = _AvatarIcon.default;
+var _default = Avatar;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Avatar","uri","square","muted","size","containerStyle","colors","palette","useUIKitTheme","loadFailure","setLoadFailure","useState","styles","container","width","height","borderRadius","backgroundColor","background300","conditionChaining","Boolean","StyleSheet","absoluteFill","onBackgroundReverse01","MutedOverlay","primary300","opacity","onBackgroundDark01","createStyleSheet","alignItems","justifyContent","overflow","Group","AvatarGroup","Icon","AvatarIcon"],"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 Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\n\ntype SubComponents = { Group: typeof AvatarGroup; Icon: typeof AvatarIcon };\ntype Props = {\n  uri?: string;\n  size?: number;\n  square?: boolean;\n  muted?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\nconst Avatar: React.FC<Props> & SubComponents = ({ uri, square, muted = false, size = 56, containerStyle }) => {\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: React.FC<{ size: number }> = ({ size }) => {\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\nAvatar.Group = AvatarGroup;\nAvatar.Icon = AvatarIcon;\nexport default Avatar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAUA,MAAMA,MAAuC,GAAG,QAA+D;EAAA,IAA9D;IAAEC,GAAF;IAAOC,MAAP;IAAeC,KAAK,GAAG,KAAvB;IAA8BC,IAAI,GAAG,EAArC;IAAyCC;EAAzC,CAA8D;EAC7G,MAAM;IAAEC,MAAF;IAAUC;EAAV,IAAsB,IAAAC,sBAAA,GAA5B;EACA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,IAAAC,eAAA,EAAS,KAAT,CAAtC;EAEA,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLC,MAAM,CAACC,SADF,EAEL;MAAEC,KAAK,EAAEV,IAAT;MAAeW,MAAM,EAAEX,IAAvB;MAA6BY,YAAY,EAAEd,MAAM,GAAG,CAAH,GAAOE,IAAI,GAAG,CAA/D;MAAkEa,eAAe,EAAEV,OAAO,CAACW;IAA3F,CAFK,EAGLb,cAHK;EADT,GAOG,IAAAc,6BAAA,EACC,CAACC,OAAO,CAACnB,GAAD,CAAP,IAAgB,CAACQ,WAAlB,CADD,EAEC,cACE,6BAAC,cAAD;IACE,OAAO,EAAE,MAAMC,cAAc,CAAC,IAAD,CAD/B;IAEE,MAAM,EAAE;MAAET;IAAF,CAFV;IAGE,UAAU,EAAE,OAHd;IAIE,KAAK,EAAEoB,uBAAA,CAAWC;EAJpB,EADF,eAOE,6BAAC,aAAD;IAAM,IAAI,EAAE,MAAZ;IAAoB,IAAI,EAAElB,IAAI,GAAG,CAAjC;IAAoC,KAAK,EAAEE,MAAM,CAACiB;EAAlD,EAPF,CAFD,CAPH,EAmBGpB,KAAK,iBAAI,6BAAC,YAAD;IAAc,IAAI,EAAEC;EAApB,EAnBZ,CADF;AAuBD,CA3BD;;AA6BA,MAAMoB,YAAwC,GAAG,SAAc;EAAA,IAAb;IAAEpB;EAAF,CAAa;EAC7D,MAAM;IAAEG;EAAF,IAAc,IAAAC,sBAAA,GAApB;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACI,MAAM,CAACC,SAAR,EAAmBQ,uBAAA,CAAWC,YAA9B;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACD,uBAAA,CAAWC,YAAZ,EAA0B;MAAEL,eAAe,EAAEV,OAAO,CAACkB,UAA3B;MAAuCC,OAAO,EAAE;IAAhD,CAA1B;EAAb,EADF,eAEE,6BAAC,aAAD;IAAM,KAAK,EAAEnB,OAAO,CAACoB,kBAArB;IAAyC,IAAI,EAAE,MAA/C;IAAuD,IAAI,EAAEvB,IAAI,GAAG;EAApE,EAFF,CADF;AAMD,CARD;;AAUA,MAAMQ,MAAM,GAAG,IAAAgB,yBAAA,EAAiB;EAC9Bf,SAAS,EAAE;IACTgB,UAAU,EAAE,QADH;IAETC,cAAc,EAAE,QAFP;IAGTC,QAAQ,EAAE;EAHD;AADmB,CAAjB,CAAf;AAQA/B,MAAM,CAACgC,KAAP,GAAeC,oBAAf;AACAjC,MAAM,CAACkC,IAAP,GAAcC,mBAAd;eACenC,M"}

package/lib/commonjs/ui/Badge/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Badge = _ref => {
+  let {
+    count,
+    maxCount,
+    badgeColor,
+    textColor,
+    style,
+    size = 'default'
+  } = _ref;
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  const isSmall = size === 'small';
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [isSmall ? styles.badgeSmall : styles.badgeDefault, {
+      backgroundColor: badgeColor ?? colors.ui.badge.default.none.background
+    }, count >= 10 && (isSmall ? styles.badgeSmallPadding : styles.badgeDefaultPadding), style]
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    caption1: true,
+    color: textColor ?? colors.ui.badge.default.none.text
+  }, (0, _uikitUtils.truncatedBadgeCount)(count, maxCount)));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  badgeDefault: {
+    paddingTop: _reactNative.Platform.select({
+      ios: 2,
+      android: 2
+    }),
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeDefaultPadding: {
+    paddingHorizontal: 8
+  },
+  badgeSmall: {
+    paddingTop: _reactNative.Platform.select({
+      ios: 3,
+      android: 2
+    }),
+    minWidth: 16,
+    minHeight: 16,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeSmallPadding: {
+    paddingHorizontal: 4
+  }
+});
+var _default = Badge;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/ui/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Badge","count","maxCount","badgeColor","textColor","style","size","colors","useUIKitTheme","isSmall","styles","badgeSmall","badgeDefault","backgroundColor","ui","badge","default","none","background","badgeSmallPadding","badgeDefaultPadding","text","truncatedBadgeCount","createStyleSheet","paddingTop","Platform","select","ios","android","minWidth","minHeight","borderRadius","alignItems","justifyContent","paddingHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, StyleProp, View, ViewStyle } from 'react-native';\n\nimport { truncatedBadgeCount } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text from '../Text';\n\ntype Props = {\n  count: number;\n  maxCount?: number;\n  badgeColor?: string;\n  textColor?: string;\n  style?: StyleProp<ViewStyle>;\n  size?: 'small' | 'default';\n};\n\nconst Badge: React.FC<Props> = ({ count, maxCount, badgeColor, textColor, style, size = 'default' }) => {\n  const { colors } = useUIKitTheme();\n  const isSmall = size === 'small';\n  return (\n    <View\n      style={[\n        isSmall ? styles.badgeSmall : styles.badgeDefault,\n        { backgroundColor: badgeColor ?? colors.ui.badge.default.none.background },\n        count >= 10 && (isSmall ? styles.badgeSmallPadding : styles.badgeDefaultPadding),\n        style,\n      ]}\n    >\n      <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>\n        {truncatedBadgeCount(count, maxCount)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  badgeDefault: {\n    paddingTop: Platform.select({ ios: 2, android: 2 }),\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeDefaultPadding: {\n    paddingHorizontal: 8,\n  },\n  badgeSmall: {\n    paddingTop: Platform.select({ ios: 3, android: 2 }),\n    minWidth: 16,\n    minHeight: 16,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeSmallPadding: {\n    paddingHorizontal: 4,\n  },\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;AAWA,MAAMA,KAAsB,GAAG,QAAyE;EAAA,IAAxE;IAAEC,KAAF;IAASC,QAAT;IAAmBC,UAAnB;IAA+BC,SAA/B;IAA0CC,KAA1C;IAAiDC,IAAI,GAAG;EAAxD,CAAwE;EACtG,MAAM;IAAEC;EAAF,IAAa,IAAAC,sBAAA,GAAnB;EACA,MAAMC,OAAO,GAAGH,IAAI,KAAK,OAAzB;EACA,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLG,OAAO,GAAGC,MAAM,CAACC,UAAV,GAAuBD,MAAM,CAACE,YADhC,EAEL;MAAEC,eAAe,EAAEV,UAAU,IAAII,MAAM,CAACO,EAAP,CAAUC,KAAV,CAAgBC,OAAhB,CAAwBC,IAAxB,CAA6BC;IAA9D,CAFK,EAGLjB,KAAK,IAAI,EAAT,KAAgBQ,OAAO,GAAGC,MAAM,CAACS,iBAAV,GAA8BT,MAAM,CAACU,mBAA5D,CAHK,EAILf,KAJK;EADT,gBAQE,6BAAC,aAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAED,SAAS,IAAIG,MAAM,CAACO,EAAP,CAAUC,KAAV,CAAgBC,OAAhB,CAAwBC,IAAxB,CAA6BI;EAAhE,GACG,IAAAC,+BAAA,EAAoBrB,KAApB,EAA2BC,QAA3B,CADH,CARF,CADF;AAcD,CAjBD;;AAmBA,MAAMQ,MAAM,GAAG,IAAAa,yBAAA,EAAiB;EAC9BX,YAAY,EAAE;IACZY,UAAU,EAAEC,qBAAA,CAASC,MAAT,CAAgB;MAAEC,GAAG,EAAE,CAAP;MAAUC,OAAO,EAAE;IAAnB,CAAhB,CADA;IAEZC,QAAQ,EAAE,EAFE;IAGZC,SAAS,EAAE,EAHC;IAIZC,YAAY,EAAE,EAJF;IAKZC,UAAU,EAAE,QALA;IAMZC,cAAc,EAAE;EANJ,CADgB;EAS9Bb,mBAAmB,EAAE;IACnBc,iBAAiB,EAAE;EADA,CATS;EAY9BvB,UAAU,EAAE;IACVa,UAAU,EAAEC,qBAAA,CAASC,MAAT,CAAgB;MAAEC,GAAG,EAAE,CAAP;MAAUC,OAAO,EAAE;IAAnB,CAAhB,CADF;IAEVC,QAAQ,EAAE,EAFA;IAGVC,SAAS,EAAE,EAHD;IAIVC,YAAY,EAAE,EAJJ;IAKVC,UAAU,EAAE,QALF;IAMVC,cAAc,EAAE;EANN,CAZkB;EAoB9Bd,iBAAiB,EAAE;IACjBe,iBAAiB,EAAE;EADF;AApBW,CAAjB,CAAf;eAyBelC,K"}

package/lib/commonjs/ui/BottomSheet/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
+
+var _DialogSheet = _interopRequireDefault(require("../Dialog/DialogSheet"));
+
+var _Modal = _interopRequireDefault(require("../Modal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const BottomSheet = _ref => {
+  let {
+    onDismiss,
+    onHide,
+    visible,
+    sheetItems
+  } = _ref;
+  const {
+    statusBarTranslucent
+  } = (0, _useHeaderStyle.default)();
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const {
+    bottom,
+    left,
+    right
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    type: 'slide',
+    onClose: onHide,
+    onDismiss: onDismiss,
+    statusBarTranslucent: statusBarTranslucent,
+    visible: visible,
+    backgroundStyle: {
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DialogSheet.default, {
+    style: {
+      width,
+      paddingBottom: bottom
+    }
+  }, sheetItems.map((_ref2, idx) => {
+    let {
+      onPress,
+      ...props
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      activeOpacity: 0.75,
+      key: props.title + idx,
+      style: {
+        paddingLeft: left,
+        paddingRight: right
+      },
+      onPress: async () => {
+        await onHide();
+
+        try {
+          onPress();
+        } catch {}
+      }
+    }, /*#__PURE__*/_react.default.createElement(_DialogSheet.default.Item, props));
+  })));
+};
+
+var _default = BottomSheet;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/ui/BottomSheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BottomSheet","onDismiss","onHide","visible","sheetItems","statusBarTranslucent","useHeaderStyle","width","useWindowDimensions","bottom","left","right","useSafeAreaInsets","alignItems","justifyContent","paddingBottom","map","idx","onPress","props","title","paddingLeft","paddingRight"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport DialogSheet from '../Dialog/DialogSheet';\nimport type Icon from '../Icon';\nimport Modal from '../Modal';\n\nexport type BottomSheetItem = {\n  sheetItems: {\n    icon?: keyof typeof Icon.Assets;\n    iconColor?: string;\n    title: string;\n    titleColor?: string;\n    onPress: () => void;\n  }[];\n};\ntype Props = {\n  visible: boolean;\n  onHide: () => Promise<void>;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & BottomSheetItem;\nconst BottomSheet: React.FC<Props> = ({ onDismiss, onHide, visible, sheetItems }) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { width } = useWindowDimensions();\n  const { bottom, left, right } = useSafeAreaInsets();\n  return (\n    <Modal\n      type={'slide'}\n      onClose={onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}\n    >\n      <DialogSheet style={{ width, paddingBottom: bottom }}>\n        {sheetItems.map(({ onPress, ...props }, idx) => (\n          <TouchableOpacity\n            activeOpacity={0.75}\n            key={props.title + idx}\n            style={{ paddingLeft: left, paddingRight: right }}\n            onPress={async () => {\n              await onHide();\n              try {\n                onPress();\n              } catch {}\n            }}\n          >\n            <DialogSheet.Item {...props} />\n          </TouchableOpacity>\n        ))}\n      </DialogSheet>\n    </Modal>\n  );\n};\n\nexport default BottomSheet;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AAEA;;;;AAiBA,MAAMA,WAA4B,GAAG,QAAgD;EAAA,IAA/C;IAAEC,SAAF;IAAaC,MAAb;IAAqBC,OAArB;IAA8BC;EAA9B,CAA+C;EACnF,MAAM;IAAEC;EAAF,IAA2B,IAAAC,uBAAA,GAAjC;EACA,MAAM;IAAEC;EAAF,IAAY,IAAAC,gCAAA,GAAlB;EACA,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC;EAAhB,IAA0B,IAAAC,6CAAA,GAAhC;EACA,oBACE,6BAAC,cAAD;IACE,IAAI,EAAE,OADR;IAEE,OAAO,EAAEV,MAFX;IAGE,SAAS,EAAED,SAHb;IAIE,oBAAoB,EAAEI,oBAJxB;IAKE,OAAO,EAAEF,OALX;IAME,eAAe,EAAE;MAAEU,UAAU,EAAE,QAAd;MAAwBC,cAAc,EAAE;IAAxC;EANnB,gBAQE,6BAAC,oBAAD;IAAa,KAAK,EAAE;MAAEP,KAAF;MAASQ,aAAa,EAAEN;IAAxB;EAApB,GACGL,UAAU,CAACY,GAAX,CAAe,QAAwBC,GAAxB;IAAA,IAAC;MAAEC,OAAF;MAAW,GAAGC;IAAd,CAAD;IAAA,oBACd,6BAAC,6BAAD;MACE,aAAa,EAAE,IADjB;MAEE,GAAG,EAAEA,KAAK,CAACC,KAAN,GAAcH,GAFrB;MAGE,KAAK,EAAE;QAAEI,WAAW,EAAEX,IAAf;QAAqBY,YAAY,EAAEX;MAAnC,CAHT;MAIE,OAAO,EAAE,YAAY;QACnB,MAAMT,MAAM,EAAZ;;QACA,IAAI;UACFgB,OAAO;QACR,CAFD,CAEE,MAAM,CAAE;MACX;IATH,gBAWE,6BAAC,oBAAD,CAAa,IAAb,EAAsBC,KAAtB,CAXF,CADc;EAAA,CAAf,CADH,CARF,CADF;AA4BD,CAhCD;;eAkCenB,W"}