@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/lib/commonjs/social/features/chat/features/conversation/hooks/useConversation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useConversation = useConversation;
+var _react = require("react");
+var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
+var _useAuth = _interopRequireDefault(require("../../../../../../core/hooks/useAuth"));
+var _useChatMessage = require("../../shared/hooks/useChatMessage");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// useConversation — RN equivalent of AmityUiKitWeb v4/chat/features/conversation/chat/hooks/useChat.
+// Thin wrapper: fetches the live channel (for group-vs-direct behaviour + the muted
+// banner) and delegates all message orchestration to useChatMessage. Chat.tsx consumes
+// the combined result.
+
+function useConversation(channelId) {
+  var _channel$previewMembe;
+  const {
+    isConnected
+  } = (0, _useAuth.default)();
+  const [channel, setChannel] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    if (!isConnected || !channelId) return undefined;
+    const unsub = _tsSdkReactNative.ChannelRepository.getChannel(channelId, ({
+      data
+    }) => {
+      if (data) setChannel(data);
+    });
+    return () => {
+      unsub();
+    };
+  }, [isConnected, channelId]);
+  const isGroupChat = (channel === null || channel === void 0 ? void 0 : channel.type) === 'community';
+  const chat = (0, _useChatMessage.useChatMessage)({
+    channelId,
+    enableMention: isGroupChat
+  });
+
+  // The other participant in a 1-1 conversation (for the header user-action menu),
+  // resolved from the channel preview members like AmityChatListItem does.
+  const otherUser = channel === null || channel === void 0 || (_channel$previewMembe = channel.previewMembers) === null || _channel$previewMembe === void 0 || (_channel$previewMembe = _channel$previewMembe.find(m => m.userId !== chat.currentUserId)) === null || _channel$previewMembe === void 0 ? void 0 : _channel$previewMembe.user;
+
+  // Muted/blocked banner: the RN SDK exposes the viewer's channel membership mute via
+  // channel.isMuted for the current user; block status (web useFollowInfo) has no RN
+  // equivalent wired yet, so the 'blocked' variant is not surfaced here.
+  const isChannelMuted = Boolean(channel === null || channel === void 0 ? void 0 : channel.isMuted);
+  const showMutedBanner = isChannelMuted;
+  const mutedVariant = 'channel';
+  return {
+    ...chat,
+    channel,
+    otherUser,
+    isGroupChat,
+    showMutedBanner,
+    mutedVariant
+  };
+}
+//# sourceMappingURL=useConversation.js.map

