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

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

@@ -0,0 +1,64 @@
+// 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
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Header } from './components/Header';
+import { AddMemberButton } from './components/AddMemberButton';
+import { UserList } from './components/UserList';
+import { useAddGroupMember } from './hooks/useAddGroupMember';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function AddGroupMember({
+  channelId,
+  onClose
+}) {
+  const {
+    styles
+  } = useStyles();
+  const {
+    searchText,
+    debouncedText,
+    selectedUsers,
+    setSearchText,
+    setSelectedUsers,
+    removeUser,
+    handleClose,
+    handleAddMember,
+    isFormValid
+  } = useAddGroupMember({
+    channelId,
+    onClose
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.addGroupMember
+  }, /*#__PURE__*/React.createElement(Header, {
+    searchValue: searchText,
+    selectedUsers: selectedUsers,
+    onClose: handleClose,
+    onSearchChange: setSearchText,
+    onRemoveUser: removeUser
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.list
+  }, /*#__PURE__*/React.createElement(UserList, {
+    searchText: debouncedText,
+    selectedUsers: selectedUsers,
+    onChange: setSelectedUsers
+  })), /*#__PURE__*/React.createElement(AddMemberButton, {
+    isDisabled: !isFormValid,
+    onSubmit: handleAddMember
+  }));
+}
+//# sourceMappingURL=AddGroupMember.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Header","AddMemberButton","UserList","useAddGroupMember","useStyles","AddGroupMember","channelId","onClose","styles","searchText","debouncedText","selectedUsers","setSearchText","setSelectedUsers","removeUser","handleClose","handleAddMember","isFormValid","React","createElement","style","addGroupMember","searchValue","onSearchChange","onRemoveUser","list","onChange","isDisabled","onSubmit"],"sourceRoot":"../../../../../../../../src","sources":["social/features/chat/features/group/add-member/AddGroupMember.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAMA;AACA,OAAO,SAASC,cAAcA,CAAC;EAAEC,SAAS;EAAEC;AAA6B,CAAC,EAAE;EAC1E,MAAM;IAAEC;EAAO,CAAC,GAAGJ,SAAS,CAAC,CAAC;EAC9B,MAAM;IACJK,UAAU;IACVC,aAAa;IACbC,aAAa;IACbC,aAAa;IACbC,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACXC,eAAe;IACfC;EACF,CAAC,GAAGd,iBAAiB,CAAC;IAAEG,SAAS;IAAEC;EAAQ,CAAC,CAAC;EAE7C,oBACEW,KAAA,CAAAC,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEZ,MAAM,CAACa;EAAe,gBACjCH,KAAA,CAAAC,aAAA,CAACnB,MAAM;IACLsB,WAAW,EAAEb,UAAW;IACxBE,aAAa,EAAEA,aAAc;IAC7BJ,OAAO,EAAEQ,WAAY;IACrBQ,cAAc,EAAEX,aAAc;IAC9BY,YAAY,EAAEV;EAAW,CAC1B,CAAC,eACFI,KAAA,CAAAC,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEZ,MAAM,CAACiB;EAAK,gBACvBP,KAAA,CAAAC,aAAA,CAACjB,QAAQ;IACPO,UAAU,EAAEC,aAAc;IAC1BC,aAAa,EAAEA,aAAc;IAC7Be,QAAQ,EAAEb;EAAiB,CAC5B,CACG,CAAC,eACPK,KAAA,CAAAC,aAAA,CAAClB,eAAe;IAAC0B,UAAU,EAAE,CAACV,WAAY;IAACW,QAAQ,EAAEZ;EAAgB,CAAE,CACnE,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,37 @@
+// 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
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Button } from '../../../../../../../../core/design/atoms/Button';
+import { useString } from '../../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function AddMemberButton({
+  isDisabled,
+  onSubmit
+}) {
+  const {
+    styles
+  } = useStyles();
+  const buttonLabel = useString('amity_chat_add_member_button');
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Button, {
+    hierarchy: "primary",
+    size: "lg",
+    fullWidth: true,
+    label: buttonLabel,
+    disabled: isDisabled,
+    onPress: onSubmit
+  }));
+}
+//# sourceMappingURL=AddMemberButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Button","useString","useStyles","AddMemberButton","isDisabled","onSubmit","styles","buttonLabel","React","createElement","style","container","hierarchy","size","fullWidth","label","disabled","onPress"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/AddMemberButton/AddMemberButton.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,kDAAkD;AACzE,SAASC,SAAS,QAAQ,2CAA2C;AACrE,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAMA;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,UAAU;EACVC;AACoB,CAAC,EAAE;EACvB,MAAM;IAAEC;EAAO,CAAC,GAAGJ,SAAS,CAAC,CAAC;EAC9B,MAAMK,WAAW,GAAGN,SAAS,CAAC,8BAA8B,CAAC;EAC7D,oBACEO,KAAA,CAAAC,aAAA,CAACV,IAAI;IAACW,KAAK,EAAEJ,MAAM,CAACK;EAAU,gBAC5BH,KAAA,CAAAC,aAAA,CAACT,MAAM;IACLY,SAAS,EAAC,SAAS;IACnBC,IAAI,EAAC,IAAI;IACTC,SAAS;IACTC,KAAK,EAAER,WAAY;IACnBS,QAAQ,EAAEZ,UAAW;IACrBa,OAAO,EAAEZ;EAAS,CACnB,CACG,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export { AddMemberButton } from './AddMemberButton';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AddMemberButton"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/AddMemberButton/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB","ignoreList":[]}

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

