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

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

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+const MAX = 4;
+
+const AvatarGroup = _ref => {
+  let {
+    children,
+    containerStyle,
+    size = 56
+  } = _ref;
+  const childAmount = React.Children.count(children);
+
+  if (childAmount === 0) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [containerStyle, {
+        overflow: 'hidden',
+        width: size,
+        height: size,
+        borderRadius: size,
+        backgroundColor: 'rgba(120,120,120,0.2)'
+      }]
+    });
+  }
+
+  const avatars = useMemo(() => {
+    var _React$Children$map;
+
+    return ((_React$Children$map = React.Children.map(children, (child, index) => {
+      if (index + 1 > MAX) return child;
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      if (childAmount === 1) return /*#__PURE__*/React.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.createElement(View, {
+        style: {
+          overflow: 'hidden',
+          position: 'absolute',
+          top,
+          left,
+          width,
+          height
+        }
+      }, /*#__PURE__*/React.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.createElement(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;
+};
+
+export default AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","MAX","AvatarGroup","children","containerStyle","size","childAmount","Children","count","overflow","width","height","borderRadius","backgroundColor","avatars","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/module/ui/Avatar/AvatarIcon.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+
+const AvatarIcon = _ref => {
+  let {
+    size = 56,
+    icon,
+    containerStyle,
+    backgroundColor
+  } = _ref;
+  const {
+    colors,
+    palette
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: backgroundColor ?? palette.background300
+    }, containerStyle]
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: size / 2,
+    color: colors.onBackgroundReverse01
+  }));
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default AvatarIcon;
+//# sourceMappingURL=AvatarIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","Icon","AvatarIcon","size","icon","containerStyle","backgroundColor","colors","palette","styles","container","width","height","borderRadius","background300","onBackgroundReverse01","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,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAQA,MAAMC,UAA2B,GAAG,QAA0D;EAAA,IAAzD;IAAEC,IAAI,GAAG,EAAT;IAAaC,IAAb;IAAmBC,cAAnB;IAAmCC;EAAnC,CAAyD;EAC5F,MAAM;IAAEC,MAAF;IAAUC;EAAV,IAAsBR,aAAa,EAAzC;EACA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLS,MAAM,CAACC,SADF,EAEL;MACEC,KAAK,EAAER,IADT;MAEES,MAAM,EAAET,IAFV;MAGEU,YAAY,EAAEV,IAAI,GAAG,CAHvB;MAIEG,eAAe,EAAEA,eAAe,IAAIE,OAAO,CAACM;IAJ9C,CAFK,EAQLT,cARK;EADT,gBAYE,oBAAC,IAAD;IAAM,IAAI,EAAED,IAAZ;IAAkB,IAAI,EAAED,IAAI,GAAG,CAA/B;IAAkC,KAAK,EAAEI,MAAM,CAACQ;EAAhD,EAZF,CADF;AAgBD,CAlBD;;AAmBA,MAAMN,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,SAAS,EAAE;IACTM,QAAQ,EAAE,QADD;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE;EAHP;AADmB,CAAD,CAA/B;AAOA,eAAehB,UAAf"}

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

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { conditionChaining } from '@sendbird/uikit-utils';
+import Image from '../../components/Image';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import AvatarGroup from './AvatarGroup';
+import AvatarIcon from './AvatarIcon';
+
+const Avatar = _ref => {
+  let {
+    uri,
+    square,
+    muted = false,
+    size = 56,
+    containerStyle
+  } = _ref;
+  const {
+    colors,
+    palette
+  } = useUIKitTheme();
+  const [loadFailure, setLoadFailure] = useState(false);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      width: size,
+      height: size,
+      borderRadius: square ? 0 : size / 2,
+      backgroundColor: palette.background300
+    }, containerStyle]
+  }, conditionChaining([Boolean(uri) && !loadFailure], [/*#__PURE__*/React.createElement(Image, {
+    onError: () => setLoadFailure(true),
+    source: {
+      uri
+    },
+    resizeMode: 'cover',
+    style: StyleSheet.absoluteFill
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: 'user',
+    size: size / 2,
+    color: colors.onBackgroundReverse01
+  })]), muted && /*#__PURE__*/React.createElement(MutedOverlay, {
+    size: size
+  }));
+};
+
+const MutedOverlay = _ref2 => {
+  let {
+    size
+  } = _ref2;
+  const {
+    palette
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, StyleSheet.absoluteFill]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [StyleSheet.absoluteFill, {
+      backgroundColor: palette.primary300,
+      opacity: 0.5
+    }]
+  }), /*#__PURE__*/React.createElement(Icon, {
+    color: palette.onBackgroundDark01,
+    icon: 'mute',
+    size: size * 0.72
+  }));
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden'
+  }
+});
+Avatar.Group = AvatarGroup;
+Avatar.Icon = AvatarIcon;
+export default Avatar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","StyleSheet","View","conditionChaining","Image","createStyleSheet","useUIKitTheme","Icon","AvatarGroup","AvatarIcon","Avatar","uri","square","muted","size","containerStyle","colors","palette","loadFailure","setLoadFailure","styles","container","width","height","borderRadius","backgroundColor","background300","Boolean","absoluteFill","onBackgroundReverse01","MutedOverlay","primary300","opacity","onBackgroundDark01","alignItems","justifyContent","overflow","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 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,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAAoBC,UAApB,EAAgCC,IAAhC,QAAuD,cAAvD;AAEA,SAASC,iBAAT,QAAkC,uBAAlC;AAEA,OAAOC,KAAP,MAAkB,wBAAlB;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,UAAP,MAAuB,cAAvB;;AAUA,MAAMC,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,IAAsBX,aAAa,EAAzC;EACA,MAAM,CAACY,WAAD,EAAcC,cAAd,IAAgCnB,QAAQ,CAAC,KAAD,CAA9C;EAEA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLoB,MAAM,CAACC,SADF,EAEL;MAAEC,KAAK,EAAER,IAAT;MAAeS,MAAM,EAAET,IAAvB;MAA6BU,YAAY,EAAEZ,MAAM,GAAG,CAAH,GAAOE,IAAI,GAAG,CAA/D;MAAkEW,eAAe,EAAER,OAAO,CAACS;IAA3F,CAFK,EAGLX,cAHK;EADT,GAOGZ,iBAAiB,CAChB,CAACwB,OAAO,CAAChB,GAAD,CAAP,IAAgB,CAACO,WAAlB,CADgB,EAEhB,cACE,oBAAC,KAAD;IACE,OAAO,EAAE,MAAMC,cAAc,CAAC,IAAD,CAD/B;IAEE,MAAM,EAAE;MAAER;IAAF,CAFV;IAGE,UAAU,EAAE,OAHd;IAIE,KAAK,EAAEV,UAAU,CAAC2B;EAJpB,EADF,eAOE,oBAAC,IAAD;IAAM,IAAI,EAAE,MAAZ;IAAoB,IAAI,EAAEd,IAAI,GAAG,CAAjC;IAAoC,KAAK,EAAEE,MAAM,CAACa;EAAlD,EAPF,CAFgB,CAPpB,EAmBGhB,KAAK,iBAAI,oBAAC,YAAD;IAAc,IAAI,EAAEC;EAApB,EAnBZ,CADF;AAuBD,CA3BD;;AA6BA,MAAMgB,YAAwC,GAAG,SAAc;EAAA,IAAb;IAAEhB;EAAF,CAAa;EAC7D,MAAM;IAAEG;EAAF,IAAcX,aAAa,EAAjC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACc,MAAM,CAACC,SAAR,EAAmBpB,UAAU,CAAC2B,YAA9B;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAAC3B,UAAU,CAAC2B,YAAZ,EAA0B;MAAEH,eAAe,EAAER,OAAO,CAACc,UAA3B;MAAuCC,OAAO,EAAE;IAAhD,CAA1B;EAAb,EADF,eAEE,oBAAC,IAAD;IAAM,KAAK,EAAEf,OAAO,CAACgB,kBAArB;IAAyC,IAAI,EAAE,MAA/C;IAAuD,IAAI,EAAEnB,IAAI,GAAG;EAApE,EAFF,CADF;AAMD,CARD;;AAUA,MAAMM,MAAM,GAAGf,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTa,UAAU,EAAE,QADH;IAETC,cAAc,EAAE,QAFP;IAGTC,QAAQ,EAAE;EAHD;AADmB,CAAD,CAA/B;AAQA1B,MAAM,CAAC2B,KAAP,GAAe7B,WAAf;AACAE,MAAM,CAACH,IAAP,GAAcE,UAAd;AACA,eAAeC,MAAf"}

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Platform, View } from 'react-native';
+import { truncatedBadgeCount } from '@sendbird/uikit-utils';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Text from '../Text';
+
+const Badge = _ref => {
+  let {
+    count,
+    maxCount,
+    badgeColor,
+    textColor,
+    style,
+    size = 'default'
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const isSmall = size === 'small';
+  return /*#__PURE__*/React.createElement(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.createElement(Text, {
+    caption1: true,
+    color: textColor ?? colors.ui.badge.default.none.text
+  }, truncatedBadgeCount(count, maxCount)));
+};
+
+const styles = createStyleSheet({
+  badgeDefault: {
+    paddingTop: Platform.select({
+      ios: 2,
+      android: 2
+    }),
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeDefaultPadding: {
+    paddingHorizontal: 8
+  },
+  badgeSmall: {
+    paddingTop: Platform.select({
+      ios: 3,
+      android: 2
+    }),
+    minWidth: 16,
+    minHeight: 16,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeSmallPadding: {
+    paddingHorizontal: 4
+  }
+});
+export default Badge;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","View","truncatedBadgeCount","createStyleSheet","useUIKitTheme","Text","Badge","count","maxCount","badgeColor","textColor","style","size","colors","isSmall","styles","badgeSmall","badgeDefault","backgroundColor","ui","badge","default","none","background","badgeSmallPadding","badgeDefaultPadding","text","paddingTop","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,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAA8BC,IAA9B,QAAqD,cAArD;AAEA,SAASC,mBAAT,QAAoC,uBAApC;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAWA,MAAMC,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,IAAaT,aAAa,EAAhC;EACA,MAAMU,OAAO,GAAGF,IAAI,KAAK,OAAzB;EACA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLE,OAAO,GAAGC,MAAM,CAACC,UAAV,GAAuBD,MAAM,CAACE,YADhC,EAEL;MAAEC,eAAe,EAAET,UAAU,IAAII,MAAM,CAACM,EAAP,CAAUC,KAAV,CAAgBC,OAAhB,CAAwBC,IAAxB,CAA6BC;IAA9D,CAFK,EAGLhB,KAAK,IAAI,EAAT,KAAgBO,OAAO,GAAGC,MAAM,CAACS,iBAAV,GAA8BT,MAAM,CAACU,mBAA5D,CAHK,EAILd,KAJK;EADT,gBAQE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAED,SAAS,IAAIG,MAAM,CAACM,EAAP,CAAUC,KAAV,CAAgBC,OAAhB,CAAwBC,IAAxB,CAA6BI;EAAhE,GACGxB,mBAAmB,CAACK,KAAD,EAAQC,QAAR,CADtB,CARF,CADF;AAcD,CAjBD;;AAmBA,MAAMO,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Bc,YAAY,EAAE;IACZU,UAAU,EAAE3B,QAAQ,CAAC4B,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;EAS9BV,mBAAmB,EAAE;IACnBW,iBAAiB,EAAE;EADA,CATS;EAY9BpB,UAAU,EAAE;IACVW,UAAU,EAAE3B,QAAQ,CAAC4B,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;EAoB9BX,iBAAiB,EAAE;IACjBY,iBAAiB,EAAE;EADF;AApBW,CAAD,CAA/B;AAyBA,eAAe9B,KAAf"}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { TouchableOpacity, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useHeaderStyle from '../../styles/useHeaderStyle';
+import DialogSheet from '../Dialog/DialogSheet';
+import Modal from '../Modal';
+
+const BottomSheet = _ref => {
+  let {
+    onDismiss,
+    onHide,
+    visible,
+    sheetItems
+  } = _ref;
+  const {
+    statusBarTranslucent
+  } = useHeaderStyle();
+  const {
+    width
+  } = useWindowDimensions();
+  const {
+    bottom,
+    left,
+    right
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/React.createElement(Modal, {
+    type: 'slide',
+    onClose: onHide,
+    onDismiss: onDismiss,
+    statusBarTranslucent: statusBarTranslucent,
+    visible: visible,
+    backgroundStyle: {
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/React.createElement(DialogSheet, {
+    style: {
+      width,
+      paddingBottom: bottom
+    }
+  }, sheetItems.map((_ref2, idx) => {
+    let {
+      onPress,
+      ...props
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      activeOpacity: 0.75,
+      key: props.title + idx,
+      style: {
+        paddingLeft: left,
+        paddingRight: right
+      },
+      onPress: async () => {
+        await onHide();
+
+        try {
+          onPress();
+        } catch {}
+      }
+    }, /*#__PURE__*/React.createElement(DialogSheet.Item, props));
+  })));
+};
+
+export default BottomSheet;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","TouchableOpacity","useWindowDimensions","useSafeAreaInsets","useHeaderStyle","DialogSheet","Modal","BottomSheet","onDismiss","onHide","visible","sheetItems","statusBarTranslucent","width","bottom","left","right","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,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,EAA2BC,mBAA3B,QAAsD,cAAtD;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,WAAP,MAAwB,uBAAxB;AAEA,OAAOC,KAAP,MAAkB,UAAlB;;AAiBA,MAAMC,WAA4B,GAAG,QAAgD;EAAA,IAA/C;IAAEC,SAAF;IAAaC,MAAb;IAAqBC,OAArB;IAA8BC;EAA9B,CAA+C;EACnF,MAAM;IAAEC;EAAF,IAA2BR,cAAc,EAA/C;EACA,MAAM;IAAES;EAAF,IAAYX,mBAAmB,EAArC;EACA,MAAM;IAAEY,MAAF;IAAUC,IAAV;IAAgBC;EAAhB,IAA0Bb,iBAAiB,EAAjD;EACA,oBACE,oBAAC,KAAD;IACE,IAAI,EAAE,OADR;IAEE,OAAO,EAAEM,MAFX;IAGE,SAAS,EAAED,SAHb;IAIE,oBAAoB,EAAEI,oBAJxB;IAKE,OAAO,EAAEF,OALX;IAME,eAAe,EAAE;MAAEO,UAAU,EAAE,QAAd;MAAwBC,cAAc,EAAE;IAAxC;EANnB,gBAQE,oBAAC,WAAD;IAAa,KAAK,EAAE;MAAEL,KAAF;MAASM,aAAa,EAAEL;IAAxB;EAApB,GACGH,UAAU,CAACS,GAAX,CAAe,QAAwBC,GAAxB;IAAA,IAAC;MAAEC,OAAF;MAAW,GAAGC;IAAd,CAAD;IAAA,oBACd,oBAAC,gBAAD;MACE,aAAa,EAAE,IADjB;MAEE,GAAG,EAAEA,KAAK,CAACC,KAAN,GAAcH,GAFrB;MAGE,KAAK,EAAE;QAAEI,WAAW,EAAEV,IAAf;QAAqBW,YAAY,EAAEV;MAAnC,CAHT;MAIE,OAAO,EAAE,YAAY;QACnB,MAAMP,MAAM,EAAZ;;QACA,IAAI;UACFa,OAAO;QACR,CAFD,CAEE,MAAM,CAAE;MACX;IATH,gBAWE,oBAAC,WAAD,CAAa,IAAb,EAAsBC,KAAtB,CAXF,CADc;EAAA,CAAf,CADH,CARF,CADF;AA4BD,CAhCD;;AAkCA,eAAehB,WAAf"}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import Text from '../Text';
+
+const Button = _ref => {
+  let {
+    icon,
+    variant = 'contained',
+    buttonColor,
+    contentColor,
+    disabled,
+    onPress,
+    style,
+    children
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+
+  const getStateColor = (pressed, disabled) => {
+    const stateColors = colors.ui.button[variant];
+    if (disabled) return stateColors.disabled;
+    if (pressed) return stateColors.pressed;
+    return stateColors.enabled;
+  };
+
+  return /*#__PURE__*/React.createElement(Pressable, {
+    disabled: disabled,
+    onPress: onPress,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      const stateColor = getStateColor(pressed, disabled);
+      return [{
+        backgroundColor: buttonColor ?? stateColor.background
+      }, styles.container, style];
+    }
+  }, _ref3 => {
+    let {
+      pressed
+    } = _ref3;
+    const stateColor = getStateColor(pressed, disabled);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
+      size: 24,
+      icon: icon,
+      color: contentColor ?? stateColor.content,
+      containerStyle: styles.icon
+    }), /*#__PURE__*/React.createElement(Text, {
+      button: true,
+      color: contentColor ?? stateColor.content,
+      style: styles.text
+    }, children));
+  });
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'row',
+    padding: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    marginVertical: -4,
+    marginRight: 8
+  },
+  text: {}
+});
+export default Button;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","createStyleSheet","useUIKitTheme","Icon","Text","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","getStateColor","pressed","stateColors","ui","button","enabled","stateColor","backgroundColor","background","styles","container","content","text","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginRight"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n  icon?: keyof typeof Icon.Assets;\n  variant?: 'contained' | 'text';\n  disabled?: boolean;\n  onPress?: () => void;\n  buttonColor?: string;\n  contentColor?: string;\n};\nconst Button: React.FC<Props> = ({\n  icon,\n  variant = 'contained',\n  buttonColor,\n  contentColor,\n  disabled,\n  onPress,\n  style,\n  children,\n}) => {\n  const { colors } = useUIKitTheme();\n\n  const getStateColor = (pressed: boolean, disabled?: boolean) => {\n    const stateColors = colors.ui.button[variant];\n    if (disabled) return stateColors.disabled;\n    if (pressed) return stateColors.pressed;\n    return stateColors.enabled;\n  };\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={onPress}\n      style={({ pressed }) => {\n        const stateColor = getStateColor(pressed, disabled);\n        return [{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style];\n      }}\n    >\n      {({ pressed }) => {\n        const stateColor = getStateColor(pressed, disabled);\n\n        return (\n          <>\n            {icon && (\n              <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />\n            )}\n            <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n              {children}\n            </Text>\n          </>\n        );\n      }}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    padding: 8,\n    borderRadius: 4,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: { marginVertical: -4, marginRight: 8 },\n  text: {},\n});\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,QAAgD,cAAhD;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAWA,MAAMC,MAAuB,GAAG,QAS1B;EAAA,IAT2B;IAC/BC,IAD+B;IAE/BC,OAAO,GAAG,WAFqB;IAG/BC,WAH+B;IAI/BC,YAJ+B;IAK/BC,QAL+B;IAM/BC,OAN+B;IAO/BC,KAP+B;IAQ/BC;EAR+B,CAS3B;EACJ,MAAM;IAAEC;EAAF,IAAaZ,aAAa,EAAhC;;EAEA,MAAMa,aAAa,GAAG,CAACC,OAAD,EAAmBN,QAAnB,KAA0C;IAC9D,MAAMO,WAAW,GAAGH,MAAM,CAACI,EAAP,CAAUC,MAAV,CAAiBZ,OAAjB,CAApB;IACA,IAAIG,QAAJ,EAAc,OAAOO,WAAW,CAACP,QAAnB;IACd,IAAIM,OAAJ,EAAa,OAAOC,WAAW,CAACD,OAAnB;IACb,OAAOC,WAAW,CAACG,OAAnB;EACD,CALD;;EAOA,oBACE,oBAAC,SAAD;IACE,QAAQ,EAAEV,QADZ;IAEE,OAAO,EAAEC,OAFX;IAGE,KAAK,EAAE,SAAiB;MAAA,IAAhB;QAAEK;MAAF,CAAgB;MACtB,MAAMK,UAAU,GAAGN,aAAa,CAACC,OAAD,EAAUN,QAAV,CAAhC;MACA,OAAO,CAAC;QAAEY,eAAe,EAAEd,WAAW,IAAIa,UAAU,CAACE;MAA7C,CAAD,EAA4DC,MAAM,CAACC,SAAnE,EAA8Eb,KAA9E,CAAP;IACD;EANH,GAQG,SAAiB;IAAA,IAAhB;MAAEI;IAAF,CAAgB;IAChB,MAAMK,UAAU,GAAGN,aAAa,CAACC,OAAD,EAAUN,QAAV,CAAhC;IAEA,oBACE,0CACGJ,IAAI,iBACH,oBAAC,IAAD;MAAM,IAAI,EAAE,EAAZ;MAAgB,IAAI,EAAEA,IAAtB;MAA4B,KAAK,EAAEG,YAAY,IAAIY,UAAU,CAACK,OAA9D;MAAuE,cAAc,EAAEF,MAAM,CAAClB;IAA9F,EAFJ,eAIE,oBAAC,IAAD;MAAM,MAAM,MAAZ;MAAa,KAAK,EAAEG,YAAY,IAAIY,UAAU,CAACK,OAA/C;MAAwD,KAAK,EAAEF,MAAM,CAACG;IAAtE,GACGd,QADH,CAJF,CADF;EAUD,CArBH,CADF;AAyBD,CA5CD;;AA8CA,MAAMW,MAAM,GAAGvB,gBAAgB,CAAC;EAC9BwB,SAAS,EAAE;IACTG,aAAa,EAAE,KADN;IAETC,OAAO,EAAE,CAFA;IAGTC,YAAY,EAAE,CAHL;IAITC,UAAU,EAAE,QAJH;IAKTC,cAAc,EAAE;EALP,CADmB;EAQ9B1B,IAAI,EAAE;IAAE2B,cAAc,EAAE,CAAC,CAAnB;IAAsBC,WAAW,EAAE;EAAnC,CARwB;EAS9BP,IAAI,EAAE;AATwB,CAAD,CAA/B;AAYA,eAAetB,MAAf"}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Text from '../Text';
+
+const ChannelFrozenBanner = _ref => {
+  let {
+    text = 'Channel is frozen',
+    backgroundColor,
+    textColor,
+    style
+  } = _ref;
+  const {
+    palette
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    pointerEvents: 'none',
+    style: [styles.container, {
+      backgroundColor: backgroundColor ?? palette.information
+    }, style]
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption2: true,
+    color: textColor ?? palette.onBackgroundLight01
+  }, text));
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    borderRadius: 4
+  }
+});
+export default ChannelFrozenBanner;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","Text","ChannelFrozenBanner","text","backgroundColor","textColor","style","palette","styles","container","information","onBackgroundLight01","alignItems","justifyContent","paddingVertical","borderRadius"],"sources":["index.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 Text from '../Text';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n};\n\nconst ChannelFrozenBanner: React.FC<Props> = ({ text = 'Channel is frozen', backgroundColor, textColor, style }) => {\n  const { palette } = useUIKitTheme();\n\n  return (\n    <View\n      pointerEvents={'none'}\n      style={[styles.container, { backgroundColor: backgroundColor ?? palette.information }, style]}\n    >\n      <Text caption2 color={textColor ?? palette.onBackgroundLight01}>\n        {text}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingVertical: 6,\n    borderRadius: 4,\n  },\n});\n\nexport default ChannelFrozenBanner;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AASA,MAAMC,mBAAoC,GAAG,QAAuE;EAAA,IAAtE;IAAEC,IAAI,GAAG,mBAAT;IAA8BC,eAA9B;IAA+CC,SAA/C;IAA0DC;EAA1D,CAAsE;EAClH,MAAM;IAAEC;EAAF,IAAcP,aAAa,EAAjC;EAEA,oBACE,oBAAC,IAAD;IACE,aAAa,EAAE,MADjB;IAEE,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAR,EAAmB;MAAEL,eAAe,EAAEA,eAAe,IAAIG,OAAO,CAACG;IAA9C,CAAnB,EAAgFJ,KAAhF;EAFT,gBAIE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAED,SAAS,IAAIE,OAAO,CAACI;EAA3C,GACGR,IADH,CAJF,CADF;AAUD,CAbD;;AAeA,MAAMK,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,SAAS,EAAE;IACTG,UAAU,EAAE,QADH;IAETC,cAAc,EAAE,QAFP;IAGTC,eAAe,EAAE,CAHR;IAITC,YAAY,EAAE;EAJL;AADmB,CAAD,CAA/B;AASA,eAAeb,mBAAf"}

