@college-africa/chat-ui-native 0.1.0

package/dist/hooks/useWebSocketMessages.d.ts

@@ -0,0 +1,24 @@
+/**
+ * useWebSocketMessages - Hook for tracking WebSocket connection status
+ * Phase 6: Real-time updates
+ *
+ * Note: Message handling is already implemented in SDK initialization (utils/sdk.ts)
+ * This hook only provides connection status and event callbacks
+ */
+export interface UseWebSocketMessagesParams {
+    /** Callback when WebSocket connection opens */
+    onConnect?: () => void;
+    /** Callback when WebSocket connection closes */
+    onDisconnect?: () => void;
+    /** Callback when WebSocket error occurs */
+    onError?: (error: Error) => void;
+}
+/**
+ * Hook for tracking WebSocket connection status
+ * Message handling is automatically done by SDK initialization
+ * Returns connection status for UI indicators
+ */
+export declare function useWebSocketMessages({ onConnect, onDisconnect, onError }?: UseWebSocketMessagesParams): {
+    isConnected: boolean;
+};
+//# sourceMappingURL=useWebSocketMessages.d.ts.map

package/dist/hooks/useWebSocketMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebSocketMessages.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebSocketMessages.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,MAAM,WAAW,0BAA0B;IACzC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,YAAY,EACZ,OAAO,EACR,GAAE,0BAA+B;;EA+DjC"}

package/dist/hooks/useWebSocketMessages.js

