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

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

@@ -0,0 +1,66 @@
+// Header — select-group-member header. Ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/Header. Composes the shared
+// TopBar (back + a trailing "Next" button) over a search field and the
+// SelectedUsersBar strip.
+//
+// RN adaptations from web:
+//   - RN has no `<form>`, so web's `Button.Main type="submit"` becomes a
+//     `Button` (tertiary/sm — the RN analogue of web ghost/primary) wired to an
+//     explicit `onNext` prop.
+//   - Web's `SearchInput` molecule is reused directly.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { TopBar } from '../../../../../elements/TopBar';
+import { Button } from '../../../../../../../../core/design/atoms/Button';
+import { SearchInput } from '../../../../../../../../core/design/molecules/SearchInput';
+import { useString } from '../../../../../../../../core/localization';
+import { SelectedUsersBar } from '../SelectedUsersBar/SelectedUsersBar';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function Header({
+  searchValue,
+  selectedUsers,
+  isFormValid,
+  onClose,
+  onNext,
+  onSearchChange,
+  onRemoveUser
+}) {
+  const {
+    styles
+  } = useStyles();
+  const title = useString('amity_chat_select_members_title');
+  const nextLabel = useString('amity_chat_next');
+  const searchPlaceholder = useString('amity_chat_search_placeholder');
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(TopBar, {
+    title: title,
+    leadingType: "back",
+    onLeading: onClose,
+    trailing: /*#__PURE__*/React.createElement(Button, {
+      hierarchy: "tertiary",
+      size: "sm",
+      label: nextLabel,
+      disabled: !isFormValid,
+      onPress: onNext
+    })
+  }), /*#__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/select-member/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","TopBar","Button","SearchInput","useString","SelectedUsersBar","useStyles","Header","searchValue","selectedUsers","isFormValid","onClose","onNext","onSearchChange","onRemoveUser","styles","title","nextLabel","searchPlaceholder","React","createElement","style","header","leadingType","onLeading","trailing","hierarchy","size","label","disabled","onPress","searchBar","value","onChange","placeholder","accessibilityLabel","users"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/components/Header/Header.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,gCAAgC;AACvD,SAASC,MAAM,QAAQ,kDAAkD;AACzE,SAASC,WAAW,QAAQ,2DAA2D;AACvF,SAASC,SAAS,QAAQ,2CAA2C;AACrE,SAASC,gBAAgB,QAAQ,sCAAsC;AACvE,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAWA;AACA,OAAO,SAASC,MAAMA,CAAC;EACrBC,WAAW;EACXC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,MAAM;EACNC,cAAc;EACdC;AACW,CAAC,EAAE;EACd,MAAM;IAAEC;EAAO,CAAC,GAAGT,SAAS,CAAC,CAAC;EAC9B,MAAMU,KAAK,GAAGZ,SAAS,CAAC,iCAAiC,CAAC;EAC1D,MAAMa,SAAS,GAAGb,SAAS,CAAC,iBAAiB,CAAC;EAC9C,MAAMc,iBAAiB,GAAGd,SAAS,CAAC,+BAA+B,CAAC;EAEpE,oBACEe,KAAA,CAAAC,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEN,MAAM,CAACO;EAAO,gBACzBH,KAAA,CAAAC,aAAA,CAACnB,MAAM;IACLe,KAAK,EAAEA,KAAM;IACbO,WAAW,EAAC,MAAM;IAClBC,SAAS,EAAEb,OAAQ;IACnBc,QAAQ,eACNN,KAAA,CAAAC,aAAA,CAAClB,MAAM;MACLwB,SAAS,EAAC,UAAU;MACpBC,IAAI,EAAC,IAAI;MACTC,KAAK,EAAEX,SAAU;MACjBY,QAAQ,EAAE,CAACnB,WAAY;MACvBoB,OAAO,EAAElB;IAAO,CACjB;EACF,CACF,CAAC,eACFO,KAAA,CAAAC,aAAA,CAACpB,IAAI;IAACqB,KAAK,EAAEN,MAAM,CAACgB;EAAU,gBAC5BZ,KAAA,CAAAC,aAAA,CAACjB,WAAW;IACV6B,KAAK,EAAExB,WAAY;IACnByB,QAAQ,EAAEpB,cAAe;IACzBqB,WAAW,EAAEhB,iBAAkB;IAC/BiB,kBAAkB,EAAEjB;EAAkB,CACvC,CACG,CAAC,eACPC,KAAA,CAAAC,aAAA,CAACf,gBAAgB;IAAC+B,KAAK,EAAE3B,aAAc;IAACK,YAAY,EAAEA;EAAa,CAAE,CACjE,CAAC;AAEX","ignoreList":[]}

package/lib/module/social/features/chat/features/group/select-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/select-member/components/Header/index.js.map

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

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

@@ -0,0 +1,26 @@
+// Styles for the select-group-member Header — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/Header/Header.module.css.
+// Geometry: search bar padding 0.5rem 1rem→8/16. Web `position: sticky` has no
+// RN equivalent and is dropped. Colours via design tokens (no hardcoded hex).
+
+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/select-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/select-member/components/Header/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,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/select-member/components/SelectedUsersBar/SelectedUsersBar.js

@@ -0,0 +1,41 @@
+// SelectedUsersBar — the horizontal strip of chosen members above the user list.
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/
+// SelectedUsersBar. Renders a removable SelectedMember tile per chosen user and
+// a divider below; hides entirely when nothing is selected.
+//
+// RN adaptations from web:
+//   - Web's `overflow-x: auto` flex row → a horizontal ScrollView.
+
+// 1. React / RN imports
+import { ScrollView, View } from 'react-native';
+
+// 2. Internal imports (relative)
+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.selectedUsersBar
+  }, /*#__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/select-member/components/SelectedUsersBar/SelectedUsersBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollView","View","SelectedMember","useStyles","SelectedUsersBar","users","onRemoveUser","styles","length","React","createElement","style","selectedUsersBar","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","list","map","user","key","userId","onRemove","divider"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-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;EAAiB,gBACnCH,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/select-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/select-member/components/SelectedUsersBar/index.js.map

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

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

@@ -0,0 +1,30 @@
+// Styles for SelectedUsersBar — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/SelectedUsersBar/
+// SelectedUsersBar.module.css. Geometry: list gap 0.25rem→4, padding 0.5rem→8,
+// divider height 0.0625rem→1. Colours via design tokens (no hardcoded hex).
+
+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({
+    selectedUsersBar: {
+      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/select-member/components/SelectedUsersBar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","selectedUsersBar","backgroundColor","SurfacePageBackgroundDefault","list","flexDirection","gap","padding","divider","height","LineDividerPostDefault"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-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,gBAAgB,EAAE;MAChBC,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/select-member/components/UserItem/UserItem.js

@@ -0,0 +1,69 @@
+// UserItem — a single selectable-user row in the select-group-member list.
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/UserItem.
+//
+// RN adaptations from web:
+//   - Web resolves the avatar synchronously via `FileRepository.fileUrlWithSize`
+//     from `user.avatar.fileUrl`; RN resolves `user.avatarFileId` through the
+//     shared `useFile` hook, mirroring the conversation/create UserItem.
+//   - Web's core `Avatar` atom → the chat `Avatar.User` element (round, size md).
+//   - The web `BrandBadge` (shown when `user.isBrand`) has no RN design element,
+//     so it is omitted (same decision as the conversation/create UserItem).
+//   - Web renders no press handler here — the row's selection is owned by the
+//     wrapping `Selection.Checkbox`, so this component is purely presentational.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Avatar } from '../../../../../elements/Avatar';
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { Skeleton } from '../../../../../../../../core/design/components/Skeleton';
+import useFile from '../../../../../../../../core/hooks/useFile';
+import { useStyles } from './styles';
+
+// 3. Types
+
+// 4. Named function component
+export function UserItem({
+  user
+}) {
+  const {
+    styles
+  } = useStyles();
+  const displayName = user.displayName ?? user.userId;
+  const avatarUrl = useFile({
+    fileId: user.avatarFileId ?? ''
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.userItem
+  }, /*#__PURE__*/React.createElement(Avatar.User, {
+    avatarUrl: avatarUrl,
+    displayName: displayName,
+    size: "md"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.nameRow
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "bodyBold",
+    style: styles.name,
+    numberOfLines: 1
+  }, displayName)));
+}
+
+// 5. Compound variant — loading skeleton row.
+function UserItemSkeleton() {
+  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
+  }));
+}
+UserItem.Skeleton = UserItemSkeleton;
+//# sourceMappingURL=UserItem.js.map