@@ -0,0 +1,23 @@
+// Styles for AddMemberButton — ported from AmityUiKitWeb AddMemberButton.module.css.
+// Padding 1rem → 16, top divider, page background.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    container: {
+      flexShrink: 0,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+      borderTopWidth: 1,
+      borderTopColor: token(AmityColorToken.LineDividerPostDefault)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","container","flexShrink","padding","backgroundColor","SurfacePageBackgroundDefault","borderTopWidth","borderTopColor","LineDividerPostDefault"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/AddMemberButton/styles.ts"],"mappings":"AAAA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oDAAoD;AAC7E,SAASC,eAAe,QAAQ,+DAA+D;AAE/F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,UAAU,EAAE,CAAC;MACbC,OAAO,EAAE,EAAE;MACXC,eAAe,EAAEN,KAAK,CAACF,eAAe,CAACS,4BAA4B,CAAC;MACpEC,cAAc,EAAE,CAAC;MACjBC,cAAc,EAAET,KAAK,CAACF,eAAe,CAACY,sBAAsB;IAC9D;EACF,CAAC,CAAC;EAEF,OAAO;IAAET,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,48 @@
+// 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
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { TopBar } from '../../../../../elements/TopBar';
+import { SelectedUsersBar } from '../SelectedUsersBar';
+import { SearchInput } from '../../../../../../../../core/design/molecules/SearchInput';
+import { useString } from '../../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function Header({
+  searchValue,
+  selectedUsers,
+  onClose,
+  onSearchChange,
+  onRemoveUser
+}) {
+  const {
+    styles
+  } = useStyles();
+  const pageTitle = useString('amity_chat_add_member_title');
+  const searchPlaceholder = useString('amity_chat_search_placeholder');
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(TopBar, {
+    title: pageTitle,
+    leadingType: "close",
+    onLeading: onClose
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.searchBar
+  }, /*#__PURE__*/React.createElement(SearchInput, {
+    value: searchValue,
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    accessibilityLabel: searchPlaceholder
+  })), /*#__PURE__*/React.createElement(SelectedUsersBar, {
+    users: selectedUsers,
+    onRemoveUser: onRemoveUser
+  }));
+}
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","TopBar","SelectedUsersBar","SearchInput","useString","useStyles","Header","searchValue","selectedUsers","onClose","onSearchChange","onRemoveUser","styles","pageTitle","searchPlaceholder","React","createElement","style","header","title","leadingType","onLeading","searchBar","value","onChange","placeholder","accessibilityLabel","users"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/Header/Header.tsx"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,gCAAgC;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,WAAW,QAAQ,2DAA2D;AACvF,SAASC,SAAS,QAAQ,2CAA2C;AACrE,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AASA;AACA,OAAO,SAASC,MAAMA,CAAC;EACrBC,WAAW;EACXC,aAAa;EACbC,OAAO;EACPC,cAAc;EACdC;AACW,CAAC,EAAE;EACd,MAAM;IAAEC;EAAO,CAAC,GAAGP,SAAS,CAAC,CAAC;EAC9B,MAAMQ,SAAS,GAAGT,SAAS,CAAC,6BAA6B,CAAC;EAC1D,MAAMU,iBAAiB,GAAGV,SAAS,CAAC,+BAA+B,CAAC;EAEpE,oBACEW,KAAA,CAAAC,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAEL,MAAM,CAACM;EAAO,gBACzBH,KAAA,CAAAC,aAAA,CAACf,MAAM;IAACkB,KAAK,EAAEN,SAAU;IAACO,WAAW,EAAC,OAAO;IAACC,SAAS,EAAEZ;EAAQ,CAAE,CAAC,eACpEM,KAAA,CAAAC,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAEL,MAAM,CAACU;EAAU,gBAC5BP,KAAA,CAAAC,aAAA,CAACb,WAAW;IACVoB,KAAK,EAAEhB,WAAY;IACnBiB,QAAQ,EAAEd,cAAe;IACzBe,WAAW,EAAEX,iBAAkB;IAC/BY,kBAAkB,EAAEZ;EAAkB,CACvC,CACG,CAAC,eACPC,KAAA,CAAAC,aAAA,CAACd,gBAAgB;IAACyB,KAAK,EAAEnB,aAAc;IAACG,YAAY,EAAEA;EAAa,CAAE,CACjE,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Header"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/Header/index.ts"],"mappings":"AAAA,SAASA,MAAM,QAAQ,UAAU","ignoreList":[]}

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