package/lib/module/ui/Dialog/DialogBox.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const DialogBox = _ref => {
+  let {
+    style,
+    children
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.ui.dialog.default.none.background
+    }, style]
+  }, children);
+};
+
+const styles = createStyleSheet({
+  container: {
+    width: 280,
+    borderRadius: 4
+  }
+});
+export default DialogBox;
+//# sourceMappingURL=DialogBox.js.map

package/lib/module/ui/Dialog/DialogBox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","DialogBox","style","children","colors","styles","container","backgroundColor","ui","dialog","default","none","background","width","borderRadius"],"sources":["DialogBox.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n};\nconst DialogBox: React.FC<Props> = ({ style, children }) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 280,\n    borderRadius: 4,\n  },\n});\n\nexport default DialogBox;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;;AAKA,MAAMC,SAA0B,GAAG,QAAyB;EAAA,IAAxB;IAAEC,KAAF;IAASC;EAAT,CAAwB;EAC1D,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACK,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEH,MAAM,CAACI,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BC;IAAjD,CAAnB,EAAkFV,KAAlF;EAAb,GACGC,QADH,CADF;AAKD,CAPD;;AASA,MAAME,MAAM,GAAGN,gBAAgB,CAAC;EAC9BO,SAAS,EAAE;IACTO,KAAK,EAAE,GADE;IAETC,YAAY,EAAE;EAFL;AADmB,CAAD,CAA/B;AAOA,eAAeb,SAAf"}