package/lib/module/social/features/chat/features/group/select-member/components/UserItem/UserItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Avatar","Typography","Skeleton","useFile","useStyles","UserItem","user","styles","displayName","userId","avatarUrl","fileId","avatarFileId","React","createElement","style","userItem","User","size","nameRow","variant","name","numberOfLines","UserItemSkeleton","skeletonRow","circle","width","height"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/components/UserItem/UserItem.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA,SAASC,MAAM,QAAQ,gCAAgC;AACvD,SAASC,UAAU,QAAQ,2DAA2D;AACtF,SAASC,QAAQ,QAAQ,yDAAyD;AAClF,OAAOC,OAAO,MAAM,4CAA4C;AAChE,SAASC,SAAS,QAAQ,UAAU;;AAEpC;;AAKA;AACA,OAAO,SAASC,QAAQA,CAAC;EAAEC;AAAoB,CAAC,EAAE;EAChD,MAAM;IAAEC;EAAO,CAAC,GAAGH,SAAS,CAAC,CAAC;EAC9B,MAAMI,WAAW,GAAGF,IAAI,CAACE,WAAW,IAAIF,IAAI,CAACG,MAAM;EACnD,MAAMC,SAAS,GAAGP,OAAO,CAAC;IAAEQ,MAAM,EAAEL,IAAI,CAACM,YAAY,IAAI;EAAG,CAAC,CAAC;EAE9D,oBACEC,KAAA,CAAAC,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAER,MAAM,CAACS;EAAS,gBAC3BH,KAAA,CAAAC,aAAA,CAACd,MAAM,CAACiB,IAAI;IAACP,SAAS,EAAEA,SAAU;IAACF,WAAW,EAAEA,WAAY;IAACU,IAAI,EAAC;EAAI,CAAE,CAAC,eACzEL,KAAA,CAAAC,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAER,MAAM,CAACY;EAAQ,gBAC1BN,KAAA,CAAAC,aAAA,CAACb,UAAU;IAACmB,OAAO,EAAC,UAAU;IAACL,KAAK,EAAER,MAAM,CAACc,IAAK;IAACC,aAAa,EAAE;EAAE,GACjEd,WACS,CACR,CACF,CAAC;AAEX;;AAEA;AACA,SAASe,gBAAgBA,CAAA,EAAG;EAC1B,MAAM;IAAEhB;EAAO,CAAC,GAAGH,SAAS,CAAC,CAAC;EAC9B,oBACES,KAAA,CAAAC,aAAA,CAACf,IAAI;IAACgB,KAAK,EAAER,MAAM,CAACiB;EAAY,gBAC9BX,KAAA,CAAAC,aAAA,CAACZ,QAAQ;IAACuB,MAAM;IAACC,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,CAAE,CAAC,eAC1Cd,KAAA,CAAAC,aAAA,CAACZ,QAAQ;IAACwB,KAAK,EAAE,GAAI;IAACC,MAAM,EAAE;EAAG,CAAE,CAC/B,CAAC;AAEX;AAEAtB,QAAQ,CAACH,QAAQ,GAAGqB,gBAAgB","ignoreList":[]}

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

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

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

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