@@ -0,0 +1,24 @@
+// Styles for the add-member Header — ported from AmityUiKitWeb Header.module.css.
+// Column; search bar padding 0.5rem 1rem → 8/16.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    header: {
+      flexDirection: 'column',
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    searchBar: {
+      paddingVertical: 8,
+      paddingHorizontal: 16
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","header","flexDirection","backgroundColor","SurfacePageBackgroundDefault","searchBar","paddingVertical","paddingHorizontal"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/Header/styles.ts"],"mappings":"AAAA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oDAAoD;AAC7E,SAASC,eAAe,QAAQ,+DAA+D;AAE/F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,MAAM,EAAE;MACNC,aAAa,EAAE,QAAQ;MACvBC,eAAe,EAAEL,KAAK,CAACF,eAAe,CAACQ,4BAA4B;IACrE,CAAC;IACDC,SAAS,EAAE;MACTC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE;IACrB;EACF,CAAC,CAAC;EAEF,OAAO;IAAER,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+// 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
+import { ScrollView, View } from 'react-native';
+
+// 2. Internal imports
+import { SelectedMember } from '../../../../../features/shared/components/SelectedMember';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function SelectedUsersBar({
+  users,
+  onRemoveUser
+}) {
+  const {
+    styles
+  } = useStyles();
+  if (users.length === 0) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    contentContainerStyle: styles.list
+  }, users.map(user => /*#__PURE__*/React.createElement(SelectedMember, {
+    key: user.userId,
+    user: user,
+    onRemove: onRemoveUser
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: styles.divider
+  }));
+}
+//# sourceMappingURL=SelectedUsersBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollView","View","SelectedMember","useStyles","SelectedUsersBar","users","onRemoveUser","styles","length","React","createElement","style","container","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","list","map","user","key","userId","onRemove","divider"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/SelectedUsersBar/SelectedUsersBar.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;;AAE/C;AACA,SAASC,cAAc,QAAQ,0DAA0D;AACzF,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAMA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC;AACqB,CAAC,EAAE;EACxB,MAAM;IAAEC;EAAO,CAAC,GAAGJ,SAAS,CAAC,CAAC;EAE9B,IAAIE,KAAK,CAACG,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAEnC,oBACEC,KAAA,CAAAC,aAAA,CAACT,IAAI;IAACU,KAAK,EAAEJ,MAAM,CAACK;EAAU,gBAC5BH,KAAA,CAAAC,aAAA,CAACV,UAAU;IACTa,UAAU;IACVC,8BAA8B,EAAE,KAAM;IACtCC,qBAAqB,EAAER,MAAM,CAACS;EAAK,GAElCX,KAAK,CAACY,GAAG,CAAEC,IAAI,iBACdT,KAAA,CAAAC,aAAA,CAACR,cAAc;IACbiB,GAAG,EAAED,IAAI,CAACE,MAAO;IACjBF,IAAI,EAAEA,IAAK;IACXG,QAAQ,EAAEf;EAAa,CACxB,CACF,CACS,CAAC,eACbG,KAAA,CAAAC,aAAA,CAACT,IAAI;IAACU,KAAK,EAAEJ,MAAM,CAACe;EAAQ,CAAE,CAC1B,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+export { SelectedUsersBar } from './SelectedUsersBar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["SelectedUsersBar"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/SelectedUsersBar/index.ts"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

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

