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

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

@@ -0,0 +1,210 @@
+"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 _Image = _interopRequireDefault(require("../../components/Image"));
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Badge = _interopRequireDefault(require("../Badge"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const GroupChannelPreview = _ref => {
+  let {
+    customCover,
+    coverUrl,
+    memberCount,
+    badgeCount,
+    maxBadgeCount,
+    body,
+    bodyIcon,
+    title,
+    titleCaption,
+    frozen,
+    notificationOff
+  } = _ref;
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  const color = colors.ui.groupChannelPreview;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: color.default.none.background
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.coverContainer
+  }, (0, _uikitUtils.conditionChaining)([Boolean(customCover)], [customCover, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    resizeMode: 'cover',
+    style: [styles.channelCover, {
+      backgroundColor: color.default.none.coverBackground
+    }],
+    source: {
+      uri: coverUrl
+    }
+  })])), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.rightSection
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.rightTopSection
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.channelInfo
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    numberOfLines: 1,
+    subtitle1: true,
+    style: styles.channelInfoTitle,
+    color: color.default.none.textTitle
+  }, title), Boolean(memberCount) && /*#__PURE__*/_react.default.createElement(_Text.default, {
+    caption1: true,
+    style: styles.channelInfoMemberCount,
+    color: color.default.none.memberCount
+  }, memberCount), frozen && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    size: 16,
+    icon: 'freeze',
+    color: colors.primary,
+    containerStyle: styles.channelInfoFrozen
+  }), notificationOff && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    size: 16,
+    icon: 'notifications-off-filled',
+    color: colors.onBackground03
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.titleCaption
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    caption2: true,
+    color: color.default.none.textTitleCaption
+  }, titleCaption))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.rightBottomSection
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.body, bodyIcon && {
+      alignItems: 'center'
+    }]
+  }, bodyIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    size: 18,
+    icon: bodyIcon,
+    color: color.default.none.bodyIcon,
+    containerStyle: [styles.bodyIcon, {
+      backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    body3: true,
+    numberOfLines: 1,
+    style: styles.bodyText,
+    color: color.default.none.textBody
+  }, body)), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, badgeCount > 0 && /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    count: badgeCount,
+    maxCount: maxBadgeCount
+  })))), /*#__PURE__*/_react.default.createElement(Separator, {
+    color: color.default.none.separator
+  }));
+};
+
+const Separator = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.separator, {
+      backgroundColor: color
+    }]
+  });
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    alignItems: 'center'
+  },
+  coverContainer: {
+    marginRight: 16
+  },
+  channelCover: {
+    width: 56,
+    height: 56,
+    borderRadius: 28
+  },
+  rightSection: {
+    flex: 1
+  },
+  rightTopSection: {
+    flexDirection: 'row',
+    marginBottom: 4
+  },
+  channelInfo: {
+    flex: 1,
+    marginRight: 4,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  channelInfoTitle: {
+    flexShrink: 1,
+    marginRight: 4
+  },
+  channelInfoMemberCount: {
+    paddingTop: 2,
+    marginRight: 4
+  },
+  channelInfoFrozen: {
+    marginRight: 4
+  },
+  titleCaption: {
+    marginLeft: 4,
+    paddingTop: 2
+  },
+  rightBottomSection: {
+    flex: 1,
+    height: '100%',
+    flexDirection: 'row'
+  },
+  body: {
+    marginRight: 4,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    flexDirection: 'row'
+  },
+  bodyText: {
+    flex: 1
+  },
+  bodyIcon: {
+    borderRadius: 8,
+    width: 26,
+    height: 26,
+    marginRight: 4
+  },
+  unreadBadge: {
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 99,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  separator: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    height: 1,
+    width: '84.5%'
+  }
+});
+
+var _default = /*#__PURE__*/_react.default.memo(GroupChannelPreview);
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["GroupChannelPreview","customCover","coverUrl","memberCount","badgeCount","maxBadgeCount","body","bodyIcon","title","titleCaption","frozen","notificationOff","colors","useUIKitTheme","color","ui","groupChannelPreview","styles","container","backgroundColor","default","none","background","coverContainer","conditionChaining","Boolean","channelCover","coverBackground","uri","rightSection","rightTopSection","channelInfo","channelInfoTitle","textTitle","channelInfoMemberCount","primary","channelInfoFrozen","onBackground03","textTitleCaption","rightBottomSection","alignItems","bodyIconBackground","bodyText","textBody","separator","Separator","createStyleSheet","width","flexDirection","paddingHorizontal","paddingVertical","marginRight","height","borderRadius","flex","marginBottom","flexShrink","paddingTop","marginLeft","justifyContent","unreadBadge","minWidth","minHeight","position","right","bottom","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } 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 Badge from '../Badge';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n\n  title: string;\n  titleCaption: string;\n  bodyIcon?: keyof typeof Icon.Assets;\n  body: string;\n\n  memberCount?: number;\n  badgeCount: number;\n  maxBadgeCount?: number;\n\n  frozen?: boolean;\n  notificationOff?: boolean;\n};\n\nconst GroupChannelPreview: React.FC<Props> = ({\n  customCover,\n  coverUrl,\n  memberCount,\n  badgeCount,\n  maxBadgeCount,\n  body,\n  bodyIcon,\n  title,\n  titleCaption,\n  frozen,\n  notificationOff,\n}) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelPreview;\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.default.none.background }]}>\n      <View style={styles.coverContainer}>\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.default.none.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </View>\n      <View style={styles.rightSection}>\n        <View style={styles.rightTopSection}>\n          <View style={styles.channelInfo}>\n            <Text numberOfLines={1} subtitle1 style={styles.channelInfoTitle} color={color.default.none.textTitle}>\n              {title}\n            </Text>\n            {Boolean(memberCount) && (\n              <Text caption1 style={styles.channelInfoMemberCount} color={color.default.none.memberCount}>\n                {memberCount}\n              </Text>\n            )}\n            {frozen && (\n              <Icon size={16} icon={'freeze'} color={colors.primary} containerStyle={styles.channelInfoFrozen} />\n            )}\n            {notificationOff && <Icon size={16} icon={'notifications-off-filled'} color={colors.onBackground03} />}\n          </View>\n          <View style={styles.titleCaption}>\n            <Text caption2 color={color.default.none.textTitleCaption}>\n              {titleCaption}\n            </Text>\n          </View>\n        </View>\n\n        <View style={styles.rightBottomSection}>\n          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>\n            {bodyIcon && (\n              <Icon\n                size={18}\n                icon={bodyIcon}\n                color={color.default.none.bodyIcon}\n                containerStyle={[\n                  styles.bodyIcon,\n                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },\n                ]}\n              />\n            )}\n            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>\n              {body}\n            </Text>\n          </View>\n          <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>\n        </View>\n      </View>\n      <Separator color={color.default.none.separator} />\n    </View>\n  );\n};\n\ntype SeparatorProps = { color: string };\nconst Separator = ({ color }: SeparatorProps) => <View style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    alignItems: 'center',\n  },\n  coverContainer: {\n    marginRight: 16,\n  },\n  channelCover: {\n    width: 56,\n    height: 56,\n    borderRadius: 28,\n  },\n  rightSection: {\n    flex: 1,\n  },\n  rightTopSection: {\n    flexDirection: 'row',\n    marginBottom: 4,\n  },\n  channelInfo: {\n    flex: 1,\n    marginRight: 4,\n    alignItems: 'center',\n    flexDirection: 'row',\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n    marginRight: 4,\n  },\n  channelInfoMemberCount: {\n    paddingTop: 2,\n    marginRight: 4,\n  },\n  channelInfoFrozen: {\n    marginRight: 4,\n  },\n  titleCaption: {\n    marginLeft: 4,\n    paddingTop: 2,\n  },\n  rightBottomSection: {\n    flex: 1,\n    height: '100%',\n    flexDirection: 'row',\n  },\n  body: {\n    marginRight: 4,\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  bodyText: {\n    flex: 1,\n  },\n  bodyIcon: {\n    borderRadius: 8,\n    width: 26,\n    height: 26,\n    marginRight: 4,\n  },\n  unreadBadge: {\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  separator: {\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    height: 1,\n    width: '84.5%',\n  },\n});\n\nexport default React.memo(GroupChannelPreview);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAmBA,MAAMA,mBAAoC,GAAG,QAYvC;EAAA,IAZwC;IAC5CC,WAD4C;IAE5CC,QAF4C;IAG5CC,WAH4C;IAI5CC,UAJ4C;IAK5CC,aAL4C;IAM5CC,IAN4C;IAO5CC,QAP4C;IAQ5CC,KAR4C;IAS5CC,YAT4C;IAU5CC,MAV4C;IAW5CC;EAX4C,CAYxC;EACJ,MAAM;IAAEC;EAAF,IAAa,IAAAC,sBAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUC,mBAAxB;EAEA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBC;IAAtC,CAAnB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEL,MAAM,CAACM;EAApB,GACG,IAAAC,6BAAA,EACC,CAACC,OAAO,CAACxB,WAAD,CAAR,CADD,EAEC,CACEA,WADF,eAEE,6BAAC,cAAD;IACE,UAAU,EAAE,OADd;IAEE,KAAK,EAAE,CAACgB,MAAM,CAACS,YAAR,EAAsB;MAAEP,eAAe,EAAEL,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBM;IAAtC,CAAtB,CAFT;IAGE,MAAM,EAAE;MAAEC,GAAG,EAAE1B;IAAP;EAHV,EAFF,CAFD,CADH,CADF,eAcE,6BAAC,iBAAD;IAAM,KAAK,EAAEe,MAAM,CAACY;EAApB,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEZ,MAAM,CAACa;EAApB,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEb,MAAM,CAACc;EAApB,gBACE,6BAAC,aAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,SAAS,MAAjC;IAAkC,KAAK,EAAEd,MAAM,CAACe,gBAAhD;IAAkE,KAAK,EAAElB,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBY;EAA5F,GACGzB,KADH,CADF,EAIGiB,OAAO,CAACtB,WAAD,CAAP,iBACC,6BAAC,aAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEc,MAAM,CAACiB,sBAA7B;IAAqD,KAAK,EAAEpB,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBlB;EAA/E,GACGA,WADH,CALJ,EASGO,MAAM,iBACL,6BAAC,aAAD;IAAM,IAAI,EAAE,EAAZ;IAAgB,IAAI,EAAE,QAAtB;IAAgC,KAAK,EAAEE,MAAM,CAACuB,OAA9C;IAAuD,cAAc,EAAElB,MAAM,CAACmB;EAA9E,EAVJ,EAYGzB,eAAe,iBAAI,6BAAC,aAAD;IAAM,IAAI,EAAE,EAAZ;IAAgB,IAAI,EAAE,0BAAtB;IAAkD,KAAK,EAAEC,MAAM,CAACyB;EAAhE,EAZtB,CADF,eAeE,6BAAC,iBAAD;IAAM,KAAK,EAAEpB,MAAM,CAACR;EAApB,gBACE,6BAAC,aAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEK,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBiB;EAAzC,GACG7B,YADH,CADF,CAfF,CADF,eAuBE,6BAAC,iBAAD;IAAM,KAAK,EAAEQ,MAAM,CAACsB;EAApB,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACtB,MAAM,CAACX,IAAR,EAAcC,QAAQ,IAAI;MAAEiC,UAAU,EAAE;IAAd,CAA1B;EAAb,GACGjC,QAAQ,iBACP,6BAAC,aAAD;IACE,IAAI,EAAE,EADR;IAEE,IAAI,EAAEA,QAFR;IAGE,KAAK,EAAEO,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBd,QAH5B;IAIE,cAAc,EAAE,CACdU,MAAM,CAACV,QADO,EAEd;MAAEY,eAAe,EAAEP,MAAM,CAACG,EAAP,CAAUC,mBAAV,CAA8BI,OAA9B,CAAsCC,IAAtC,CAA2CoB;IAA9D,CAFc;EAJlB,EAFJ,eAYE,6BAAC,aAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,CAA3B;IAA8B,KAAK,EAAExB,MAAM,CAACyB,QAA5C;IAAsD,KAAK,EAAE5B,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBsB;EAAhF,GACGrC,IADH,CAZF,CADF,eAiBE,6BAAC,iBAAD,QAAOF,UAAU,GAAG,CAAb,iBAAkB,6BAAC,cAAD;IAAO,KAAK,EAAEA,UAAd;IAA0B,QAAQ,EAAEC;EAApC,EAAzB,CAjBF,CAvBF,CAdF,eAyDE,6BAAC,SAAD;IAAW,KAAK,EAAES,KAAK,CAACM,OAAN,CAAcC,IAAd,CAAmBuB;EAArC,EAzDF,CADF;AA6DD,CA7ED;;AAgFA,MAAMC,SAAS,GAAG;EAAA,IAAC;IAAE/B;EAAF,CAAD;EAAA,oBAA+B,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACG,MAAM,CAAC2B,SAAR,EAAmB;MAAEzB,eAAe,EAAEL;IAAnB,CAAnB;EAAb,EAA/B;AAAA,CAAlB;;AAEA,MAAMG,MAAM,GAAG,IAAA6B,yBAAA,EAAiB;EAC9B5B,SAAS,EAAE;IACT6B,KAAK,EAAE,MADE;IAETC,aAAa,EAAE,KAFN;IAGTC,iBAAiB,EAAE,EAHV;IAITC,eAAe,EAAE,EAJR;IAKTV,UAAU,EAAE;EALH,CADmB;EAQ9BjB,cAAc,EAAE;IACd4B,WAAW,EAAE;EADC,CARc;EAW9BzB,YAAY,EAAE;IACZqB,KAAK,EAAE,EADK;IAEZK,MAAM,EAAE,EAFI;IAGZC,YAAY,EAAE;EAHF,CAXgB;EAgB9BxB,YAAY,EAAE;IACZyB,IAAI,EAAE;EADM,CAhBgB;EAmB9BxB,eAAe,EAAE;IACfkB,aAAa,EAAE,KADA;IAEfO,YAAY,EAAE;EAFC,CAnBa;EAuB9BxB,WAAW,EAAE;IACXuB,IAAI,EAAE,CADK;IAEXH,WAAW,EAAE,CAFF;IAGXX,UAAU,EAAE,QAHD;IAIXQ,aAAa,EAAE;EAJJ,CAvBiB;EA6B9BhB,gBAAgB,EAAE;IAChBwB,UAAU,EAAE,CADI;IAEhBL,WAAW,EAAE;EAFG,CA7BY;EAiC9BjB,sBAAsB,EAAE;IACtBuB,UAAU,EAAE,CADU;IAEtBN,WAAW,EAAE;EAFS,CAjCM;EAqC9Bf,iBAAiB,EAAE;IACjBe,WAAW,EAAE;EADI,CArCW;EAwC9B1C,YAAY,EAAE;IACZiD,UAAU,EAAE,CADA;IAEZD,UAAU,EAAE;EAFA,CAxCgB;EA4C9BlB,kBAAkB,EAAE;IAClBe,IAAI,EAAE,CADY;IAElBF,MAAM,EAAE,MAFU;IAGlBJ,aAAa,EAAE;EAHG,CA5CU;EAiD9B1C,IAAI,EAAE;IACJ6C,WAAW,EAAE,CADT;IAEJG,IAAI,EAAE,CAFF;IAGJK,cAAc,EAAE,QAHZ;IAIJnB,UAAU,EAAE,YAJR;IAKJQ,aAAa,EAAE;EALX,CAjDwB;EAwD9BN,QAAQ,EAAE;IACRY,IAAI,EAAE;EADE,CAxDoB;EA2D9B/C,QAAQ,EAAE;IACR8C,YAAY,EAAE,CADN;IAERN,KAAK,EAAE,EAFC;IAGRK,MAAM,EAAE,EAHA;IAIRD,WAAW,EAAE;EAJL,CA3DoB;EAiE9BS,WAAW,EAAE;IACXC,QAAQ,EAAE,EADC;IAEXC,SAAS,EAAE,EAFA;IAGXT,YAAY,EAAE,EAHH;IAIXb,UAAU,EAAE,QAJD;IAKXmB,cAAc,EAAE;EALL,CAjEiB;EAwE9Bf,SAAS,EAAE;IACTmB,QAAQ,EAAE,UADD;IAETC,KAAK,EAAE,CAFE;IAGTC,MAAM,EAAE,CAHC;IAITb,MAAM,EAAE,CAJC;IAKTL,KAAK,EAAE;EALE;AAxEmB,CAAjB,CAAf;;4BAiFemB,cAAA,CAAMC,IAAN,CAAWnE,mBAAX,C"}

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