package/lib/module/social/features/chat/features/group/select-member/components/UserItem/styles.js

@@ -0,0 +1,43 @@
+// Styles for the select-group-member UserItem — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/UserItem/UserItem.module.css.
+// Geometry: gap 0.5rem→8, name-row gap 0.125rem→2, skeleton padding 0.5rem 1rem→8/16,
+// skeleton height 3.5rem→56. Row padding lives on the wrapping Selection.Checkbox.
+// Colours via design tokens (no hardcoded hex).
+
+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({
+    userItem: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8
+    },
+    nameRow: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2
+    },
+    name: {
+      flexShrink: 1,
+      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/select-member/components/UserItem/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","userItem","flex","flexDirection","alignItems","gap","nameRow","name","flexShrink","color","TextListHeaderDefaultDefault","skeletonRow","paddingVertical","paddingHorizontal","height"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/components/UserItem/styles.ts"],"mappings":"AAAA;AACA;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,QAAQ,EAAE;MACRC,IAAI,EAAE,CAAC;MACPC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPJ,IAAI,EAAE,CAAC;MACPC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE;IACP,CAAC;IACDE,IAAI,EAAE;MACJC,UAAU,EAAE,CAAC;MACbC,KAAK,EAAEX,KAAK,CAACF,eAAe,CAACc,4BAA4B;IAC3D,CAAC;IACDC,WAAW,EAAE;MACXR,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,GAAG,EAAE,CAAC;MACNO,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,EAAE;MACrBC,MAAM,EAAE;IACV;EACF,CAAC,CAAC;EAEF,OAAO;IAAEf,MAAM;IAAED;EAAM,CAAC;AAC1B,CAAC","ignoreList":[]}

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