@@ -0,0 +1,71 @@
+"use strict";
+/**
+ * useWebSocketMessages - Hook for tracking WebSocket connection status
+ * Phase 6: Real-time updates
+ *
+ * Note: Message handling is already implemented in SDK initialization (utils/sdk.ts)
+ * This hook only provides connection status and event callbacks
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebSocketMessages = useWebSocketMessages;
+const react_1 = require("react");
+const sdk_1 = require("../utils/sdk");
+/**
+ * Hook for tracking WebSocket connection status
+ * Message handling is automatically done by SDK initialization
+ * Returns connection status for UI indicators
+ */
+function useWebSocketMessages({ onConnect, onDisconnect, onError } = {}) {
+    const [isConnected, setIsConnected] = (0, react_1.useState)(false);
+    /**
+     * Handle WebSocket open event
+     */
+    const handleOpen = (0, react_1.useCallback)(() => {
+        setIsConnected(true);
+        onConnect?.();
+    }, [onConnect]);
+    /**
+     * Handle WebSocket close event
+     */
+    const handleClose = (0, react_1.useCallback)(() => {
+        setIsConnected(false);
+        onDisconnect?.();
+    }, [onDisconnect]);
+    /**
+     * Handle WebSocket error event
+     */
+    const handleError = (0, react_1.useCallback)((error) => {
+        console.error("[WS] WebSocket error:", error);
+        onError?.(error);
+    }, [onError]);
+    /**
+     * Subscribe to WebSocket connection events
+     */
+    (0, react_1.useEffect)(() => {
+        if (!(0, sdk_1.isSDKInitialized)())
+            return;
+        try {
+            const sdk = (0, sdk_1.getSDK)();
+            // Check initial connection state
+            setIsConnected(sdk.isConnected());
+            // Subscribe to connection events
+            // @ts-ignore
+            sdk.on("open", handleOpen); // @ts-ignore
+            sdk.on("close", handleClose); // @ts-ignore
+            sdk.on("error", handleError);
+            // Cleanup on unmount
+            return () => {
+                // @ts-ignore
+                sdk.off("open", handleOpen); // @ts-ignore
+                sdk.off("close", handleClose); // @ts-ignore
+                sdk.off("error", handleError);
+            };
+        }
+        catch (error) {
+            console.error("Failed to setup WebSocket listeners:", error);
+        }
+    }, [handleOpen, handleClose, handleError]);
+    return {
+        isConnected
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @college-africa/chat-ui-native
+ * React Native chat UI library for College Africa
+ *
+ * Only export utils and object that may be used to embed library or manage data
+ */
+import "event-target-polyfill";
+export { ChatApp } from "./components/ChatApp";
+export type { ChatAppProps } from "./components/ChatApp";
+export { ChatIconButton } from "./components/ChatIconButton";
+export type { ChatIconButtonProps } from "./components/ChatIconButton";
+export { MessageStatus } from "./components/MessageStatus";
+export type { MessageStatusProps } from "./components/MessageStatus";
+export { KeyboardAvoidingContainer } from "./components/KeyboardAvoidingContainer";
+export { getRealm, closeRealm, isRealmInitialized } from "./cache/database";
+export { deleteDatabase, resetCache, logout } from "./cache";
+export { lightTheme, darkTheme, getTheme, useStyleSheet } from "./styles";
+export { initSDK, getSDK, disconnectSDK, isSDKInitialized } from "./utils/sdk";
+export { normaliseError } from "./utils/misc";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAGnF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG1E,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,44 @@
+"use strict";
+/**
+ * @college-africa/chat-ui-native
+ * React Native chat UI library for College Africa
+ *
+ * Only export utils and object that may be used to embed library or manage data
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normaliseError = exports.isSDKInitialized = exports.disconnectSDK = exports.getSDK = exports.initSDK = exports.useStyleSheet = exports.getTheme = exports.darkTheme = exports.lightTheme = exports.logout = exports.resetCache = exports.deleteDatabase = exports.isRealmInitialized = exports.closeRealm = exports.getRealm = exports.KeyboardAvoidingContainer = exports.MessageStatus = exports.ChatIconButton = exports.ChatApp = void 0;
+// Apply polyfills for React Native environment
+require("event-target-polyfill");
+// Main Components
+var ChatApp_1 = require("./components/ChatApp");
+Object.defineProperty(exports, "ChatApp", { enumerable: true, get: function () { return ChatApp_1.ChatApp; } });
+var ChatIconButton_1 = require("./components/ChatIconButton");
+Object.defineProperty(exports, "ChatIconButton", { enumerable: true, get: function () { return ChatIconButton_1.ChatIconButton; } });
+// Chat Components
+var MessageStatus_1 = require("./components/MessageStatus");
+Object.defineProperty(exports, "MessageStatus", { enumerable: true, get: function () { return MessageStatus_1.MessageStatus; } });
+var KeyboardAvoidingContainer_1 = require("./components/KeyboardAvoidingContainer");
+Object.defineProperty(exports, "KeyboardAvoidingContainer", { enumerable: true, get: function () { return KeyboardAvoidingContainer_1.KeyboardAvoidingContainer; } });
+// Cache
+var database_1 = require("./cache/database");
+Object.defineProperty(exports, "getRealm", { enumerable: true, get: function () { return database_1.getRealm; } });
+Object.defineProperty(exports, "closeRealm", { enumerable: true, get: function () { return database_1.closeRealm; } });
+Object.defineProperty(exports, "isRealmInitialized", { enumerable: true, get: function () { return database_1.isRealmInitialized; } });
+var cache_1 = require("./cache");
+Object.defineProperty(exports, "deleteDatabase", { enumerable: true, get: function () { return cache_1.deleteDatabase; } });
+Object.defineProperty(exports, "resetCache", { enumerable: true, get: function () { return cache_1.resetCache; } });
+Object.defineProperty(exports, "logout", { enumerable: true, get: function () { return cache_1.logout; } });
+// Theme
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return styles_1.lightTheme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return styles_1.darkTheme; } });
+Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return styles_1.getTheme; } });
+Object.defineProperty(exports, "useStyleSheet", { enumerable: true, get: function () { return styles_1.useStyleSheet; } });
+// Utilities
+var sdk_1 = require("./utils/sdk");
+Object.defineProperty(exports, "initSDK", { enumerable: true, get: function () { return sdk_1.initSDK; } });
+Object.defineProperty(exports, "getSDK", { enumerable: true, get: function () { return sdk_1.getSDK; } });
+Object.defineProperty(exports, "disconnectSDK", { enumerable: true, get: function () { return sdk_1.disconnectSDK; } });
+Object.defineProperty(exports, "isSDKInitialized", { enumerable: true, get: function () { return sdk_1.isSDKInitialized; } });
+var misc_1 = require("./utils/misc");
+Object.defineProperty(exports, "normaliseError", { enumerable: true, get: function () { return misc_1.normaliseError; } });

package/dist/screens/ChatScreen.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ChatScreen - Navigation screen wrapper for individual chat view with connection status
+ */
+import React from "react";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import type { RootStackParamList } from "../types";
+type Props = NativeStackScreenProps<RootStackParamList, "Chat">;
+export declare function ChatScreen({ route, navigation }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=ChatScreen.d.ts.map

package/dist/screens/ChatScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ChatScreen.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAU7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD,KAAK,KAAK,GAAG,sBAAsB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAoBhE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,qBAqEtD"}

package/dist/screens/ChatScreen.js

@@ -0,0 +1,112 @@
+"use strict";
+/**
+ * ChatScreen - Navigation screen wrapper for individual chat view with connection status
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatScreen = ChatScreen;
+const react_1 = __importStar(require("react"));
+// @ts-ignore - react-native is a peer dependency
+const react_native_1 = require("react-native");
+// @ts-ignore - react-native-paper is a peer dependency
+const react_native_paper_1 = require("react-native-paper");
+const ChatView_1 = require("../components/ChatView");
+const useWebSocket_1 = require("../hooks/useWebSocket");
+const users_1 = require("../cache/actions/users");
+const groups_1 = require("../cache/actions/groups");
+const database_1 = require("../cache/database");
+/**
+ * Connection status indicator component
+ */
+function ConnectionIndicator({ isConnected }) {
+    const theme = (0, react_native_paper_1.useTheme)();
+    if (isConnected)
+        return null;
+    return (<react_native_paper_1.IconButton icon="cloud-off-outline" iconColor={theme.colors.error} size={20} style={styles.indicator}/>);
+}
+function ChatScreen({ route, navigation }) {
+    const { conversationId, isGroup, groupId } = route.params;
+    const { isConnected } = (0, useWebSocket_1.useWebSocket)();
+    const [menuVisible, setMenuVisible] = (0, react_1.useState)(false);
+    const [isJoining, setIsJoining] = (0, react_1.useState)(false);
+    const currentUser = (0, users_1.getCurrentUser)();
+    // Check if user is admin and not a member of the group
+    const isAdmin = currentUser?.role === "admin" || currentUser?.role === "system";
+    const realm = (0, database_1.getRealm)();
+    const group = isGroup && groupId
+        ? realm.objectForPrimaryKey("Group", groupId)
+        : null;
+    const canJoinGroup = isAdmin && isGroup && group && !group.is_member;
+    const handleJoinGroup = async (role) => {
+        if (!groupId)
+            return;
+        setIsJoining(true);
+        setMenuVisible(false);
+        try {
+            await (0, groups_1.joinGroup)(groupId, role);
+        }
+        catch (error) {
+            console.error("Failed to join group:", error);
+            // TODO: Show error toast in Phase 7
+        }
+        finally {
+            setIsJoining(false);
+        }
+    };
+    // Update header to show connection status indicator and join button
+    (0, react_1.useLayoutEffect)(() => {
+        navigation.setOptions({
+            headerRight: () => (<react_native_1.View style={styles.headerRight}>
+          <ConnectionIndicator isConnected={isConnected}/>
+          {canJoinGroup && (<react_native_paper_1.Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={<react_native_paper_1.Button icon="account-plus" onPress={() => setMenuVisible(true)} disabled={isJoining}>
+                  Join
+                </react_native_paper_1.Button>}>
+              <react_native_paper_1.Menu.Item onPress={() => handleJoinGroup("member")} title="as member"/>
+              <react_native_paper_1.Menu.Item onPress={() => handleJoinGroup("moderator")} title="as moderator"/>
+            </react_native_paper_1.Menu>)}
+        </react_native_1.View>)
+        });
+    }, [isConnected, navigation, canJoinGroup, menuVisible, isJoining]);
+    return <ChatView_1.ChatView conversationId={conversationId}/>;
+}
+const styles = react_native_1.StyleSheet.create({
+    indicator: {
+        margin: 0
+    },
+    headerRight: {
+        flexDirection: "row",
+        alignItems: "center"
+    }
+});

package/dist/screens/ConversationsScreen.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ConversationsScreen - Navigation screen wrapper for conversation list
+ */
+import React from "react";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import type { RootStackParamList } from "../types";
+type Props = NativeStackScreenProps<RootStackParamList, "Conversations">;
+export declare function ConversationsScreen({ navigation }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=ConversationsScreen.d.ts.map

package/dist/screens/ConversationsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationsScreen.d.ts","sourceRoot":"","sources":["../../src/screens/ConversationsScreen.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,KAAK,EAAE,kBAAkB,EAAoB,MAAM,UAAU,CAAC;AAErE,KAAK,KAAK,GAAG,sBAAsB,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;AAEzE,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,qBAoBxD"}

package/dist/screens/ConversationsScreen.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * ConversationsScreen - Navigation screen wrapper for conversation list
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConversationsScreen = ConversationsScreen;
+const react_1 = __importDefault(require("react"));
+const ConversationList_1 = require("../components/ConversationList");
+function ConversationsScreen({ navigation }) {
+    const handleSelectConversation = (conversation) => {
+        navigation.navigate("Chat", {
+            conversationId: conversation.id,
+            conversationName: conversation.name,
+            isGroup: conversation.isGroup,
+            groupId: conversation.group
+        });
+    };
+    const handleCreateGroup = () => {
+        navigation.navigate("CreateGroup");
+    };
+    return (<ConversationList_1.ConversationList onSelectConversation={handleSelectConversation} onCreateGroup={handleCreateGroup}/>);
+}

package/dist/screens/CreateGroupScreen.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CreateGroupScreen - Admin-only screen for creating new groups
+ */
+import React from "react";
+import type { NativeStackScreenProps } from "@react-navigation/native-stack";
+import type { RootStackParamList } from "../types";
+type Props = NativeStackScreenProps<RootStackParamList, "CreateGroup">;
+export declare function CreateGroupScreen({ navigation }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=CreateGroupScreen.d.ts.map

package/dist/screens/CreateGroupScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateGroupScreen.d.ts","sourceRoot":"","sources":["../../src/screens/CreateGroupScreen.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAiB7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAMnD,KAAK,KAAK,GAAG,sBAAsB,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;AA6BvE,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,qBA2LtD"}

package/dist/screens/CreateGroupScreen.js

@@ -0,0 +1,263 @@
+"use strict";
+/**
+ * CreateGroupScreen - Admin-only screen for creating new groups
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateGroupScreen = CreateGroupScreen;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// @ts-ignore - react-native-paper is a peer dependency
+const react_native_paper_1 = require("react-native-paper");
+const formik_1 = require("formik");
+const Yup = __importStar(require("yup"));
+const styles_1 = require("../styles");
+const groups_1 = require("../cache/actions/groups");
+const UserAutocomplete_1 = require("../components/UserAutocomplete");
+const KeyboardAvoidingContainer_1 = require("../components/KeyboardAvoidingContainer");
+const Dropdown_1 = require("../components/Dropdown");
+const createGroupSchema = Yup.object().shape({
+    name: Yup.string()
+        .required("Group name is required")
+        .min(3, "Name must be at least 3 characters")
+        .max(100, "Name must be less than 100 characters"),
+    read_only: Yup.boolean().required(),
+    members: Yup.array().of(Yup.object().shape({
+        userId: Yup.number().required(),
+        role: Yup.string().oneOf(["moderator", "member"]).required(),
+        user: Yup.object().required()
+    }))
+});
+function CreateGroupScreen({ navigation }) {
+    const styles = useStyles();
+    const theme = (0, react_native_paper_1.useTheme)();
+    const handleSubmit = async (values) => {
+        try {
+            await (0, groups_1.createGroup)({
+                name: values.name,
+                read_only: values.read_only,
+                members: values.members.map(m => ({
+                    userId: m.userId,
+                    role: m.role
+                }))
+            });
+            navigation.goBack();
+        }
+        catch (error) {
+            console.error("Failed to create group:", error);
+            // TODO: Show error toast
+        }
+    };
+    const formik = (0, formik_1.useFormik)({
+        initialValues: { name: "", read_only: false, members: [] },
+        validationSchema: createGroupSchema,
+        onSubmit: handleSubmit
+    });
+    const { values, errors, touched, handleChange, handleBlur, setFieldValue, isSubmitting } = formik;
+    const handleSetMemberRole = (userId, role) => {
+        setFieldValue("members", values.members.map(m => (m.userId === userId ? { ...m, role } : m)));
+    };
+    const handleRemoveMember = (userId) => {
+        setFieldValue("members", values.members.filter(m => m.userId !== userId));
+    };
+    return (<KeyboardAvoidingContainer_1.KeyboardAvoidingContainer style={styles.container}>
+      <react_native_1.ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+        <react_native_1.View style={styles.form}>
+          <react_native_paper_1.TextInput label="Group Name" value={values.name} onChangeText={handleChange("name")} onBlur={handleBlur("name")} error={touched.name && !!errors.name} disabled={isSubmitting} mode="outlined" style={styles.input}/>
+          {touched.name && errors.name && (<react_native_paper_1.HelperText type="error" visible={true}>
+              {errors.name}
+            </react_native_paper_1.HelperText>)}
+
+          <react_native_1.View style={styles.switchContainer}>
+            <react_native_1.View style={styles.switchLabelContainer}>
+              <react_native_paper_1.Text variant="bodyLarge">Read-only group</react_native_paper_1.Text>
+              <react_native_paper_1.Text variant="bodySmall" style={styles.helperText}>
+                Members can only read messages. Moderators can post.
+              </react_native_paper_1.Text>
+            </react_native_1.View>
+            <react_native_paper_1.Switch value={values.read_only} onValueChange={value => {
+            setFieldValue("read_only", value);
+        }} disabled={isSubmitting}/>
+          </react_native_1.View>
+
+          <react_native_paper_1.Divider style={styles.divider}/>
+
+          <react_native_paper_1.Text variant="titleMedium" style={styles.sectionTitle}>
+            Add Members
+          </react_native_paper_1.Text>
+
+          <react_native_paper_1.Text variant="bodySmall" style={styles.warningText}>
+            You cannot add members later. Only admins can join a group after it
+            is created. This will be fixed later.
+          </react_native_paper_1.Text>
+
+          <UserAutocomplete_1.UserAutocomplete multiple showChips={false} value={values.members.map(m => m.user)} onChange={(users) => {
+            setFieldValue("members", users.map(user => ({
+                userId: user.id,
+                role: "member",
+                user
+            })));
+        }} disabled={isSubmitting} placeholder="Search users to add..."/>
+
+          {values.members.length > 0 && (<react_native_1.View style={styles.membersListContainer}>
+              <react_native_paper_1.Text variant="titleSmall" style={styles.membersListTitle}>
+                Selected Members ({values.members.length})
+              </react_native_paper_1.Text>
+
+              {values.members.map(member => (<react_native_1.View key={member.userId} style={styles.memberItem}>
+                  <react_native_1.View style={styles.memberInfo}>
+                    <react_native_paper_1.Text variant="bodyLarge">{member.user.name}</react_native_paper_1.Text>
+                    <react_native_paper_1.Text variant="bodySmall" style={styles.memberEmail}>
+                      {member.user.email}
+                    </react_native_paper_1.Text>
+                  </react_native_1.View>
+
+                  <react_native_1.View style={styles.memberActions}>
+                    <Dropdown_1.Dropdown label={member.role === "moderator" ? "Moderator" : "Member"} mode="text" disabled={isSubmitting}>
+                      <react_native_paper_1.Menu.Item onPress={() => handleSetMemberRole(member.userId, "member")} title="Member"/>
+                      <react_native_paper_1.Menu.Item onPress={() => handleSetMemberRole(member.userId, "moderator")} title="Moderator"/>
+                    </Dropdown_1.Dropdown>
+
+                    <react_native_paper_1.IconButton icon="close" iconColor={theme.colors.error} size={20} onPress={() => handleRemoveMember(member.userId)} disabled={isSubmitting}/>
+                  </react_native_1.View>
+                </react_native_1.View>))}
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.ScrollView>
+
+      <react_native_1.View style={styles.footer}>
+        <react_native_paper_1.Button mode="contained" onPress={() => formik.handleSubmit()} disabled={isSubmitting || !formik.isValid} loading={isSubmitting} style={styles.button}>
+          Create Group
+        </react_native_paper_1.Button>
+      </react_native_1.View>
+    </KeyboardAvoidingContainer_1.KeyboardAvoidingContainer>);
+}
+const useStyles = () => {
+    const theme = (0, react_native_paper_1.useTheme)();
+    return (0, styles_1.useStyleSheet)({
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.surface
+        },
+        scrollView: {
+            flex: 1
+        },
+        content: {
+            paddingHorizontal: 25,
+            paddingVertical: 16
+        },
+        form: {
+            flex: 1
+        },
+        input: {
+            marginBottom: 4
+        },
+        switchContainer: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginTop: 24,
+            marginBottom: 32,
+            paddingVertical: 8
+        },
+        switchLabelContainer: {
+            flex: 1,
+            marginRight: 16
+        },
+        helperText: {
+            color: theme.colors.onSurfaceVariant,
+            marginTop: 4
+        },
+        divider: {
+            marginTop: 0,
+            marginBottom: 24
+        },
+        sectionTitle: {
+            marginBottom: 8,
+            fontWeight: "600"
+        },
+        warningText: {
+            color: theme.colors.error,
+            marginBottom: 16,
+            padding: 12,
+            backgroundColor: theme.colors.errorContainer,
+            borderRadius: 8
+        },
+        membersListContainer: {
+            marginTop: 16
+        },
+        membersListTitle: {
+            marginBottom: 12,
+            fontWeight: "600"
+        },
+        memberItem: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingVertical: 12,
+            paddingLeft: 16,
+            paddingRight: 4,
+            backgroundColor: theme.colors.surfaceVariant,
+            borderRadius: 8,
+            marginBottom: 2
+        },
+        memberInfo: {
+            flex: 1,
+            marginRight: 8
+        },
+        memberActions: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 4
+        },
+        memberEmail: {
+            color: theme.colors.onSurfaceVariant,
+            marginTop: 2
+        },
+        footer: {
+            paddingHorizontal: 30,
+            paddingVertical: 16,
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.surfaceVariant,
+            backgroundColor: theme.colors.surface
+        },
+        button: {
+            width: "100%"
+        }
+    });
+};

package/dist/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./theme";
+export * from "./responsive";
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./theme"), exports);
+__exportStar(require("./responsive"), exports);