@@ -0,0 +1,237 @@
+"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 _uikitUtils = require("@sendbird/uikit-utils");
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _getDefaultHeaderHeight = _interopRequireDefault(require("../../styles/getDefaultHeaderHeight"));
+
+var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const AlignMapper = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+
+const Header = _ref => {
+  let {
+    children,
+    titleAlign,
+    title = null,
+    left = null,
+    right = null,
+    onPressLeft,
+    onPressRight,
+    clearTitleMargin = false
+  } = _ref;
+  const {
+    topInset,
+    defaultTitleAlign
+  } = (0, _useHeaderStyle.default)();
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  const {
+    left: paddingLeft,
+    right: paddingRight
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const actualTitleAlign = titleAlign ?? defaultTitleAlign;
+
+  if (!title && !left && !right) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: {
+        paddingTop: topInset,
+        backgroundColor: colors.ui.header.nav.none.background
+      }
+    }, children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      paddingLeft: paddingLeft + styles.container.paddingHorizontal,
+      paddingRight: paddingRight + styles.container.paddingHorizontal,
+      paddingTop: topInset,
+      backgroundColor: colors.ui.header.nav.none.background,
+      borderBottomColor: colors.ui.header.nav.none.borderBottom
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.header, {
+      height: (0, _getDefaultHeaderHeight.default)(width > height)
+    }]
+  }, /*#__PURE__*/_react.default.createElement(LeftSide, {
+    titleAlign: actualTitleAlign,
+    left: left,
+    onPressLeft: onPressLeft
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.title, clearTitleMargin && {
+      marginHorizontal: 0
+    }, {
+      justifyContent: AlignMapper[actualTitleAlign]
+    }]
+  }, typeof title === 'string' ? /*#__PURE__*/_react.default.createElement(HeaderTitle, null, title) : title), /*#__PURE__*/_react.default.createElement(RightSide, {
+    titleAlign: actualTitleAlign,
+    right: right,
+    onPressRight: onPressRight
+  })), children);
+};
+
+const LeftSide = _ref2 => {
+  let {
+    titleAlign,
+    onPressLeft,
+    left
+  } = _ref2;
+
+  if (titleAlign === 'center') {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.left
+    }, left && /*#__PURE__*/_react.default.createElement(HeaderButton, {
+      onPress: onPressLeft
+    }, left));
+  }
+
+  if (!left) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.left
+  }, /*#__PURE__*/_react.default.createElement(HeaderButton, {
+    onPress: onPressLeft
+  }, left));
+};
+
+const RightSide = _ref3 => {
+  let {
+    titleAlign,
+    onPressRight,
+    right
+  } = _ref3;
+
+  if (titleAlign === 'center') {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: styles.right
+    }, right && /*#__PURE__*/_react.default.createElement(HeaderButton, {
+      onPress: onPressRight
+    }, right));
+  }
+
+  if (!right) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.right
+  }, /*#__PURE__*/_react.default.createElement(HeaderButton, {
+    onPress: onPressRight
+  }, right));
+};
+
+const HeaderTitle = _ref4 => {
+  let {
+    children,
+    style,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(_Text.default, _extends({}, props, {
+    h1: true,
+    numberOfLines: 1,
+    style: style
+  }), children);
+};
+
+const HeaderSubtitle = _ref5 => {
+  let {
+    children,
+    style,
+    ...props
+  } = _ref5;
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_Text.default, _extends({
+    color: colors.onBackground03
+  }, props, {
+    caption2: true,
+    numberOfLines: 1,
+    style: style
+  }), children);
+};
+
+const HeaderButton = _ref6 => {
+  let {
+    children,
+    disabled,
+    onPress,
+    color,
+    ...props
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, _extends({
+    style: styles.button
+  }, props, {
+    disabled: !onPress || disabled,
+    onPress: e => onPress === null || onPress === void 0 ? void 0 : onPress(e),
+    activeOpacity: 0.7
+  }), (0, _uikitUtils.conditionChaining)([typeof children === 'string' || typeof children === 'number'], [/*#__PURE__*/_react.default.createElement(_Text.default, {
+    button: true,
+    numberOfLines: 1,
+    color: color
+  }, children), children]));
+};
+
+const styles = (0, _createStyleSheet.default)({
+  container: {
+    paddingHorizontal: 12,
+    borderBottomWidth: 1
+  },
+  header: {
+    flexDirection: 'row'
+  },
+  title: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 12
+  },
+  left: {
+    height: '100%',
+    minWidth: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  right: {
+    height: '100%',
+    minWidth: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 12
+  },
+  button: {
+    padding: 4
+  }
+});
+Header.Button = HeaderButton;
+Header.Title = HeaderTitle;
+Header.Subtitle = HeaderSubtitle;
+var _default = Header;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AlignMapper","left","center","right","Header","children","titleAlign","title","onPressLeft","onPressRight","clearTitleMargin","topInset","defaultTitleAlign","useHeaderStyle","width","height","useWindowDimensions","colors","useUIKitTheme","paddingLeft","paddingRight","useSafeAreaInsets","actualTitleAlign","paddingTop","backgroundColor","ui","header","nav","none","background","styles","container","paddingHorizontal","borderBottomColor","borderBottom","getDefaultHeaderHeight","marginHorizontal","justifyContent","LeftSide","RightSide","HeaderTitle","style","props","HeaderSubtitle","onBackground03","HeaderButton","disabled","onPress","color","button","e","conditionChaining","createStyleSheet","borderBottomWidth","flexDirection","flex","alignItems","minWidth","marginRight","marginLeft","padding","Button","Title","Subtitle"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport type { BaseHeaderProps } from '../../index';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Text, { TextProps } from '../Text';\n\ntype HeaderElement = string | React.ReactElement | null;\ntype HeaderProps = BaseHeaderProps<\n  {\n    title?: HeaderElement;\n    left?: HeaderElement;\n    right?: HeaderElement;\n    onPressLeft?: () => void;\n    onPressRight?: () => void;\n  },\n  { clearTitleMargin?: boolean }\n>;\n\nconst AlignMapper = { left: 'flex-start', center: 'center', right: 'flex-end' } as const;\nconst Header: React.FC<HeaderProps> & {\n  Button: typeof HeaderButton;\n  Title: typeof HeaderTitle;\n  Subtitle: typeof HeaderSubtitle;\n} = ({\n  children,\n  titleAlign,\n  title = null,\n  left = null,\n  right = null,\n  onPressLeft,\n  onPressRight,\n  clearTitleMargin = false,\n}) => {\n  const { topInset, defaultTitleAlign } = useHeaderStyle();\n  const { width, height } = useWindowDimensions();\n  const { colors } = useUIKitTheme();\n  const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();\n\n  const actualTitleAlign = titleAlign ?? defaultTitleAlign;\n\n  if (!title && !left && !right) {\n    return (\n      <View style={{ paddingTop: topInset, backgroundColor: colors.ui.header.nav.none.background }}>{children}</View>\n    );\n  }\n\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          paddingLeft: paddingLeft + styles.container.paddingHorizontal,\n          paddingRight: paddingRight + styles.container.paddingHorizontal,\n          paddingTop: topInset,\n          backgroundColor: colors.ui.header.nav.none.background,\n          borderBottomColor: colors.ui.header.nav.none.borderBottom,\n        },\n      ]}\n    >\n      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>\n        <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />\n        <View\n          style={[\n            styles.title,\n            clearTitleMargin && { marginHorizontal: 0 },\n            { justifyContent: AlignMapper[actualTitleAlign] },\n          ]}\n        >\n          {typeof title === 'string' ? <HeaderTitle>{title}</HeaderTitle> : title}\n        </View>\n        <RightSide titleAlign={actualTitleAlign} right={right} onPressRight={onPressRight} />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst LeftSide: React.FC<HeaderProps> = ({ titleAlign, onPressLeft, left }) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.left}>{left && <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>}</View>;\n  }\n  if (!left) return null;\n  return (\n    <View style={styles.left}>\n      <HeaderButton onPress={onPressLeft}>{left}</HeaderButton>\n    </View>\n  );\n};\n\nconst RightSide: React.FC<HeaderProps> = ({ titleAlign, onPressRight, right }) => {\n  if (titleAlign === 'center') {\n    return <View style={styles.right}>{right && <HeaderButton onPress={onPressRight}>{right}</HeaderButton>}</View>;\n  }\n  if (!right) return null;\n  return (\n    <View style={styles.right}>\n      <HeaderButton onPress={onPressRight}>{right}</HeaderButton>\n    </View>\n  );\n};\n\nconst HeaderTitle: React.FC<{ children: string } & TextProps> = ({ children, style, ...props }) => {\n  return (\n    <Text {...props} h1 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderSubtitle: React.FC<{ children: string } & TextProps> = ({ children, style, ...props }) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Text color={colors.onBackground03} {...props} caption2 numberOfLines={1} style={style}>\n      {children}\n    </Text>\n  );\n};\nconst HeaderButton: React.FC<TouchableOpacityProps & { color?: string }> = ({\n  children,\n  disabled,\n  onPress,\n  color,\n  ...props\n}) => {\n  return (\n    <TouchableOpacity\n      style={styles.button}\n      {...props}\n      disabled={!onPress || disabled}\n      onPress={(e) => onPress?.(e)}\n      activeOpacity={0.7}\n    >\n      {conditionChaining(\n        [typeof children === 'string' || typeof children === 'number'],\n        [\n          <Text button numberOfLines={1} color={color}>\n            {children}\n          </Text>,\n          children,\n        ],\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    borderBottomWidth: 1,\n  },\n  header: {\n    flexDirection: 'row',\n  },\n  title: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginHorizontal: 12,\n  },\n  left: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: 12,\n  },\n  right: {\n    height: '100%',\n    minWidth: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginLeft: 12,\n  },\n  button: {\n    padding: 4,\n  },\n});\n\nHeader.Button = HeaderButton;\nHeader.Title = HeaderTitle;\nHeader.Subtitle = HeaderSubtitle;\nexport default Header;\n"],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _icon = _interopRequireDefault(require("../../assets/icon"));
+
+var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Icon = _ref => {
+  let {
+    icon,
+    color,
+    size = 24,
+    containerStyle,
+    style
+  } = _ref;
+  const sizeStyle = sizeStyles[size] ?? {
+    width: size,
+    height: size
+  };
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [containerStyle, containerStyles.container]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    resizeMode: 'contain',
+    source: _icon.default[icon],
+    style: [{
+      tintColor: color ?? colors.primary
+    }, sizeStyle, style]
+  }));
+};
+
+const containerStyles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+const sizeStyles = (0, _createStyleSheet.default)({
+  16: {
+    width: 16,
+    height: 16
+  },
+  20: {
+    width: 20,
+    height: 20
+  },
+  24: {
+    width: 24,
+    height: 24
+  },
+  28: {
+    width: 28,
+    height: 28
+  },
+  32: {
+    width: 32,
+    height: 32
+  }
+});
+Icon.Assets = _icon.default;
+var _default = Icon;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Icon","icon","color","size","containerStyle","style","sizeStyle","sizeStyles","width","height","colors","useUIKitTheme","containerStyles","container","IconAssets","tintColor","primary","StyleSheet","create","alignItems","justifyContent","createStyleSheet","Assets"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport IconAssets from '../../assets/icon';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype IconNames = keyof typeof IconAssets;\ntype SizeFactor = keyof typeof sizeStyles;\n\ntype Props = {\n  icon: IconNames;\n  color?: string;\n  size?: number;\n  style?: StyleProp<ImageStyle>;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Icon: React.FC<Props> & { Assets: typeof IconAssets } = ({ icon, color, size = 24, containerStyle, style }) => {\n  const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };\n  const { colors } = useUIKitTheme();\n  return (\n    <View style={[containerStyle, containerStyles.container]}>\n      <Image\n        resizeMode={'contain'}\n        source={IconAssets[icon]}\n        style={[{ tintColor: color ?? colors.primary }, sizeStyle, style]}\n      />\n    </View>\n  );\n};\n\nconst containerStyles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nconst sizeStyles = createStyleSheet({\n  16: {\n    width: 16,\n    height: 16,\n  },\n  20: {\n    width: 20,\n    height: 20,\n  },\n  24: {\n    width: 24,\n    height: 24,\n  },\n  28: {\n    width: 28,\n    height: 28,\n  },\n  32: {\n    width: 32,\n    height: 32,\n  },\n});\n\nIcon.Assets = IconAssets;\nexport default Icon;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;AAaA,MAAMA,IAAqD,GAAG,QAAuD;EAAA,IAAtD;IAAEC,IAAF;IAAQC,KAAR;IAAeC,IAAI,GAAG,EAAtB;IAA0BC,cAA1B;IAA0CC;EAA1C,CAAsD;EACnH,MAAMC,SAAS,GAAGC,UAAU,CAACJ,IAAD,CAAV,IAAkC;IAAEK,KAAK,EAAEL,IAAT;IAAeM,MAAM,EAAEN;EAAvB,CAApD;EACA,MAAM;IAAEO;EAAF,IAAa,IAAAC,sBAAA,GAAnB;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACP,cAAD,EAAiBQ,eAAe,CAACC,SAAjC;EAAb,gBACE,6BAAC,kBAAD;IACE,UAAU,EAAE,SADd;IAEE,MAAM,EAAEC,aAAA,CAAWb,IAAX,CAFV;IAGE,KAAK,EAAE,CAAC;MAAEc,SAAS,EAAEb,KAAK,IAAIQ,MAAM,CAACM;IAA7B,CAAD,EAAyCV,SAAzC,EAAoDD,KAApD;EAHT,EADF,CADF;AASD,CAZD;;AAcA,MAAMO,eAAe,GAAGK,uBAAA,CAAWC,MAAX,CAAkB;EACxCL,SAAS,EAAE;IACTM,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP;AAD6B,CAAlB,CAAxB;;AAOA,MAAMb,UAAU,GAAG,IAAAc,yBAAA,EAAiB;EAClC,IAAI;IACFb,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAD8B;EAKlC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAL8B;EASlC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAT8B;EAalC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN,CAb8B;EAiBlC,IAAI;IACFD,KAAK,EAAE,EADL;IAEFC,MAAM,EAAE;EAFN;AAjB8B,CAAjB,CAAnB;AAuBAT,IAAI,CAACsB,MAAL,GAAcR,aAAd;eACed,I"}

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+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 LoadingSpinner = _ref => {
+  let {
+    size = 24,
+    color,
+    style
+  } = _ref;
+  const {
+    colors
+  } = (0, _useUIKitTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(Rotate, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: 'spinner',
+    size: size,
+    color: color ?? colors.primary
+  }));
+};
+
+const useLoopAnimated = function (duration) {
+  let useNativeDriver = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const animated = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.loop(_reactNative.Animated.timing(animated, {
+      toValue: 1,
+      duration,
+      useNativeDriver,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.linear)
+    }), {
+      resetBeforeIteration: true
+    }).start();
+
+    return () => {
+      animated.stopAnimation();
+      animated.setValue(0);
+    };
+  }, []);
+  return animated;
+};
+
+const Rotate = _ref2 => {
+  let {
+    children,
+    style
+  } = _ref2;
+  const loop = useLoopAnimated(1000);
+  const rotate = loop.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [style, {
+      transform: [{
+        rotate
+      }]
+    }]
+  }, children);
+};
+
+var _default = LoadingSpinner;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["LoadingSpinner","size","color","style","colors","useUIKitTheme","primary","useLoopAnimated","duration","useNativeDriver","animated","useRef","Animated","Value","current","useEffect","loop","timing","toValue","easing","Easing","inOut","linear","resetBeforeIteration","start","stopAnimation","setValue","Rotate","children","rotate","interpolate","inputRange","outputRange","transform"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\n\ntype Props = {\n  size?: number;\n  color?: string;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst LoadingSpinner: React.FC<Props> = ({ size = 24, color, style }) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Rotate style={style}>\n      <Icon icon={'spinner'} size={size} color={color ?? colors.primary} />\n    </Rotate>\n  );\n};\n\nconst useLoopAnimated = (duration: number, useNativeDriver = true) => {\n  const animated = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    Animated.loop(\n      Animated.timing(animated, { toValue: 1, duration, useNativeDriver, easing: Easing.inOut(Easing.linear) }),\n      { resetBeforeIteration: true },\n    ).start();\n\n    return () => {\n      animated.stopAnimation();\n      animated.setValue(0);\n    };\n  }, []);\n\n  return animated;\n};\n\nconst Rotate: React.FC<{ style: StyleProp<ViewStyle> }> = ({ children, style }) => {\n  const loop = useLoopAnimated(1000);\n  const rotate = loop.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });\n  return <Animated.View style={[style, { transform: [{ rotate }] }]}>{children}</Animated.View>;\n};\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAQA,MAAMA,cAA+B,GAAG,QAAiC;EAAA,IAAhC;IAAEC,IAAI,GAAG,EAAT;IAAaC,KAAb;IAAoBC;EAApB,CAAgC;EACvE,MAAM;IAAEC;EAAF,IAAa,IAAAC,sBAAA,GAAnB;EACA,oBACE,6BAAC,MAAD;IAAQ,KAAK,EAAEF;EAAf,gBACE,6BAAC,aAAD;IAAM,IAAI,EAAE,SAAZ;IAAuB,IAAI,EAAEF,IAA7B;IAAmC,KAAK,EAAEC,KAAK,IAAIE,MAAM,CAACE;EAA1D,EADF,CADF;AAKD,CAPD;;AASA,MAAMC,eAAe,GAAG,UAACC,QAAD,EAA8C;EAAA,IAA3BC,eAA2B,uEAAT,IAAS;EACpE,MAAMC,QAAQ,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAP,EAA8BC,OAA/C;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACdH,qBAAA,CAASI,IAAT,CACEJ,qBAAA,CAASK,MAAT,CAAgBP,QAAhB,EAA0B;MAAEQ,OAAO,EAAE,CAAX;MAAcV,QAAd;MAAwBC,eAAxB;MAAyCU,MAAM,EAAEC,mBAAA,CAAOC,KAAP,CAAaD,mBAAA,CAAOE,MAApB;IAAjD,CAA1B,CADF,EAEE;MAAEC,oBAAoB,EAAE;IAAxB,CAFF,EAGEC,KAHF;;IAKA,OAAO,MAAM;MACXd,QAAQ,CAACe,aAAT;MACAf,QAAQ,CAACgB,QAAT,CAAkB,CAAlB;IACD,CAHD;EAID,CAVD,EAUG,EAVH;EAYA,OAAOhB,QAAP;AACD,CAhBD;;AAkBA,MAAMiB,MAAiD,GAAG,SAAyB;EAAA,IAAxB;IAAEC,QAAF;IAAYzB;EAAZ,CAAwB;EACjF,MAAMa,IAAI,GAAGT,eAAe,CAAC,IAAD,CAA5B;EACA,MAAMsB,MAAM,GAAGb,IAAI,CAACc,WAAL,CAAiB;IAAEC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAAd;IAAsBC,WAAW,EAAE,CAAC,MAAD,EAAS,QAAT;EAAnC,CAAjB,CAAf;EACA,oBAAO,6BAAC,qBAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAC7B,KAAD,EAAQ;MAAE8B,SAAS,EAAE,CAAC;QAAEJ;MAAF,CAAD;IAAb,CAAR;EAAtB,GAA6DD,QAA7D,CAAP;AACD,CAJD;;eAMe5B,c"}