@@ -0,0 +1,30 @@
+// 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.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault)
+    },
+    list: {
+      flexDirection: 'row',
+      gap: 4,
+      padding: 8
+    },
+    divider: {
+      height: 1,
+      backgroundColor: token(AmityColorToken.LineDividerPostDefault)
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","container","backgroundColor","SurfacePageBackgroundDefault","list","flexDirection","gap","padding","divider","height","LineDividerPostDefault"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/SelectedUsersBar/styles.ts"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oDAAoD;AAC7E,SAASC,eAAe,QAAQ,+DAA+D;AAE/F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,SAAS,EAAE;MACTC,eAAe,EAAEJ,KAAK,CAACF,eAAe,CAACO,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;MACTP,eAAe,EAAEJ,KAAK,CAACF,eAAe,CAACc,sBAAsB;IAC/D;EACF,CAAC,CAAC;EAEF,OAAO;IAAEX,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

package/lib/module/social/features/chat/features/group/add-member/components/UserList/UserList.js

@@ -0,0 +1,147 @@
+// UserList — the multi-select searchable user list for add-member.
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/UserList
+// (the multi-select variant AddGroupMember consumes), not the single-select
+// create-conversation list.
+//
+// RN adaptations: web's react-aria CheckboxGroup + IntersectionObserver sentinel
+// → RN `Selection.Checkbox` rows in a FlatList with `onEndReached`; web's
+// `useSearchUserByDisplayName` → the shared `useSearchUsers` live-collection hook
+// (reused from the create flow). The 1–2 char partial-query gate matches web
+// exactly (empty query still browses all).
+
+// 1. React / RN imports
+import { useMemo } from 'react';
+import { FlatList, View } from 'react-native';
+
+// 2. Third-party imports
+import { Client } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports
+import { Selection } from '../../../../../../../../core/design/atoms/Selection';
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { Skeleton } from '../../../../../../../../core/design/components/Skeleton';
+import useFile from '../../../../../../../../core/hooks/useFile';
+import { Avatar } from '../../../../../elements/Avatar';
+import { EmptyState } from '../../../../../features/shared/components/EmptyState';
+import { useSearchUsers } from '../../../../conversation/create/hooks';
+import { useStyles } from './styles';
+
+// Local constants (mirror AmityUiKitWeb v4/chat/constants).
+const LIST_PAGE_LIMIT = 20;
+const LIST_SKELETON_ROW_COUNT = 9;
+const SEARCH_MIN_QUERY_LENGTH = 3;
+
+// 3. Types
+
+// Checkbox row — avatar + display name, toggled via the Selection.Checkbox.
+function UserRow({
+  user,
+  isSelected,
+  onToggle
+}) {
+  const {
+    styles
+  } = useStyles();
+  const displayName = user.displayName ?? user.userId;
+  const avatarUrl = useFile({
+    fileId: user.avatarFileId ?? ''
+  });
+  return /*#__PURE__*/React.createElement(Selection.Checkbox, {
+    isSelected: isSelected,
+    onChange: onToggle,
+    accessibilityLabel: displayName
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.rowContent
+  }, /*#__PURE__*/React.createElement(Avatar.User, {
+    avatarUrl: avatarUrl,
+    displayName: displayName,
+    size: "md"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.name,
+    numberOfLines: 1
+  }, displayName)));
+}
+function UserRowSkeleton() {
+  const {
+    styles
+  } = useStyles();
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.skeletonRow
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    circle: true,
+    width: 40,
+    height: 40
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    width: 140,
+    height: 10
+  }));
+}
+
+// 4. Named function component
+export function UserList({
+  searchText,
+  selectedUsers,
+  onChange
+}) {
+  var _Client$getCurrentUse;
+  const {
+    styles
+  } = useStyles();
+  const currentUserId = (_Client$getCurrentUse = Client.getCurrentUser()) === null || _Client$getCurrentUse === void 0 ? void 0 : _Client$getCurrentUse.userId;
+  const trimmed = searchText.trim();
+  const isPartialQuery = trimmed.length > 0 && trimmed.length < SEARCH_MIN_QUERY_LENGTH;
+  const {
+    users,
+    loading,
+    hasNextPage,
+    loadMore
+  } = useSearchUsers({
+    displayName: searchText,
+    limit: LIST_PAGE_LIMIT,
+    enabled: !isPartialQuery
+  });
+  const isLoadingFirstPage = loading && users.length === 0;
+  const selectedIds = useMemo(() => new Set(selectedUsers.map(u => u.userId)), [selectedUsers]);
+  if (isPartialQuery) {
+    return /*#__PURE__*/React.createElement(EmptyState, {
+      variant: "prompt"
+    });
+  }
+  const visibleUsers = users.filter(user => user.userId !== currentUserId);
+  if (visibleUsers.length === 0 && !loading) {
+    return /*#__PURE__*/React.createElement(EmptyState, {
+      variant: "no-results"
+    });
+  }
+  function toggleUser(user) {
+    if (selectedIds.has(user.userId)) {
+      onChange(selectedUsers.filter(u => u.userId !== user.userId));
+    } else {
+      onChange([...selectedUsers, user]);
+    }
+  }
+  const footer = isLoadingFirstPage || loading ? /*#__PURE__*/React.createElement(React.Fragment, null, Array.from({
+    length: LIST_SKELETON_ROW_COUNT
+  }).map((_, i) => /*#__PURE__*/React.createElement(UserRowSkeleton, {
+    key: i
+  }))) : null;
+  return /*#__PURE__*/React.createElement(FlatList, {
+    style: styles.userList,
+    data: visibleUsers,
+    keyExtractor: user => user.userId,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/React.createElement(UserRow, {
+      user: item,
+      isSelected: selectedIds.has(item.userId),
+      onToggle: () => toggleUser(item)
+    }),
+    onEndReachedThreshold: 0.7,
+    onEndReached: () => {
+      if (hasNextPage && !isLoadingFirstPage && !loading) loadMore();
+    },
+    ListFooterComponent: footer
+  });
+}
+//# sourceMappingURL=UserList.js.map