@@ -0,0 +1,127 @@
+// UserList — the searchable, multi-select user list for the select-group-member
+// step. Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/
+// UserList.
+//
+// RN adaptations from web:
+//   - Web's core `useSearchUserByDisplayName` (react-query) + IntersectionObserver
+//     sentinel → the conversation/create `useSearchUsers` live-collection hook
+//     (reused, not rebuilt) + FlatList `onEndReached`.
+//   - Web's `react-aria` `CheckboxGroup` has no RN equivalent; each row is an
+//     individual `Selection.Checkbox`. Toggling merges into / removes from the
+//     existing `selectedUsers` array so selections made under a previous search
+//     query survive when the visible results change.
+//   - Web's `.userList__row[data-hovered]` background becomes the row's PRESSED
+//     background. `Selection.Checkbox` (a core atom) owns a full-width Pressable
+//     whose style can't be extended, so an outer Pressable owns the toggle + the
+//     pressed background and the inner checkbox is rendered visual-only
+//     (`pointerEvents="none"`) — the transparent checkbox row lets the pressed
+//     background show through.
+//   - Web reads the current user via `useSDK().currentUserId`; RN reads
+//     `Client.getCurrentUser()`.
+//   - Search gate matches web exactly: a 1–2 char (partial) query is suppressed
+//     and shows the prompt; an empty query still browses all users.
+
+// 1. React / RN imports
+
+import { FlatList, Pressable, View } from 'react-native';
+
+// 2. Third-party imports
+import { Client } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports (relative)
+import { Selection } from '../../../../../../../../core/design/atoms/Selection';
+import { EmptyState } from '../../../../../features/shared/components/EmptyState';
+import { UserItem } from '../UserItem/UserItem';
+import { useSearchUsers } from '../../../../conversation/create/hooks/useSearchUsers';
+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;
+
+// 4. Types
+
+// 5. 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;
+  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"
+    });
+  }
+  const selectedIds = new Set(selectedUsers.map(user => user.userId));
+  function handleToggle(user, selected) {
+    if (selected) {
+      if (selectedIds.has(user.userId)) return;
+      onChange([...selectedUsers, user]);
+    } else {
+      onChange(selectedUsers.filter(u => u.userId !== user.userId));
+    }
+  }
+  const footer = isLoadingFirstPage || loading ? /*#__PURE__*/React.createElement(React.Fragment, null, Array.from({
+    length: LIST_SKELETON_ROW_COUNT
+  }).map((_, i) => /*#__PURE__*/React.createElement(UserItem.Skeleton, {
+    key: i
+  }))) : null;
+  return /*#__PURE__*/React.createElement(FlatList, {
+    style: styles.userList,
+    data: visibleUsers,
+    keyExtractor: user => user.userId,
+    renderItem: ({
+      item
+    }) => {
+      const isSelected = selectedIds.has(item.userId);
+      return /*#__PURE__*/React.createElement(Pressable, {
+        onPress: () => handleToggle(item, !isSelected),
+        style: ({
+          pressed
+        }) => pressed ? styles.rowPressed : undefined,
+        accessibilityRole: "checkbox",
+        accessibilityState: {
+          checked: isSelected
+        },
+        accessibilityLabel: item.displayName ?? item.userId
+      }, /*#__PURE__*/React.createElement(View, {
+        pointerEvents: "none"
+      }, /*#__PURE__*/React.createElement(Selection.Checkbox, {
+        isSelected: isSelected
+      }, /*#__PURE__*/React.createElement(UserItem, {
+        user: item
+      }))));
+    },
+    onEndReachedThreshold: 0.7,
+    onEndReached: () => {
+      if (hasNextPage && !isLoadingFirstPage && !loading) loadMore();
+    },
+    ListFooterComponent: footer
+  });
+}
+//# sourceMappingURL=UserList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["FlatList","Pressable","View","Client","Selection","EmptyState","UserItem","useSearchUsers","useStyles","LIST_PAGE_LIMIT","LIST_SKELETON_ROW_COUNT","SEARCH_MIN_QUERY_LENGTH","UserList","searchText","selectedUsers","onChange","_Client$getCurrentUse","styles","currentUserId","getCurrentUser","userId","trimmed","trim","isPartialQuery","length","users","loading","hasNextPage","loadMore","displayName","limit","enabled","isLoadingFirstPage","React","createElement","variant","visibleUsers","filter","user","selectedIds","Set","map","handleToggle","selected","has","u","footer","Fragment","Array","from","_","i","Skeleton","key","style","userList","data","keyExtractor","renderItem","item","isSelected","onPress","pressed","rowPressed","undefined","accessibilityRole","accessibilityState","checked","accessibilityLabel","pointerEvents","Checkbox","onEndReachedThreshold","onEndReached","ListFooterComponent"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/components/UserList/UserList.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,SAASA,QAAQ,EAAEC,SAAS,EAAEC,IAAI,QAAQ,cAAc;;AAExD;AACA,SAASC,MAAM,QAAQ,8BAA8B;;AAErD;AACA,SAASC,SAAS,QAAQ,qDAAqD;AAC/E,SAASC,UAAU,QAAQ,sDAAsD;AACjF,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,cAAc,QAAQ,sDAAsD;AACrF,SAASC,SAAS,QAAQ,UAAU;;AAEpC;AACA,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,CAAC;AACjC,MAAMC,uBAAuB,GAAG,CAAC;;AAEjC;;AAOA;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,UAAU;EACVC,aAAa;EACbC;AACa,CAAC,EAAE;EAAA,IAAAC,qBAAA;EAChB,MAAM;IAAEC;EAAO,CAAC,GAAGT,SAAS,CAAC,CAAC;EAC9B,MAAMU,aAAa,IAAAF,qBAAA,GAAGb,MAAM,CAACgB,cAAc,CAAC,CAAC,cAAAH,qBAAA,uBAAvBA,qBAAA,CAAyBI,MAAM;EAErD,MAAMC,OAAO,GAAGR,UAAU,CAACS,IAAI,CAAC,CAAC;EACjC,MAAMC,cAAc,GAClBF,OAAO,CAACG,MAAM,GAAG,CAAC,IAAIH,OAAO,CAACG,MAAM,GAAGb,uBAAuB;EAEhE,MAAM;IAAEc,KAAK;IAAEC,OAAO;IAAEC,WAAW;IAAEC;EAAS,CAAC,GAAGrB,cAAc,CAAC;IAC/DsB,WAAW,EAAEhB,UAAU;IACvBiB,KAAK,EAAErB,eAAe;IACtBsB,OAAO,EAAE,CAACR;EACZ,CAAC,CAAC;EAEF,MAAMS,kBAAkB,GAAGN,OAAO,IAAID,KAAK,CAACD,MAAM,KAAK,CAAC;EAExD,IAAID,cAAc,EAAE;IAClB,oBAAOU,KAAA,CAAAC,aAAA,CAAC7B,UAAU;MAAC8B,OAAO,EAAC;IAAQ,CAAE,CAAC;EACxC;EAEA,MAAMC,YAAY,GAAGX,KAAK,CAACY,MAAM,CAAEC,IAAI,IAAKA,IAAI,CAAClB,MAAM,KAAKF,aAAa,CAAC;EAE1E,IAAIkB,YAAY,CAACZ,MAAM,KAAK,CAAC,IAAI,CAACE,OAAO,EAAE;IACzC,oBAAOO,KAAA,CAAAC,aAAA,CAAC7B,UAAU;MAAC8B,OAAO,EAAC;IAAY,CAAE,CAAC;EAC5C;EAEA,MAAMI,WAAW,GAAG,IAAIC,GAAG,CAAC1B,aAAa,CAAC2B,GAAG,CAAEH,IAAI,IAAKA,IAAI,CAAClB,MAAM,CAAC,CAAC;EAErE,SAASsB,YAAYA,CAACJ,IAAgB,EAAEK,QAAiB,EAAE;IACzD,IAAIA,QAAQ,EAAE;MACZ,IAAIJ,WAAW,CAACK,GAAG,CAACN,IAAI,CAAClB,MAAM,CAAC,EAAE;MAClCL,QAAQ,CAAC,CAAC,GAAGD,aAAa,EAAEwB,IAAI,CAAC,CAAC;IACpC,CAAC,MAAM;MACLvB,QAAQ,CAACD,aAAa,CAACuB,MAAM,CAAEQ,CAAC,IAAKA,CAAC,CAACzB,MAAM,KAAKkB,IAAI,CAAClB,MAAM,CAAC,CAAC;IACjE;EACF;EAEA,MAAM0B,MAA2B,GAC/Bd,kBAAkB,IAAIN,OAAO,gBAC3BO,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAc,QAAA,QACGC,KAAK,CAACC,IAAI,CAAC;IAAEzB,MAAM,EAAEd;EAAwB,CAAC,CAAC,CAAC+B,GAAG,CAAC,CAACS,CAAC,EAAEC,CAAC,kBACxDlB,KAAA,CAAAC,aAAA,CAAC5B,QAAQ,CAAC8C,QAAQ;IAACC,GAAG,EAAEF;EAAE,CAAE,CAC7B,CACD,CAAC,GACD,IAAI;EAEV,oBACElB,KAAA,CAAAC,aAAA,CAAClC,QAAQ;IACPsD,KAAK,EAAErC,MAAM,CAACsC,QAAS;IACvBC,IAAI,EAAEpB,YAAa;IACnBqB,YAAY,EAAGnB,IAAI,IAAKA,IAAI,CAAClB,MAAO;IACpCsC,UAAU,EAAEA,CAAC;MAAEC;IAAK,CAAC,KAAK;MACxB,MAAMC,UAAU,GAAGrB,WAAW,CAACK,GAAG,CAACe,IAAI,CAACvC,MAAM,CAAC;MAC/C,oBACEa,KAAA,CAAAC,aAAA,CAACjC,SAAS;QACR4D,OAAO,EAAEA,CAAA,KAAMnB,YAAY,CAACiB,IAAI,EAAE,CAACC,UAAU,CAAE;QAC/CN,KAAK,EAAEA,CAAC;UAAEQ;QAAQ,CAAC,KAAMA,OAAO,GAAG7C,MAAM,CAAC8C,UAAU,GAAGC,SAAW;QAClEC,iBAAiB,EAAC,UAAU;QAC5BC,kBAAkB,EAAE;UAAEC,OAAO,EAAEP;QAAW,CAAE;QAC5CQ,kBAAkB,EAAET,IAAI,CAAC9B,WAAW,IAAI8B,IAAI,CAACvC;MAAO,gBAEpDa,KAAA,CAAAC,aAAA,CAAChC,IAAI;QAACmE,aAAa,EAAC;MAAM,gBACxBpC,KAAA,CAAAC,aAAA,CAAC9B,SAAS,CAACkE,QAAQ;QAACV,UAAU,EAAEA;MAAW,gBACzC3B,KAAA,CAAAC,aAAA,CAAC5B,QAAQ;QAACgC,IAAI,EAAEqB;MAAK,CAAE,CACL,CAChB,CACG,CAAC;IAEhB,CAAE;IACFY,qBAAqB,EAAE,GAAI;IAC3BC,YAAY,EAAEA,CAAA,KAAM;MAClB,IAAI7C,WAAW,IAAI,CAACK,kBAAkB,IAAI,CAACN,OAAO,EAAEE,QAAQ,CAAC,CAAC;IAChE,CAAE;IACF6C,mBAAmB,EAAE3B;EAAO,CAC7B,CAAC;AAEN","ignoreList":[]}