package/lib/module/ui/Dialog/DialogSheet.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Icon from '../Icon';
+import Text from '../Text';
+
+const DialogSheet = _ref => {
+  let {
+    style,
+    children
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.ui.dialog.default.none.background
+    }, style]
+  }, children);
+};
+
+const SheetItem = _ref2 => {
+  let {
+    icon,
+    title,
+    iconColor,
+    titleColor
+  } = _ref2;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.sheetItemContainer, {
+      backgroundColor: colors.ui.dialog.default.none.background
+    }]
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    color: iconColor ?? colors.ui.dialog.default.none.highlight,
+    containerStyle: styles.sheetItemIcon
+  }), /*#__PURE__*/React.createElement(Text, {
+    subtitle1: true,
+    numberOfLines: 1,
+    color: titleColor ?? colors.ui.dialog.default.none.text,
+    style: styles.sheetItemText
+  }, title));
+};
+
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    flexDirection: 'column',
+    width: '100%',
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8
+  },
+  sheetItemContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 48
+  },
+  sheetItemIcon: {
+    marginLeft: 16
+  },
+  sheetItemText: {
+    marginHorizontal: 24
+  }
+});
+DialogSheet.Item = SheetItem;
+export default DialogSheet;
+//# sourceMappingURL=DialogSheet.js.map