package/lib/module/social/features/chat/features/group/add-member/components/UserList/UserList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","FlatList","View","Client","Selection","Typography","Skeleton","useFile","Avatar","EmptyState","useSearchUsers","useStyles","LIST_PAGE_LIMIT","LIST_SKELETON_ROW_COUNT","SEARCH_MIN_QUERY_LENGTH","UserRow","user","isSelected","onToggle","styles","displayName","userId","avatarUrl","fileId","avatarFileId","React","createElement","Checkbox","onChange","accessibilityLabel","style","rowContent","User","size","variant","name","numberOfLines","UserRowSkeleton","skeletonRow","circle","width","height","UserList","searchText","selectedUsers","_Client$getCurrentUse","currentUserId","getCurrentUser","trimmed","trim","isPartialQuery","length","users","loading","hasNextPage","loadMore","limit","enabled","isLoadingFirstPage","selectedIds","Set","map","u","visibleUsers","filter","toggleUser","has","footer","Fragment","Array","from","_","i","key","userList","data","keyExtractor","renderItem","item","onEndReachedThreshold","onEndReached","ListFooterComponent"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/UserList/UserList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/social/features/chat/features/group/add-member/components/UserList/index.js

@@ -0,0 +1,2 @@
+export { UserList } from './UserList';
+//# sourceMappingURL=index.js.map