package/lib/module/social/features/chat/features/group/select-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/select-member/components/UserList/index.js.map

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

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

@@ -0,0 +1,24 @@
+// Styles for the select-group-member UserList — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/UserList/UserList.module.css.
+// The web list is a flex column; RN uses a FlatList that fills its parent.
+// Web's `.userList__row[data-hovered]` background maps to the RN row's PRESSED
+// background (same `surface-list-default-hover` token).
+
+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
+    },
+    rowPressed: {
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultHover)
+    }
+  });
+  return {
+    styles
+  };
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","useToken","AmityColorToken","useStyles","token","styles","create","userList","flex","rowPressed","backgroundColor","SurfaceListDefaultHover"],"sourceRoot":"../../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/components/UserList/styles.ts"],"mappings":"AAAA;AACA;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,QAAQ,EAAE;MACRC,IAAI,EAAE;IACR,CAAC;IACDC,UAAU,EAAE;MACVC,eAAe,EAAEN,KAAK,CAACF,eAAe,CAACS,uBAAuB;IAChE;EACF,CAAC,CAAC;EAEF,OAAO;IAAEN;EAAO,CAAC;AACnB,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["Header","SelectedUsersBar","UserItem","UserList"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/components/index.ts"],"mappings":"AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,gBAAgB,QAAQ,qCAAqC;AACtE,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB","ignoreList":[]}

package/lib/module/social/features/chat/features/group/select-member/constants/index.js

@@ -0,0 +1,4 @@
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/constants.
+// The maximum number of members a group chat may contain.
+export const MEMBER_MAX_COUNT = 1000;
+//# sourceMappingURL=index.js.map

package/lib/module/social/features/chat/features/group/select-member/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MEMBER_MAX_COUNT"],"sourceRoot":"../../../../../../../../../src","sources":["social/features/chat/features/group/select-member/constants/index.ts"],"mappings":"AAAA;AACA;AACA,OAAO,MAAMA,gBAAgB,GAAG,IAAI","ignoreList":[]}

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

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

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

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