package/lib/module/ui/Dialog/DialogSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","createStyleSheet","useUIKitTheme","Icon","Text","DialogSheet","style","children","colors","styles","container","backgroundColor","ui","dialog","default","none","background","SheetItem","icon","title","iconColor","titleColor","sheetItemContainer","highlight","sheetItemIcon","text","sheetItemText","overflow","flexDirection","width","borderTopLeftRadius","borderTopRightRadius","alignItems","height","marginLeft","marginHorizontal","Item"],"sources":["DialogSheet.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';\nimport Text from '../Text';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n};\nconst DialogSheet: React.FC<Props> & { Item: typeof SheetItem } = ({ style, children }) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <View style={[styles.container, { backgroundColor: colors.ui.dialog.default.none.background }, style]}>\n      {children}\n    </View>\n  );\n};\n\nexport type SheetItemProps = {\n  icon?: keyof typeof Icon.Assets;\n  iconColor?: string;\n  title: string;\n  titleColor?: string;\n};\nconst SheetItem: React.FC<SheetItemProps> = ({ icon, title, iconColor, titleColor }) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <View style={[styles.sheetItemContainer, { backgroundColor: colors.ui.dialog.default.none.background }]}>\n      {icon && (\n        <Icon\n          icon={icon}\n          color={iconColor ?? colors.ui.dialog.default.none.highlight}\n          containerStyle={styles.sheetItemIcon}\n        />\n      )}\n      <Text\n        subtitle1\n        numberOfLines={1}\n        color={titleColor ?? colors.ui.dialog.default.none.text}\n        style={styles.sheetItemText}\n      >\n        {title}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    flexDirection: 'column',\n    width: '100%',\n    borderTopLeftRadius: 8,\n    borderTopRightRadius: 8,\n  },\n  sheetItemContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    height: 48,\n  },\n  sheetItemIcon: {\n    marginLeft: 16,\n  },\n  sheetItemText: {\n    marginHorizontal: 24,\n  },\n});\n\nDialogSheet.Item = SheetItem;\nexport default DialogSheet;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAKA,MAAMC,WAAyD,GAAG,QAAyB;EAAA,IAAxB;IAAEC,KAAF;IAASC;EAAT,CAAwB;EACzF,MAAM;IAAEC;EAAF,IAAaN,aAAa,EAAhC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACO,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEH,MAAM,CAACI,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BC;IAAjD,CAAnB,EAAkFV,KAAlF;EAAb,GACGC,QADH,CADF;AAKD,CAPD;;AAeA,MAAMU,SAAmC,GAAG,SAA4C;EAAA,IAA3C;IAAEC,IAAF;IAAQC,KAAR;IAAeC,SAAf;IAA0BC;EAA1B,CAA2C;EACtF,MAAM;IAAEb;EAAF,IAAaN,aAAa,EAAhC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACO,MAAM,CAACa,kBAAR,EAA4B;MAAEX,eAAe,EAAEH,MAAM,CAACI,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BC;IAAjD,CAA5B;EAAb,GACGE,IAAI,iBACH,oBAAC,IAAD;IACE,IAAI,EAAEA,IADR;IAEE,KAAK,EAAEE,SAAS,IAAIZ,MAAM,CAACI,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BQ,SAFpD;IAGE,cAAc,EAAEd,MAAM,CAACe;EAHzB,EAFJ,eAQE,oBAAC,IAAD;IACE,SAAS,MADX;IAEE,aAAa,EAAE,CAFjB;IAGE,KAAK,EAAEH,UAAU,IAAIb,MAAM,CAACI,EAAP,CAAUC,MAAV,CAAiBC,OAAjB,CAAyBC,IAAzB,CAA8BU,IAHrD;IAIE,KAAK,EAAEhB,MAAM,CAACiB;EAJhB,GAMGP,KANH,CARF,CADF;AAmBD,CArBD;;AAuBA,MAAMV,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,SAAS,EAAE;IACTiB,QAAQ,EAAE,QADD;IAETC,aAAa,EAAE,QAFN;IAGTC,KAAK,EAAE,MAHE;IAITC,mBAAmB,EAAE,CAJZ;IAKTC,oBAAoB,EAAE;EALb,CADmB;EAQ9BT,kBAAkB,EAAE;IAClBM,aAAa,EAAE,KADG;IAElBI,UAAU,EAAE,QAFM;IAGlBC,MAAM,EAAE;EAHU,CARU;EAa9BT,aAAa,EAAE;IACbU,UAAU,EAAE;EADC,CAbe;EAgB9BR,aAAa,EAAE;IACbS,gBAAgB,EAAE;EADL;AAhBe,CAAD,CAA/B;AAqBA9B,WAAW,CAAC+B,IAAZ,GAAmBnB,SAAnB;AACA,eAAeZ,WAAf"}