package/lib/module/social/features/chat/features/group/add-member/components/UserList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UserList"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/UserList/index.ts"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,YAAY","ignoreList":[]}

package/lib/module/social/features/chat/features/group/add-member/components/UserList/styles.js

@@ -0,0 +1,41 @@
+// Styles for the add-member UserList — the checkbox rows mirror the create
+// UserItem geometry (gap 8, padding 8/16, height 56).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+export const useStyles = () => {
+  const token = useToken();
+  const styles = StyleSheet.create({
+    userList: {
+      flex: 1
+    },
+    rowContent: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      minWidth: 0
+    },
+    name: {
+      flexShrink: 1,
+      minWidth: 0,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault)
+    },
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      height: 56
+    }
+  });
+  return {
+    styles,
+    token
+  };
+};
+//# sourceMappingURL=styles.js.map

package/lib/module/social/features/chat/features/group/add-member/components/UserList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","userList","flex","rowContent","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","minWidth","name","flexShrink","color","TextListHeaderDefaultDefault","skeletonRow","height"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/UserList/styles.ts"],"mappings":"AAAA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,oDAAoD;AAC7E,SAASC,eAAe,QAAQ,+DAA+D;AAE/F,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,KAAK,GAAGH,QAAQ,CAAC,CAAC;EAExB,MAAMI,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;IAC/BC,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDC,UAAU,EAAE;MACVD,IAAI,EAAE,CAAC;MACPE,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,CAAC;MACNC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,EAAE;MACrBC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,UAAU,EAAE,CAAC;MACbF,QAAQ,EAAE,CAAC;MACXG,KAAK,EAAEd,KAAK,CAACF,eAAe,CAACiB,4BAA4B;IAC3D,CAAC;IACDC,WAAW,EAAE;MACXV,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,CAAC;MACNC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,EAAE;MACrBO,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EAEF,OAAO;IAAEhB,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+export * from './Header';
+export * from './AddMemberButton';
+export * from './UserList';
+export * from './SelectedUsersBar';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/components/index.ts"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,YAAY;AAC1B,cAAc,oBAAoB","ignoreList":[]}

package/lib/module/social/features/chat/features/group/add-member/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useAddGroupMember';
+//# sourceMappingURL=index.js.map

package/lib/module/social/features/chat/features/group/add-member/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/group/add-member/hooks/index.ts"],"mappings":"AAAA,cAAc,qBAAqB","ignoreList":[]}