@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/group-switcher.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 interface GroupSwitcherProps {
     colorMode: string;
     isMobile?: boolean;
 }
-export declare function GroupSwitcher({ colorMode, isMobile }: GroupSwitcherProps): React.JSX.Element;
+export declare function GroupSwitcher({ colorMode, isMobile }: GroupSwitcherProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/group-switcher.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupSwitcher = GroupSwitcher;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../hooks");
@@ -59,12 +60,12 @@ function GroupSwitcher({ colorMode, isMobile = false }) {
         if (!currentGroupId)
             return null;
         return allGroups.find((g) => g.groupId === currentGroupId) || null;
-    }, [allGroups, userContext?.currentlyActiveGroupId()]);
+    }, [allGroups, userContext?.currentlyActiveGroupId]);
     const handleGroupSelect = (group) => {
         if (!userContext)
             return;
         // Set the active group through user context
-        userContext.currentlyActiveGroupId(group?.groupId || '');
+        userContext.currentlyActiveGroupId(group?.groupId || "");
         setShowDropdown(false);
     };
     const handleCreateClick = () => {
@@ -73,83 +74,82 @@ function GroupSwitcher({ colorMode, isMobile = false }) {
     };
     const getGroupIcon = (group) => {
         if (!group)
-            return 'bi-person-fill'; // Personal group icon
-        return group.iconClassName || 'bi-people-fill';
+            return "bi-person-fill"; // Personal group icon
+        return group.iconClassName || "bi-people-fill";
     };
     const getGroupName = (group) => {
         if (!group)
-            return 'Personal';
+            return "Personal";
         return group.name;
     };
-    const isDark = colorMode === 'dark';
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "dropdown" },
-            react_1.default.createElement("button", { className: `btn btn-sm ${isMobile ? '' : 'me-2'} d-flex align-items-center`, onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
-                    padding: isMobile ? '4px' : '4px 8px',
-                    fontSize: '12px',
-                    borderRadius: '6px',
-                    border: 'none',
-                    background: 'transparent',
-                    color: isDark ? '#adb5bd' : '#6c757d',
-                    minWidth: isMobile ? '36px' : undefined
-                }, onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = isDark ? '#495057' : '#f8f9fa';
-                    e.currentTarget.style.color = isDark ? '#ffffff' : '#0d6efd';
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = 'transparent';
-                    e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
-                } },
-                react_1.default.createElement("i", { className: `${getGroupIcon(currentGroup)} ${isMobile ? '' : 'me-1'}`, style: { fontSize: '14px' } }),
-                !isMobile && (react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '80px' } }, getGroupName(currentGroup))),
-                react_1.default.createElement("i", { className: "bi-chevron-down ms-1", style: { fontSize: '10px' } })),
-            showDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${isDark ? 'dropdown-menu-dark' : ''}`, style: {
-                    left: 0,
-                    top: '100%',
-                    zIndex: 1000,
-                    minWidth: '200px',
-                    maxHeight: '300px',
-                    overflowY: 'auto'
-                } },
-                react_1.default.createElement("button", { className: `dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`, style: { cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }, onClick: () => handleGroupSelect(null) },
-                    react_1.default.createElement("i", { className: "bi-person-fill me-2" }),
-                    react_1.default.createElement("span", null, "Personal")),
-                allGroups.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider" })),
-                allGroups
-                    .filter((g) => !g.disabled)
-                    .map((group) => (react_1.default.createElement("button", { key: group.groupId, className: `dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`, style: { cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }, onClick: () => handleGroupSelect(group) },
-                    react_1.default.createElement("i", { className: `${getGroupIcon(group)} me-2` }),
-                    react_1.default.createElement("span", { className: "text-truncate" }, group.name)))),
-                react_1.default.createElement("div", { className: "dropdown-divider" }),
-                react_1.default.createElement("button", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left' }, onClick: handleCreateClick },
-                    react_1.default.createElement("i", { className: "bi-plus-circle me-2" }),
-                    react_1.default.createElement("span", null, "Create Group")))),
-            showDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowDropdown(false) }))),
-        showCreateModal && userContext && (react_1.default.createElement(CreateGroupModal, { colorMode: colorMode, userContext: userContext, onClose: () => setShowCreateModal(false), onGroupCreated: async (groupId) => {
-                // Refresh groups list
-                const groupsTable = (0, peers_sdk_1.Groups)(userContext.userDataContext);
-                const groupsList = await groupsTable.list({ disabled: { $ne: true } });
-                setAllGroups(groupsList);
-                // Switch to new group
-                userContext.currentlyActiveGroupId(groupId);
-                setShowCreateModal(false);
-            } }))));
+    const isDark = colorMode === "dark";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: `btn btn-sm ${isMobile ? "" : "me-2"} d-flex align-items-center`, onClick: () => setShowDropdown(!showDropdown), title: `Current group: ${getGroupName(currentGroup)}`, style: {
+                            padding: isMobile ? "4px" : "4px 8px",
+                            fontSize: "12px",
+                            borderRadius: "6px",
+                            border: "none",
+                            background: "transparent",
+                            color: isDark ? "#adb5bd" : "#6c757d",
+                            minWidth: isMobile ? "36px" : undefined,
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = isDark ? "#495057" : "#f8f9fa";
+                            e.currentTarget.style.color = isDark ? "#ffffff" : "#0d6efd";
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                            e.currentTarget.style.color = isDark ? "#adb5bd" : "#6c757d";
+                        }, children: [(0, jsx_runtime_1.jsx)("i", { className: `${getGroupIcon(currentGroup)} ${isMobile ? "" : "me-1"}`, style: { fontSize: "14px" } }), !isMobile && ((0, jsx_runtime_1.jsx)("span", { className: "text-truncate", style: { maxWidth: "80px" }, children: getGroupName(currentGroup) })), (0, jsx_runtime_1.jsx)("i", { className: "bi-chevron-down ms-1", style: { fontSize: "10px" } })] }), showDropdown && ((0, jsx_runtime_1.jsxs)("div", { className: `dropdown-menu show position-absolute ${isDark ? "dropdown-menu-dark" : ""}`, style: {
+                            left: 0,
+                            top: "100%",
+                            zIndex: 1000,
+                            minWidth: "200px",
+                            maxHeight: "300px",
+                            overflowY: "auto",
+                        }, children: [(0, jsx_runtime_1.jsxs)("button", { className: `dropdown-item d-flex align-items-center ${!currentGroup ? "active" : ""}`, style: {
+                                    cursor: "pointer",
+                                    border: "none",
+                                    background: "none",
+                                    width: "100%",
+                                    textAlign: "left",
+                                }, onClick: () => handleGroupSelect(null), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill me-2" }), (0, jsx_runtime_1.jsx)("span", { children: "Personal" })] }), allGroups.length > 0 && (0, jsx_runtime_1.jsx)("div", { className: "dropdown-divider" }), allGroups
+                                .filter((g) => !g.disabled)
+                                .map((group) => ((0, jsx_runtime_1.jsxs)("button", { className: `dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? "active" : ""}`, style: {
+                                    cursor: "pointer",
+                                    border: "none",
+                                    background: "none",
+                                    width: "100%",
+                                    textAlign: "left",
+                                }, onClick: () => handleGroupSelect(group), children: [(0, jsx_runtime_1.jsx)("i", { className: `${getGroupIcon(group)} me-2` }), (0, jsx_runtime_1.jsx)("span", { className: "text-truncate", children: group.name })] }, group.groupId))), (0, jsx_runtime_1.jsx)("div", { className: "dropdown-divider" }), (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item d-flex align-items-center", style: {
+                                    cursor: "pointer",
+                                    border: "none",
+                                    background: "none",
+                                    width: "100%",
+                                    textAlign: "left",
+                                }, onClick: handleCreateClick, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-plus-circle me-2" }), (0, jsx_runtime_1.jsx)("span", { children: "Create Group" })] })] })), showDropdown && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowDropdown(false) }))] }), showCreateModal && userContext && ((0, jsx_runtime_1.jsx)(CreateGroupModal, { colorMode: colorMode, userContext: userContext, onClose: () => setShowCreateModal(false), onGroupCreated: async (groupId) => {
+                    // Refresh groups list
+                    const groupsTable = (0, peers_sdk_1.Groups)(userContext.userDataContext);
+                    const groupsList = await groupsTable.list({ disabled: { $ne: true } });
+                    setAllGroups(groupsList);
+                    // Switch to new group
+                    userContext.currentlyActiveGroupId(groupId);
+                    setShowCreateModal(false);
+                } }))] }));
 }
-function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }) {
-    const [groupName, setGroupName] = (0, react_1.useState)('');
-    const [iconClassName, setIconClassName] = (0, react_1.useState)('bi-people-fill');
-    const [description, setDescription] = (0, react_1.useState)('');
+function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated, }) {
+    const [groupName, setGroupName] = (0, react_1.useState)("");
+    const [iconClassName, setIconClassName] = (0, react_1.useState)("bi-people-fill");
+    const [description, setDescription] = (0, react_1.useState)("");
     const [isCreating, setIsCreating] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
-    const isDark = colorMode === 'dark';
+    const isDark = colorMode === "dark";
     const handleCreate = async () => {
         // Validate
         const trimmedName = groupName.trim();
         if (!trimmedName) {
-            setError('Group name is required');
+            setError("Group name is required");
             return;
         }
         if (trimmedName.length > 100) {
-            setError('Group name must be 100 characters or less');
+            setError("Group name must be 100 characters or less");
             return;
         }
         setIsCreating(true);
@@ -162,12 +162,12 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }) {
             // Create group data context
             const groupDataContext = userContext.getDataContext(groupId);
             // Store groupKeys.secretKey securely for this group
-            const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
-            const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+            const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName("PersistentVars");
+            const groupSecretKeyVarName = `groupSecretKey_${groupDataContext.dataContextId}`;
             await persistentVarsTable.save({
                 persistentVarId: (0, peers_sdk_1.newid)(),
                 name: groupSecretKeyVarName,
-                scope: 'groupUser',
+                scope: "groupUser",
                 isSecret: true,
                 value: { value: groupKeys.secretKey },
             });
@@ -181,125 +181,85 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }) {
                 groupId,
                 name: trimmedName,
                 description: description.trim(),
-                iconClassName: iconClassName.trim() || 'bi-people-fill',
+                iconClassName: iconClassName.trim() || "bi-people-fill",
                 founderUserId: me.userId,
                 disabled: false,
                 publicKey: groupKeys.publicKey,
                 publicBoxKey: groupKeys.publicBoxKey,
-                signature: '', // Will be set by signAndSave()
+                signature: "", // Will be set by signAndSave()
             });
             await (0, peers_sdk_1.Groups)(groupDataContext).signAndSave(newGroup);
             // Auto-install peers-core for the new group
-            await peers_sdk_1.rpcServerCalls.addOrUpdatePackage(peers_sdk_1.peersCorePackageId, { dataContextId: groupId }).catch((err) => {
-                console.error('Error auto-installing peers-core for group:', err);
+            await peers_sdk_1.rpcServerCalls
+                .addOrUpdatePackage(peers_sdk_1.peersCorePackageId, { dataContextId: groupId })
+                .catch((err) => {
+                console.error("Error auto-installing peers-core for group:", err);
             });
             // Notify parent
             onGroupCreated(newGroup.groupId);
         }
         catch (err) {
-            console.error('Failed to create group:', err);
-            setError(err.message || 'Failed to create group. Please try again.');
+            console.error("Failed to create group:", err);
+            setError(err instanceof Error ? err.message : "Failed to create group. Please try again.");
             setIsCreating(false);
         }
     };
     const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey && groupName.trim()) {
+        if (e.key === "Enter" && !e.shiftKey && groupName.trim()) {
             e.preventDefault();
             handleCreate();
         }
-        else if (e.key === 'Escape') {
+        else if (e.key === "Escape") {
             onClose();
         }
     };
-    return (react_1.default.createElement("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
             top: 0,
             left: 0,
             zIndex: 1050,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            backdropFilter: 'blur(4px)',
-            paddingTop: '10vh'
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            backdropFilter: "blur(4px)",
+            paddingTop: "10vh",
         }, onClick: (e) => {
             if (e.target === e.currentTarget) {
                 onClose();
             }
-        } },
-        react_1.default.createElement("div", { className: `${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`, style: {
-                width: '90%',
-                maxWidth: '500px',
-                borderRadius: '12px',
-                boxShadow: isDark
-                    ? '0 20px 40px rgba(0, 0, 0, 0.5)'
-                    : '0 20px 40px rgba(0, 0, 0, 0.1)',
-                border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
-                overflow: 'hidden'
-            } },
-            react_1.default.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-between", style: {
-                    borderBottomColor: isDark ? '#495057' : '#dee2e6'
-                } },
-                react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                    react_1.default.createElement("i", { className: "bi-people-fill me-2", style: { fontSize: '20px' } }),
-                    react_1.default.createElement("h6", { className: "mb-0" }, "Create New Group")),
-                react_1.default.createElement("button", { className: "btn btn-sm p-0", style: {
-                        border: 'none',
-                        background: 'none',
-                        fontSize: '24px',
-                        lineHeight: '1',
-                        opacity: 0.6
-                    }, onClick: onClose, disabled: isCreating, onMouseEnter: (e) => e.currentTarget.style.opacity = '1', onMouseLeave: (e) => e.currentTarget.style.opacity = '0.6' },
-                    react_1.default.createElement("i", { className: "bi-x" }))),
-            react_1.default.createElement("div", { className: "p-3" },
-                error && (react_1.default.createElement("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: '14px' } },
-                    react_1.default.createElement("i", { className: "bi-exclamation-triangle me-2" }),
-                    error)),
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("label", { className: "form-label small mb-1" },
-                        "Group Name ",
-                        react_1.default.createElement("span", { className: "text-danger" }, "*")),
-                    react_1.default.createElement("input", { type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Enter group name", value: groupName, onChange: (e) => {
-                            setGroupName(e.target.value);
-                            setError(null);
-                        }, onKeyDown: handleKeyDown, autoFocus: true, disabled: isCreating, maxLength: 100, style: {
-                            fontSize: '14px',
-                            backgroundColor: isDark ? '#343a40' : '#ffffff'
-                        } }),
-                    react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '11px' } },
-                        groupName.length,
-                        "/100 characters")),
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("label", { className: "form-label small mb-1" }, "Icon"),
-                    react_1.default.createElement("div", { className: "input-group" },
-                        react_1.default.createElement("span", { className: `input-group-text ${isDark ? 'bg-dark text-light border-secondary' : ''}`, style: { backgroundColor: isDark ? '#343a40' : undefined } },
-                            react_1.default.createElement("i", { className: iconClassName || 'bi-people-fill' })),
-                        react_1.default.createElement("input", { type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "bi-people-fill", value: iconClassName, onChange: (e) => setIconClassName(e.target.value), onKeyDown: handleKeyDown, disabled: isCreating, style: {
-                                fontSize: '14px',
-                                backgroundColor: isDark ? '#343a40' : '#ffffff'
-                            } })),
-                    react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '11px' } }, "Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)")),
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("label", { className: "form-label small mb-1" }, "Description (optional)"),
-                    react_1.default.createElement("textarea", { className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Enter group description", value: description, onChange: (e) => setDescription(e.target.value), disabled: isCreating, rows: 3, maxLength: 500, style: {
-                            fontSize: '14px',
-                            backgroundColor: isDark ? '#343a40' : '#ffffff',
-                            resize: 'none'
-                        } }),
-                    react_1.default.createElement("small", { className: "text-muted", style: { fontSize: '11px' } },
-                        description.length,
-                        "/500 characters"))),
-            react_1.default.createElement("div", { className: "p-3 border-top d-flex justify-content-end gap-2", style: {
-                    borderTopColor: isDark ? '#495057' : '#dee2e6'
-                } },
-                react_1.default.createElement("button", { className: `btn btn-sm ${isDark ? 'btn-outline-light' : 'btn-outline-secondary'}`, onClick: onClose, disabled: isCreating, style: { minWidth: '80px' } }, "Cancel"),
-                react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: handleCreate, disabled: isCreating || !groupName.trim(), style: { minWidth: '80px' } }, isCreating ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
-                    "Creating...")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "bi-plus-circle me-1" }),
-                    "Create")))),
-            react_1.default.createElement("div", { className: `px-3 py-2 small text-muted border-top`, style: {
-                    borderTopColor: isDark ? '#495057' : '#dee2e6',
-                    fontSize: '11px'
-                } },
-                react_1.default.createElement("kbd", { className: "small" }, "\u21B5"),
-                " to create \u2022 ",
-                react_1.default.createElement("kbd", { className: "small" }, "esc"),
-                " to cancel"))));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? "bg-dark text-light" : "bg-white text-dark"}`, style: {
+                width: "90%",
+                maxWidth: "500px",
+                borderRadius: "12px",
+                boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
+                border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                overflow: "hidden",
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-between", style: {
+                        borderBottomColor: isDark ? "#495057" : "#dee2e6",
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-people-fill me-2", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Create New Group" })] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm p-0", style: {
+                                border: "none",
+                                background: "none",
+                                fontSize: "24px",
+                                lineHeight: "1",
+                                opacity: 0.6,
+                            }, onClick: onClose, disabled: isCreating, onMouseEnter: (e) => {
+                                e.currentTarget.style.opacity = "1";
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.opacity = "0.6";
+                            }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: "14px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label small mb-1", children: ["Group Name ", (0, jsx_runtime_1.jsx)("span", { className: "text-danger", children: "*" })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "Enter group name", value: groupName, onChange: (e) => {
+                                        setGroupName(e.target.value);
+                                        setError(null);
+                                    }, onKeyDown: handleKeyDown, disabled: isCreating, maxLength: 100, style: {
+                                        fontSize: "14px",
+                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                    } }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", style: { fontSize: "11px" }, children: [groupName.length, "/100 characters"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mb-1", children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("span", { className: `input-group-text ${isDark ? "bg-dark text-light border-secondary" : ""}`, style: { backgroundColor: isDark ? "#343a40" : undefined }, children: (0, jsx_runtime_1.jsx)("i", { className: iconClassName || "bi-people-fill" }) }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "bi-people-fill", value: iconClassName, onChange: (e) => setIconClassName(e.target.value), onKeyDown: handleKeyDown, disabled: isCreating, style: {
+                                                fontSize: "14px",
+                                                backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                            } })] }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", style: { fontSize: "11px" }, children: "Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mb-1", children: "Description (optional)" }), (0, jsx_runtime_1.jsx)("textarea", { className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "Enter group description", value: description, onChange: (e) => setDescription(e.target.value), disabled: isCreating, rows: 3, maxLength: 500, style: {
+                                        fontSize: "14px",
+                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                        resize: "none",
+                                    } }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", style: { fontSize: "11px" }, children: [description.length, "/500 characters"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 border-top d-flex justify-content-end gap-2", style: {
+                        borderTopColor: isDark ? "#495057" : "#dee2e6",
+                    }, children: [(0, jsx_runtime_1.jsx)("button", { className: `btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`, onClick: onClose, disabled: isCreating, style: { minWidth: "80px" }, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-primary", onClick: handleCreate, disabled: isCreating || !groupName.trim(), style: { minWidth: "80px" }, children: isCreating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Creating..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-plus-circle me-1" }), "Create"] })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 small text-muted border-top`, style: {
+                        borderTopColor: isDark ? "#495057" : "#dee2e6",
+                        fontSize: "11px",
+                    }, children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to create \u2022 ", (0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to cancel"] })] }) }));
 }

package/dist/components/input-date.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import { Observable } from "@peers-app/peers-sdk";
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
 interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     date: Observable<Date | undefined> | Date | undefined;
 }
-export declare const InputDate: (props: IProps) => React.JSX.Element;
+export declare const InputDate: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input-date.js

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputDate = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const moment_timezone_1 = __importDefault(require("moment-timezone"));
 const hooks_1 = require("../hooks");
 const InputDate = (props) => {
     const [date, setDate] = (0, hooks_1.useObservable)(props.date);
-    const inputProps = { ...props };
-    // @ts-ignore
-    delete inputProps.date;
-    return (react_1.default.createElement("input", { ...inputProps, type: 'date', value: date?.toISOString?.().substring(0, 10) ?? '', onChange: evt => {
-            setDate(evt.currentTarget.value ? (0, moment_timezone_1.default)(new Date(evt.currentTarget.value)).startOf('day').add(1, 'day').toDate() : undefined);
+    const { date: _omitDate, ...inputProps } = props;
+    return ((0, jsx_runtime_1.jsx)("input", { ...inputProps, type: "date", value: date?.toISOString?.().substring(0, 10) ?? "", onChange: (evt) => {
+            setDate(evt.currentTarget.value
+                ? (0, moment_timezone_1.default)(new Date(evt.currentTarget.value)).startOf("day").add(1, "day").toDate()
+                : undefined);
         } }));
 };
 exports.InputDate = InputDate;

package/dist/components/input-number.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    value: any;
-    format?: 'money';
+import { type Observable } from "@peers-app/peers-sdk";
+import type React from "react";
+interface IProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value"> {
+    value?: number | null | string | Observable<number | null | string | undefined>;
+    format?: "money";
     precision?: number;
-    refPassthrough?: any;
+    refPassthrough?: React.LegacyRef<HTMLInputElement>;
 }
-export declare function InputNumber(props: IProps): React.JSX.Element;
+export declare function InputNumber(props: IProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input-number.js

@@ -34,54 +34,59 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputNumber = InputNumber;
-const lodash_1 = __importStar(require("lodash"));
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lodash_1 = __importStar(require("lodash"));
+const react_1 = require("react");
 const hooks_1 = require("../hooks");
 function InputNumber(props) {
     let { format, precision, refPassthrough } = props;
     if (!lodash_1.default.isNumber(precision)) {
         precision = 2;
     }
-    let propsPassthrough = { ...props };
-    // @ts-ignore
-    ['value', 'format', 'precision', 'refPassthrough'].forEach(name => (delete propsPassthrough[name]));
+    const propsPassthrough = { ...props };
+    for (const name of ["value", "format", "precision", "refPassthrough"]) {
+        delete propsPassthrough[name];
+    }
     const [value, setValue] = (0, hooks_1.useObservable)(props.value);
-    let [displayValue, setDisplayValue] = (0, react_1.useState)(() => {
-        if (isNaN(Number(value)) || value === null || String(value).trim() === '') {
-            return '';
+    const [displayValue, setDisplayValue] = (0, react_1.useState)(() => {
+        if (Number.isNaN(Number(value)) || value === null || String(value).trim() === "") {
+            return "";
         }
-        if (format === 'money') {
+        if (format === "money") {
             return (0, peers_sdk_1.formatMoney)(Number((0, peers_sdk_1.unwrapObservable)(props.value)), precision);
         }
         return String(value);
     });
     function onChange(evt) {
-        let _value = evt.target.value;
+        const _value = evt.target.value;
         setDisplayValue(_value);
         // convert blank to null
-        if (String(_value).trim() === '') {
+        if (String(_value).trim() === "") {
             setValue(null);
             return;
         }
-        _value = _value.replace(/\$/g, '');
-        _value = Number(_value);
-        if ((0, lodash_1.isNumber)(_value) && !isNaN(_value)) {
-            setValue(_value);
+        const stripped = _value.replace(/\$/g, "");
+        const parsed = Number(stripped);
+        if ((0, lodash_1.isNumber)(parsed) && !Number.isNaN(parsed)) {
+            setValue(parsed);
         }
     }
-    function onBlur(evt) {
-        if (format === 'money' && !isNaN(Number(value)) && value !== null && String(value).trim() !== '') {
-            const fmtMoney = (0, peers_sdk_1.formatMoney)(value, precision);
+    function onBlur(_evt) {
+        if (format === "money" &&
+            !Number.isNaN(Number(value)) &&
+            value !== null &&
+            String(value).trim() !== "") {
+            const fmtMoney = (0, peers_sdk_1.formatMoney)(Number(value), precision);
             setDisplayValue(fmtMoney);
         }
         else if (value === null) {
-            setDisplayValue('');
+            setDisplayValue("");
         }
         else {
             setDisplayValue(String(value));
         }
         // todo if not money format precision and set display
     }
-    return (react_1.default.createElement("input", { ...propsPassthrough, ref: refPassthrough, value: displayValue, onChange: onChange, onBlur: onBlur }));
+    return ((0, jsx_runtime_1.jsx)("input", { ...propsPassthrough, ref: refPassthrough, value: displayValue, onChange: onChange, onBlur: onBlur }));
 }

package/dist/components/input.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    value: any;
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
+interface IProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value"> {
+    value?: string | number | null | Observable<string | number | null | undefined>;
     type?: React.HTMLInputTypeAttribute;
 }
-export declare function Input(props: IProps): React.JSX.Element;
+export declare function Input(props: IProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/input.js

@@ -1,20 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = Input;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("../hooks");
 function Input(props) {
     const [value, setValue] = (0, hooks_1.useObservable)(props.value);
-    const type = props.type ?? (typeof value);
+    const type = props.type ?? typeof value;
     function onChange(evt) {
         let _value = evt.target.value;
-        if (type === 'number') {
+        if (type === "number") {
             _value = Number(_value);
         }
         setValue(_value);
     }
-    return (react_1.default.createElement("input", { onChange: onChange, type: type, ...props, value: value }));
+    return (0, jsx_runtime_1.jsx)("input", { onChange: onChange, type: type, ...props, value: value ?? "" });
 }

package/dist/components/inverse-lazy-list.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from "react";
 interface IInverseLazyListProps<T> {
     /** Unique id for the scroll container — required to avoid id collisions */
     scrollableId: string;
@@ -11,7 +11,7 @@ interface IInverseLazyListProps<T> {
     /** Custom loading indicator */
     loadingIndicator?: React.ReactNode;
     /** Change this value to reset the list and reload from scratch */
-    resetTrigger?: any;
+    resetTrigger?: unknown;
     /** Style for the outer scroll container */
     style?: React.CSSProperties;
 }
@@ -21,5 +21,5 @@ interface IInverseLazyListProps<T> {
  *
  * Items state is managed internally. Use prependRef to push live inserts from outside.
  */
-export declare function InverseLazyList<T>(props: IInverseLazyListProps<T>): React.JSX.Element;
+export declare function InverseLazyList<T>(props: IInverseLazyListProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};