package/lib/commonjs/social/features/chat/features/conversation/hooks/useConversation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_tsSdkReactNative","_useAuth","_interopRequireDefault","_useChatMessage","e","__esModule","default","useConversation","channelId","_channel$previewMembe","isConnected","useAuth","channel","setChannel","useState","undefined","useEffect","unsub","ChannelRepository","getChannel","data","isGroupChat","type","chat","useChatMessage","enableMention","otherUser","previewMembers","find","m","userId","currentUserId","user","isChannelMuted","Boolean","isMuted","showMutedBanner","mutedVariant"],"sourceRoot":"../../../../../../../../src","sources":["social/features/chat/features/conversation/hooks/useConversation.ts"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AAAmE,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AATnE;AACA;AACA;AACA;;AAQO,SAASG,eAAeA,CAACC,SAAkB,EAAE;EAAA,IAAAC,qBAAA;EAClD,MAAM;IAAEC;EAAY,CAAC,GAAG,IAAAC,gBAAO,EAAC,CAAC;EAEjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAA4BC,SAAS,CAAC;EAC5E,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAI,CAACN,WAAW,IAAI,CAACF,SAAS,EAAE,OAAOO,SAAS;IAChD,MAAME,KAAK,GAAGC,mCAAiB,CAACC,UAAU,CAACX,SAAS,EAAE,CAAC;MAAEY;IAAK,CAAC,KAAK;MAClE,IAAIA,IAAI,EAAEP,UAAU,CAACO,IAAI,CAAC;IAC5B,CAAC,CAAC;IACF,OAAO,MAAM;MACXH,KAAK,CAAC,CAAC;IACT,CAAC;EACH,CAAC,EAAE,CAACP,WAAW,EAAEF,SAAS,CAAC,CAAC;EAE5B,MAAMa,WAAW,GAAG,CAAAT,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEU,IAAI,MAAK,WAAW;EAEjD,MAAMC,IAAI,GAAG,IAAAC,8BAAc,EAAC;IAAEhB,SAAS;IAAEiB,aAAa,EAAEJ;EAAY,CAAC,CAAC;;EAEtE;EACA;EACA,MAAMK,SAAS,GAAGd,OAAO,aAAPA,OAAO,gBAAAH,qBAAA,GAAPG,OAAO,CAAEe,cAAc,cAAAlB,qBAAA,gBAAAA,qBAAA,GAAvBA,qBAAA,CAAyBmB,IAAI,CAC5CC,CAAC,IAAKA,CAAC,CAACC,MAAM,KAAKP,IAAI,CAACQ,aAC3B,CAAC,cAAAtB,qBAAA,uBAFiBA,qBAAA,CAEfuB,IAAsC;;EAEzC;EACA;EACA;EACA,MAAMC,cAAc,GAAGC,OAAO,CAC3BtB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAwCuB,OAClD,CAAC;EACD,MAAMC,eAAe,GAAGH,cAAc;EACtC,MAAMI,YAA4C,GAAG,SAAS;EAE9D,OAAO;IACL,GAAGd,IAAI;IACPX,OAAO;IACPc,SAAS;IACTL,WAAW;IACXe,eAAe;IACfC;EACF,CAAC;AACH","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/conversation/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Chat", {
+  enumerable: true,
+  get: function () {
+    return _Chat.Chat;
+  }
+});
+var _Chat = require("./Chat");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/social/features/chat/features/conversation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Chat","require"],"sourceRoot":"../../../../../../../src","sources":["social/features/chat/features/conversation/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/conversation/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../../../core/design/theme/useToken");
+var _amityColorTokens = require("../../../../../core/design/tokens/amity-color-tokens");
+// Styles for the conversation Chat container.
+
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePageBackgroundDefault)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/social/features/chat/features/conversation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","token","useToken","styles","StyleSheet","create","container","flex","backgroundColor","AmityColorToken","SurfacePageBackgroundDefault","exports"],"sourceRoot":"../../../../../../../src","sources":["social/features/chat/features/conversation/styles.ts"],"mappings":";;;;;;AAEA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAJA;;AAMO,MAAMG,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,IAAI,EAAE,CAAC;MACPC,eAAe,EAAEP,KAAK,CAACQ,iCAAe,CAACC,4BAA4B;IACrE;EACF,CAAC,CAAC;EAEF,OAAO;IAAEP,MAAM;IAAEF;EAAM,CAAC;AAC1B,CAAC;AAACU,OAAA,CAAAX,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/AddGroupMember.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddGroupMember = AddGroupMember;
+var _reactNative = require("react-native");
+var _Header = require("./components/Header");
+var _AddMemberButton = require("./components/AddMemberButton");
+var _UserList = require("./components/UserList");
+var _useAddGroupMember = require("./hooks/useAddGroupMember");
+var _styles = require("./styles");
+// AddGroupMember — ported from AmityUiKitWeb v4/chat/features/group/add-member.
+// Feature entry: a Header (close + search + selected chips), a multi-select
+// UserList, and a pinned submit button. `channelId` mirrors web's page prop;
+// `onClose` is an optional navigation callback supplied by the hosting page.
+//
+// Web wrapped the list in a react-hook-form `Controller`; the RN hook already
+// exposes the watched `selectedUsers` + `setSelectedUsers`, so the list binds to
+// those directly (a form re-renders on watch), and the submit button calls the
+// hook's `handleAddMember` instead of a native form submit.
+
+// 1. React / RN imports
+
+// 2. Internal imports
+
+// 3. Types
+
+// 4. Named function component
+function AddGroupMember({
+  channelId,
+  onClose
+}) {
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  const {
+    searchText,
+    debouncedText,
+    selectedUsers,
+    setSearchText,
+    setSelectedUsers,
+    removeUser,
+    handleClose,
+    handleAddMember,
+    isFormValid
+  } = (0, _useAddGroupMember.useAddGroupMember)({
+    channelId,
+    onClose
+  });
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.addGroupMember
+  }, /*#__PURE__*/React.createElement(_Header.Header, {
+    searchValue: searchText,
+    selectedUsers: selectedUsers,
+    onClose: handleClose,
+    onSearchChange: setSearchText,
+    onRemoveUser: removeUser
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.list
+  }, /*#__PURE__*/React.createElement(_UserList.UserList, {
+    searchText: debouncedText,
+    selectedUsers: selectedUsers,
+    onChange: setSelectedUsers
+  })), /*#__PURE__*/React.createElement(_AddMemberButton.AddMemberButton, {
+    isDisabled: !isFormValid,
+    onSubmit: handleAddMember
+  }));
+}
+//# sourceMappingURL=AddGroupMember.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/AddGroupMember.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Header","_AddMemberButton","_UserList","_useAddGroupMember","_styles","AddGroupMember","channelId","onClose","styles","useStyles","searchText","debouncedText","selectedUsers","setSearchText","setSelectedUsers","removeUser","handleClose","handleAddMember","isFormValid","useAddGroupMember","React","createElement","View","style","addGroupMember","Header","searchValue","onSearchChange","onRemoveUser","list","UserList","onChange","AddMemberButton","isDisabled","onSubmit"],"sourceRoot":"../../../../../../../../src","sources":["social/features/chat/features/group/add-member/AddGroupMember.tsx"],"mappings":";;;;;;AAWA,IAAAA,YAAA,GAAAC,OAAA;AAGA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAlBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA;;AAOA;;AAMA;AACO,SAASM,cAAcA,CAAC;EAAEC,SAAS;EAAEC;AAA6B,CAAC,EAAE;EAC1E,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAC9B,MAAM;IACJC,UAAU;IACVC,aAAa;IACbC,aAAa;IACbC,aAAa;IACbC,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACXC,eAAe;IACfC;EACF,CAAC,GAAG,IAAAC,oCAAiB,EAAC;IAAEb,SAAS;IAAEC;EAAQ,CAAC,CAAC;EAE7C,oBACEa,KAAA,CAAAC,aAAA,CAACvB,YAAA,CAAAwB,IAAI;IAACC,KAAK,EAAEf,MAAM,CAACgB;EAAe,gBACjCJ,KAAA,CAAAC,aAAA,CAACrB,OAAA,CAAAyB,MAAM;IACLC,WAAW,EAAEhB,UAAW;IACxBE,aAAa,EAAEA,aAAc;IAC7BL,OAAO,EAAES,WAAY;IACrBW,cAAc,EAAEd,aAAc;IAC9Be,YAAY,EAAEb;EAAW,CAC1B,CAAC,eACFK,KAAA,CAAAC,aAAA,CAACvB,YAAA,CAAAwB,IAAI;IAACC,KAAK,EAAEf,MAAM,CAACqB;EAAK,gBACvBT,KAAA,CAAAC,aAAA,CAACnB,SAAA,CAAA4B,QAAQ;IACPpB,UAAU,EAAEC,aAAc;IAC1BC,aAAa,EAAEA,aAAc;IAC7BmB,QAAQ,EAAEjB;EAAiB,CAC5B,CACG,CAAC,eACPM,KAAA,CAAAC,aAAA,CAACpB,gBAAA,CAAA+B,eAAe;IAACC,UAAU,EAAE,CAACf,WAAY;IAACgB,QAAQ,EAAEjB;EAAgB,CAAE,CACnE,CAAC;AAEX","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/AddMemberButton/AddMemberButton.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddMemberButton = AddMemberButton;
+var _reactNative = require("react-native");
+var _Button = require("../../../../../../../../core/design/atoms/Button");
+var _localization = require("../../../../../../../../core/localization");
+var _styles = require("./styles");
+// AddMemberButton — ported from AmityUiKitWeb
+// v4/chat/features/group/add-member/components/AddMemberButton. A full-width
+// primary submit button pinned to the bottom of the add-member screen. Web's
+// `Button.Main` (filled/primary/lg) → the RN Button atom (primary/lg, fullWidth);
+// the web form `type="submit"` becomes an explicit `onSubmit` press handler.
+
+// 1. React / RN imports
+
+// 2. Internal imports
+
+// 3. Types
+
+// 4. Named function component
+function AddMemberButton({
+  isDisabled,
+  onSubmit
+}) {
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  const buttonLabel = (0, _localization.useString)('amity_chat_add_member_button');
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    hierarchy: "primary",
+    size: "lg",
+    fullWidth: true,
+    label: buttonLabel,
+    disabled: isDisabled,
+    onPress: onSubmit
+  }));
+}
+//# sourceMappingURL=AddMemberButton.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/AddMemberButton/AddMemberButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_Button","_localization","_styles","AddMemberButton","isDisabled","onSubmit","styles","useStyles","buttonLabel","useString","React","createElement","View","style","container","Button","hierarchy","size","fullWidth","label","disabled","onPress"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/AddMemberButton/AddMemberButton.tsx"],"mappings":";;;;;;AAOA,IAAAA,YAAA,GAAAC,OAAA;AAGA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAZA;AACA;AACA;AACA;AACA;;AAEA;;AAGA;;AAKA;;AAMA;AACO,SAASI,eAAeA,CAAC;EAC9BC,UAAU;EACVC;AACoB,CAAC,EAAE;EACvB,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAC9B,MAAMC,WAAW,GAAG,IAAAC,uBAAS,EAAC,8BAA8B,CAAC;EAC7D,oBACEC,KAAA,CAAAC,aAAA,CAACb,YAAA,CAAAc,IAAI;IAACC,KAAK,EAAEP,MAAM,CAACQ;EAAU,gBAC5BJ,KAAA,CAAAC,aAAA,CAACX,OAAA,CAAAe,MAAM;IACLC,SAAS,EAAC,SAAS;IACnBC,IAAI,EAAC,IAAI;IACTC,SAAS;IACTC,KAAK,EAAEX,WAAY;IACnBY,QAAQ,EAAEhB,UAAW;IACrBiB,OAAO,EAAEhB;EAAS,CACnB,CACG,CAAC;AAEX","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/AddMemberButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AddMemberButton", {
+  enumerable: true,
+  get: function () {
+    return _AddMemberButton.AddMemberButton;
+  }
+});
+var _AddMemberButton = require("./AddMemberButton");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/AddMemberButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_AddMemberButton","require"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/AddMemberButton/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/AddMemberButton/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../../../../../../core/design/theme/useToken");
+var _amityColorTokens = require("../../../../../../../../core/design/tokens/amity-color-tokens");
+// Styles for AddMemberButton — ported from AmityUiKitWeb AddMemberButton.module.css.
+// Padding 1rem → 16, top divider, page background.
+
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      flexShrink: 0,
+      padding: 16,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePageBackgroundDefault),
+      borderTopWidth: 1,
+      borderTopColor: token(_amityColorTokens.AmityColorToken.LineDividerPostDefault)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/AddMemberButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","token","useToken","styles","StyleSheet","create","container","flexShrink","padding","backgroundColor","AmityColorToken","SurfacePageBackgroundDefault","borderTopWidth","borderTopColor","LineDividerPostDefault","exports"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/AddMemberButton/styles.ts"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AALA;AACA;;AAMO,MAAMG,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,UAAU,EAAE,CAAC;MACbC,OAAO,EAAE,EAAE;MACXC,eAAe,EAAER,KAAK,CAACS,iCAAe,CAACC,4BAA4B,CAAC;MACpEC,cAAc,EAAE,CAAC;MACjBC,cAAc,EAAEZ,KAAK,CAACS,iCAAe,CAACI,sBAAsB;IAC9D;EACF,CAAC,CAAC;EAEF,OAAO;IAAEX,MAAM;IAAEF;EAAM,CAAC;AAC1B,CAAC;AAACc,OAAA,CAAAf,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/Header/Header.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = Header;
+var _reactNative = require("react-native");
+var _TopBar = require("../../../../../elements/TopBar");
+var _SelectedUsersBar = require("../SelectedUsersBar");
+var _SearchInput = require("../../../../../../../../core/design/molecules/SearchInput");
+var _localization = require("../../../../../../../../core/localization");
+var _styles = require("./styles");
+// Header — ported from AmityUiKitWeb
+// v4/chat/features/group/add-member/components/Header. A close top bar, a search
+// bar, and the SelectedUsersBar chip row.
+
+// 1. React / RN imports
+
+// 2. Internal imports
+
+// 3. Types
+
+// 4. Named function component
+function Header({
+  searchValue,
+  selectedUsers,
+  onClose,
+  onSearchChange,
+  onRemoveUser
+}) {
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  const pageTitle = (0, _localization.useString)('amity_chat_add_member_title');
+  const searchPlaceholder = (0, _localization.useString)('amity_chat_search_placeholder');
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(_TopBar.TopBar, {
+    title: pageTitle,
+    leadingType: "close",
+    onLeading: onClose
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.searchBar
+  }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
+    value: searchValue,
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    accessibilityLabel: searchPlaceholder
+  })), /*#__PURE__*/React.createElement(_SelectedUsersBar.SelectedUsersBar, {
+    users: selectedUsers,
+    onRemoveUser: onRemoveUser
+  }));
+}
+//# sourceMappingURL=Header.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_TopBar","_SelectedUsersBar","_SearchInput","_localization","_styles","Header","searchValue","selectedUsers","onClose","onSearchChange","onRemoveUser","styles","useStyles","pageTitle","useString","searchPlaceholder","React","createElement","View","style","header","TopBar","title","leadingType","onLeading","searchBar","SearchInput","value","onChange","placeholder","accessibilityLabel","SelectedUsersBar","users"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/Header/Header.tsx"],"mappings":";;;;;;AAKA,IAAAA,YAAA,GAAAC,OAAA;AAGA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAEA;;AAGA;;AAOA;;AASA;AACO,SAASM,MAAMA,CAAC;EACrBC,WAAW;EACXC,aAAa;EACbC,OAAO;EACPC,cAAc;EACdC;AACW,CAAC,EAAE;EACd,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAC9B,MAAMC,SAAS,GAAG,IAAAC,uBAAS,EAAC,6BAA6B,CAAC;EAC1D,MAAMC,iBAAiB,GAAG,IAAAD,uBAAS,EAAC,+BAA+B,CAAC;EAEpE,oBACEE,KAAA,CAAAC,aAAA,CAACnB,YAAA,CAAAoB,IAAI;IAACC,KAAK,EAAER,MAAM,CAACS;EAAO,gBACzBJ,KAAA,CAAAC,aAAA,CAACjB,OAAA,CAAAqB,MAAM;IAACC,KAAK,EAAET,SAAU;IAACU,WAAW,EAAC,OAAO;IAACC,SAAS,EAAEhB;EAAQ,CAAE,CAAC,eACpEQ,KAAA,CAAAC,aAAA,CAACnB,YAAA,CAAAoB,IAAI;IAACC,KAAK,EAAER,MAAM,CAACc;EAAU,gBAC5BT,KAAA,CAAAC,aAAA,CAACf,YAAA,CAAAwB,WAAW;IACVC,KAAK,EAAErB,WAAY;IACnBsB,QAAQ,EAAEnB,cAAe;IACzBoB,WAAW,EAAEd,iBAAkB;IAC/Be,kBAAkB,EAAEf;EAAkB,CACvC,CACG,CAAC,eACPC,KAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAA8B,gBAAgB;IAACC,KAAK,EAAEzB,aAAc;IAACG,YAAY,EAAEA;EAAa,CAAE,CACjE,CAAC;AAEX","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/Header/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function () {
+    return _Header.Header;
+  }
+});
+var _Header = require("./Header");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Header","require"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/Header/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/Header/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../../../../../../core/design/theme/useToken");
+var _amityColorTokens = require("../../../../../../../../core/design/tokens/amity-color-tokens");
+// Styles for the add-member Header — ported from AmityUiKitWeb Header.module.css.
+// Column; search bar padding 0.5rem 1rem → 8/16.
+
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const styles = _reactNative.StyleSheet.create({
+    header: {
+      flexDirection: 'column',
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    searchBar: {
+      paddingVertical: 8,
+      paddingHorizontal: 16
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/Header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","token","useToken","styles","StyleSheet","create","header","flexDirection","backgroundColor","AmityColorToken","SurfacePageBackgroundDefault","searchBar","paddingVertical","paddingHorizontal","exports"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/Header/styles.ts"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AALA;AACA;;AAMO,MAAMG,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,MAAM,EAAE;MACNC,aAAa,EAAE,QAAQ;MACvBC,eAAe,EAAEP,KAAK,CAACQ,iCAAe,CAACC,4BAA4B;IACrE,CAAC;IACDC,SAAS,EAAE;MACTC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE;IACrB;EACF,CAAC,CAAC;EAEF,OAAO;IAAEV,MAAM;IAAEF;EAAM,CAAC;AAC1B,CAAC;AAACa,OAAA,CAAAd,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/SelectedUsersBar/SelectedUsersBar.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedUsersBar = SelectedUsersBar;
+var _reactNative = require("react-native");
+var _SelectedMember = require("../../../../../features/shared/components/SelectedMember");
+var _styles = require("./styles");
+// SelectedUsersBar — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/SelectedUsersBar (web reuses
+// that same component in the add-member Header). A horizontal scroller of
+// chosen-member tiles, reusing the shared RN `SelectedMember` element, with a
+// full-bleed divider below it (web `selectedUsersBar__divider`, line-divider-post
+// -default) separating the selected row from the member list. Renders nothing
+// when no users are selected (as on web).
+
+// 1. React / RN imports
+
+// 2. Internal imports
+
+// 3. Types
+
+// 4. Named function component
+function SelectedUsersBar({
+  users,
+  onRemoveUser
+}) {
+  const {
+    styles
+  } = (0, _styles.useStyles)();
+  if (users.length === 0) return null;
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: styles.list
+  }, users.map(user => /*#__PURE__*/React.createElement(_SelectedMember.SelectedMember, {
+    key: user.userId,
+    user: user,
+    onRemove: onRemoveUser
+  }))), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.divider
+  }));
+}
+//# sourceMappingURL=SelectedUsersBar.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/SelectedUsersBar/SelectedUsersBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_SelectedMember","_styles","SelectedUsersBar","users","onRemoveUser","styles","useStyles","length","React","createElement","View","style","container","ScrollView","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","list","map","user","SelectedMember","key","userId","onRemove","divider"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/SelectedUsersBar/SelectedUsersBar.tsx"],"mappings":";;;;;;AASA,IAAAA,YAAA,GAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAbA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA;;AAIA;;AAMA;AACO,SAASG,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAE9B,IAAIH,KAAK,CAACI,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAEnC,oBACEC,KAAA,CAAAC,aAAA,CAACX,YAAA,CAAAY,IAAI;IAACC,KAAK,EAAEN,MAAM,CAACO;EAAU,gBAC5BJ,KAAA,CAAAC,aAAA,CAACX,YAAA,CAAAe,UAAU;IACTC,UAAU;IACVC,8BAA8B,EAAE,KAAM;IACtCC,qBAAqB,EAAEX,MAAM,CAACY;EAAK,GAElCd,KAAK,CAACe,GAAG,CAAEC,IAAI,iBACdX,KAAA,CAAAC,aAAA,CAACT,eAAA,CAAAoB,cAAc;IACbC,GAAG,EAAEF,IAAI,CAACG,MAAO;IACjBH,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEnB;EAAa,CACxB,CACF,CACS,CAAC,eACbI,KAAA,CAAAC,aAAA,CAACX,YAAA,CAAAY,IAAI;IAACC,KAAK,EAAEN,MAAM,CAACmB;EAAQ,CAAE,CAC1B,CAAC;AAEX","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/SelectedUsersBar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectedUsersBar", {
+  enumerable: true,
+  get: function () {
+    return _SelectedUsersBar.SelectedUsersBar;
+  }
+});
+var _SelectedUsersBar = require("./SelectedUsersBar");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/SelectedUsersBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_SelectedUsersBar","require"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/SelectedUsersBar/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/social/features/chat/features/group/add-member/components/SelectedUsersBar/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _reactNative = require("react-native");
+var _useToken = require("../../../../../../../../core/design/theme/useToken");
+var _amityColorTokens = require("../../../../../../../../core/design/tokens/amity-color-tokens");
+// Styles for SelectedUsersBar — ported from AmityUiKitWeb SelectedUsersBar.module.css.
+// Horizontal list gap 0.25rem → 4, padding 0.5rem → 8, divider height 0.0625rem → 1.
+// The separator is a full-bleed child View (web `selectedUsersBar__divider`),
+// matching the select-member sibling — not a container borderBottom.
+
+const useStyles = () => {
+  const token = (0, _useToken.useToken)();
+  const styles = _reactNative.StyleSheet.create({
+    container: {
+      backgroundColor: token(_amityColorTokens.AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    list: {
+      flexDirection: 'row',
+      gap: 4,
+      padding: 8
+    },
+    divider: {
+      height: 1,
+      backgroundColor: token(_amityColorTokens.AmityColorToken.LineDividerPostDefault)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+exports.useStyles = useStyles;
+//# sourceMappingURL=styles.js.map

package/lib/commonjs/social/features/chat/features/group/add-member/components/SelectedUsersBar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_useToken","_amityColorTokens","useStyles","token","useToken","styles","StyleSheet","create","container","backgroundColor","AmityColorToken","SurfacePageBackgroundDefault","list","flexDirection","gap","padding","divider","height","LineDividerPostDefault","exports"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/SelectedUsersBar/styles.ts"],"mappings":";;;;;;AAKA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAPA;AACA;AACA;AACA;;AAMO,MAAMG,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAExB,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,eAAe,EAAEN,KAAK,CAACO,iCAAe,CAACC,4BAA4B;IACrE,CAAC;IACDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,GAAG,EAAE,CAAC;MACNC,OAAO,EAAE;IACX,CAAC;IACDC,OAAO,EAAE;MACPC,MAAM,EAAE,CAAC;MACTR,eAAe,EAAEN,KAAK,CAACO,iCAAe,CAACQ,sBAAsB;IAC/D;EACF,CAAC,CAAC;EAEF,OAAO;IAAEb,MAAM;IAAEF;EAAM,CAAC;AAC1B,CAAC;AAACgB,OAAA,CAAAjB,SAAA,GAAAA,SAAA","ignoreList":[]}