@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/save-button.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SaveButton = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const globals_1 = require("../globals");
 const hooks_1 = require("../hooks");
 const SaveButton = (props) => {
@@ -18,58 +15,51 @@ const SaveButton = (props) => {
     if (!props.noBuiltInActions) {
         if (q()) {
             allActions.unshift({
-                label: 'Discard Changes',
-                className: 'text-bg-warning',
+                label: "Discard Changes",
+                className: "text-bg-warning",
                 onClick: () => {
-                    if (confirm('Are you sure you want to discard your changes?')) {
-                        doc.load()
-                            .then(() => {
+                    if (confirm("Are you sure you want to discard your changes?")) {
+                        doc.load().then(() => {
                             setTimeout(() => doc.q(0), 100);
                         });
                     }
-                }
+                },
             });
         }
         if (allActions.length) {
-            allActions.push(react_1.default.createElement("hr", { className: "dropdown-divider mt-3" }));
+            allActions.push((0, jsx_runtime_1.jsx)("hr", { className: "dropdown-divider mt-3" }));
         }
         allActions.push({
-            label: 'Delete',
+            label: "Delete",
             className: `text-bg-danger`,
             onClick: async () => {
-                if (confirm('Are you sure you want to delete this?')) {
+                if (confirm("Are you sure you want to delete this?")) {
                     await doc.delete();
-                    const pathParts = (0, globals_1.mainContentPath)().split('/');
+                    const pathParts = (0, globals_1.mainContentPath)().split("/");
                     pathParts.pop();
-                    const path = pathParts.join('/') ?? '';
+                    const path = pathParts.join("/") ?? "";
                     (0, globals_1.mainContentPath)(path);
                 }
-            }
+            },
         });
     }
     let className = `btn `;
     if (q()) {
-        className += 'btn-primary';
+        className += "btn-primary";
     }
     else {
-        className += 'disabled';
+        className += "disabled";
     }
     if (!addActions?.length && props.noBuiltInActions) {
-        return (react_1.default.createElement("button", { className: className, onClick: props.onClick ?? doc.save, disabled: !q() }, (0, globals_1.isDesktop)() ? 'Save Changes' : 'Save'));
+        return ((0, jsx_runtime_1.jsx)("button", { className: className, onClick: props.onClick ?? doc.save, disabled: !q(), children: (0, globals_1.isDesktop)() ? "Save Changes" : "Save" }));
     }
-    return (react_1.default.createElement("div", { style: { display: 'inline-block' } },
-        react_1.default.createElement("div", { className: "input-group" },
-            react_1.default.createElement("button", { className: className, onClick: props.onClick ?? doc.save, disabled: !q() }, (0, globals_1.isDesktop)() ? 'Save Changes' : 'Save'),
-            react_1.default.createElement("button", { type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", 
-                // className={`btn dropdown-toggle dropdown-toggle-split ${q() ? 'btn-primary' : 'btn-secondary'}`}
-                className: `btn dropdown-toggle dropdown-toggle-split btn-secondary` },
-                react_1.default.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")),
-            react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, allActions.map(action => {
-                if (typeof action !== 'object' || action === null || !('label' in action)) {
-                    return (react_1.default.createElement("li", { key: Math.random() }, action));
-                }
-                return (react_1.default.createElement("li", { key: action.label },
-                    react_1.default.createElement("button", { className: `dropdown-item rounded mt-2 ${action.className || ''}`, onClick: action.onClick }, action.label)));
-            })))));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: "inline-block" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("button", { className: className, onClick: props.onClick ?? doc.save, disabled: !q(), children: (0, globals_1.isDesktop)() ? "Save Changes" : "Save" }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", 
+                    // className={`btn dropdown-toggle dropdown-toggle-split ${q() ? 'btn-primary' : 'btn-secondary'}`}
+                    className: `btn dropdown-toggle dropdown-toggle-split btn-secondary`, children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Toggle Dropdown" }) }), (0, jsx_runtime_1.jsx)("ul", { className: "dropdown-menu dropdown-menu-end", children: allActions.map((action) => {
+                        if (typeof action !== "object" || action === null || !("label" in action)) {
+                            return (0, jsx_runtime_1.jsx)("li", { children: action }, Math.random());
+                        }
+                        return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: `dropdown-item rounded mt-2 ${action.className || ""}`, onClick: action.onClick, children: action.label }) }, action.label));
+                    }) })] }) }));
 };
 exports.SaveButton = SaveButton;

package/dist/components/sortable-list.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Observable } from "@peers-app/peers-sdk";
+import { type Observable } from "@peers-app/peers-sdk";
+import React from "react";
 export interface ISortable {
     sortOrder: number;
 }
@@ -11,26 +11,25 @@ interface ISortableListProps<T extends ISortable> {
         sortHandle: string;
     }) => React.ReactNode;
     listsGroup?: string;
-    onAdd?: ((itemId: string, sortOrder: number) => any);
-    onUpdate?: ((args: {
+    onAdd?: (itemId: string, sortOrder: number) => void;
+    onUpdate?: (args: {
         items: T[];
         ixMoved: number[];
-    }) => any);
+    }) => void;
     hidden?: boolean;
-    containerProps?: Record<string, any>;
+    containerProps?: Record<string, unknown>;
     dragHandleClassName?: string;
-    sortDirection?: 'asc' | 'desc';
+    sortDirection?: "asc" | "desc";
     minHeight?: string | number;
     paddingBottom?: string | number;
 }
-export declare class SortableList<T extends ISortable> extends React.Component<ISortableListProps<T>, {}> {
-    constructor(props: any);
-    self: any;
-    items: any[];
+export declare class SortableList<T extends ISortable> extends React.Component<ISortableListProps<T>, Record<string, never>> {
+    constructor(props: ISortableListProps<T>);
+    items: T[];
     listId: string;
     sortHandle: string;
     calculateSortOrder(index: number): number;
     componentDidMount(): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/components/sortable-list.js

@@ -4,16 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortableList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lodash_1 = require("lodash");
 const react_1 = __importDefault(require("react"));
 const sortablejs_1 = __importDefault(require("sortablejs"));
-const lodash_1 = require("lodash");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
 class SortableList extends react_1.default.Component {
     constructor(props) {
         super(props);
-        this.sortHandle = this.props.dragHandleClassName && `.${this.props.dragHandleClassName}` || this.sortHandle;
+        this.sortHandle =
+            (this.props.dragHandleClassName && `.${this.props.dragHandleClassName}`) || this.sortHandle;
     }
-    self;
     items = [];
     listId = `${Date.now()}_${Math.round(Math.random() * 100000)}`;
     sortHandle = `.sort-handle-${this.listId}`;
@@ -21,39 +22,51 @@ class SortableList extends react_1.default.Component {
         const items = this.items;
         if (index === 0)
             return Date.now();
-        if (index >= items.length)
-            return (0, lodash_1.last)(items).sortOrder - 10000;
+        if (index >= items.length) {
+            const tail = (0, lodash_1.last)(items);
+            return (tail?.sortOrder ?? Date.now()) - 10000;
+        }
         const above = items[index - 1].sortOrder ?? Date.now();
         const below = items[index].sortOrder ?? Number.MIN_VALUE;
         if (above === below)
-            alert('sort order has converged to the same number in this area.  Try moving items to the top or bottom of the list to fix it');
-        return above - ((above - below) / 2);
+            alert("sort order has converged to the same number in this area.  Try moving items to the top or bottom of the list to fix it");
+        return above - (above - below) / 2;
     }
     componentDidMount() {
-        const self = this;
         const listDiv = document.getElementById(this.listId);
+        if (!listDiv) {
+            return;
+        }
         sortablejs_1.default.create(listDiv, {
             handle: this.sortHandle,
             group: { name: this.props.listsGroup || this.listId, put: !!this.props.onAdd },
             animation: 100,
-            onUpdate: evt => {
-                const items = self.items;
-                const item = items.splice(evt.oldIndex, 1)[0];
-                item.sortOrder = this.calculateSortOrder(evt.newIndex);
-                items.splice(evt.newIndex, 0, item);
+            onUpdate: (evt) => {
+                const oldIndex = evt.oldIndex;
+                const newIndex = evt.newIndex;
+                if (oldIndex === undefined || newIndex === undefined) {
+                    return;
+                }
+                const items = this.items;
+                const item = items.splice(oldIndex, 1)[0];
+                if (!item) {
+                    return;
+                }
+                item.sortOrder = this.calculateSortOrder(newIndex);
+                items.splice(newIndex, 0, item);
                 // console.log(items.map(i => i.toJS()));
                 if (this.props.onUpdate) {
-                    this.props.onUpdate({ items, ixMoved: [evt.newIndex] });
+                    this.props.onUpdate({ items, ixMoved: [newIndex] });
                 }
             },
-            onAdd: evt => {
+            onAdd: (evt) => {
                 const itemEl = evt.item; // dragged HTMLElement
                 if (evt.to !== evt.from) {
                     // first restore html hierarchy so html doesn't get out of sync with react
                     evt.to.removeChild(itemEl);
                     evt.from.appendChild(itemEl);
                     // now if we were given an `onAdd` function, call it
-                    if (this.props.onAdd) {
+                    if (this.props.onAdd && evt.newIndex !== undefined) {
                         const itemId = evt.item.id;
                         this.props.onAdd(itemId, this.calculateSortOrder(evt.newIndex));
                     }
@@ -63,15 +76,22 @@ class SortableList extends react_1.default.Component {
     }
     render() {
         let items = (0, peers_sdk_1.unwrapObservable)(this.props.items);
-        if (this.props.sortDirection === 'asc') {
-            items = (0, lodash_1.sortBy)(items, i => i.sortOrder ?? -Infinity);
+        if (this.props.sortDirection === "asc") {
+            items = (0, lodash_1.sortBy)(items, (i) => i.sortOrder ?? -Infinity);
         }
         else {
-            // @ts-ignore
-            items = (0, lodash_1.sortBy)(items, i => -i.sortOrder ?? Infinity);
+            // @ts-expect-error
+            items = (0, lodash_1.sortBy)(items, (i) => -i.sortOrder ?? Infinity);
         }
         this.items = items;
-        return (react_1.default.createElement("div", { id: this.listId, style: { minHeight: this.props.minHeight ?? "25px", paddingBottom: this.props.paddingBottom ?? "10px" }, ...this.props.containerProps }, items.map(item => this.props.renderItem({ item, listId: this.listId, sortHandle: this.sortHandle.substring(1) }))));
+        return ((0, jsx_runtime_1.jsx)("div", { id: this.listId, style: {
+                minHeight: this.props.minHeight ?? "25px",
+                paddingBottom: this.props.paddingBottom ?? "10px",
+            }, ...this.props.containerProps, children: items.map((item) => this.props.renderItem({
+                item,
+                listId: this.listId,
+                sortHandle: this.sortHandle.substring(1),
+            })) }));
     }
 }
 exports.SortableList = SortableList;

package/dist/components/tabs.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 interface ITabsProps {
     tabs: {
         name: string;
@@ -8,6 +8,6 @@ interface ITabsProps {
     contentClassName?: string;
     activeTabName?: string;
 }
-export declare const Tabs: (props: ITabsProps) => React.JSX.Element;
-export declare const ScreenTabBody: (props: React.PropsWithChildren) => React.JSX.Element;
+export declare const Tabs: (props: ITabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScreenTabBody: (props: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tabs.js

@@ -1,70 +1,39 @@
 "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 __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.ScreenTabBody = exports.Tabs = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const globals_1 = require("../globals");
-let lastActive = '';
+let lastActive = "";
 const Tabs = (props) => {
     const { tabs } = props;
     const [activeTab, _setActiveTab] = (0, react_1.useState)(() => {
-        let activeTabName = tabs.find(tab => tab.active)?.name || (0, globals_1.queryParam)('tab') || lastActive;
+        let activeTabName = tabs.find((tab) => tab.active)?.name || (0, globals_1.queryParam)("tab") || lastActive;
         activeTabName = activeTabName.toLowerCase();
-        const _activeTab = tabs.find(tab => tab.name.toLowerCase() === activeTabName) || tabs[0];
+        const _activeTab = tabs.find((tab) => tab.name.toLowerCase() === activeTabName) || tabs[0];
         lastActive = _activeTab.name;
         return _activeTab;
     });
     // Allow parent to control the active tab imperatively
     const resolvedActiveTab = props.activeTabName
-        ? (tabs.find(tab => tab.name.toLowerCase() === props.activeTabName.toLowerCase()) ?? activeTab)
+        ? (tabs.find((tab) => tab.name.toLowerCase() === props.activeTabName?.toLowerCase()) ??
+            activeTab)
         : activeTab;
     function setActiveTab(tab) {
         _setActiveTab(tab);
         lastActive = tab.name;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("ul", { className: "nav nav-tabs" }, tabs.map((tab, iTab) => {
-            return (react_1.default.createElement("li", { key: tab.name + iTab, className: "nav-item" },
-                react_1.default.createElement("a", { href: "#", className: "nav-link " + (resolvedActiveTab.name === tab.name ? 'active' : ''), onClick: evt => (evt.preventDefault(), setActiveTab(tab)) }, tab.name)));
-        })),
-        react_1.default.createElement("div", { className: "tab-content " + (props.contentClassName ?? 'mt-3') }, tabs.map((tab, iTab) => {
-            return (react_1.default.createElement("div", { key: tab.name + iTab, hidden: resolvedActiveTab.name !== tab.name }, tab.content));
-        }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ul", { className: "nav nav-tabs", children: tabs.map((tab) => {
+                    return ((0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: (0, jsx_runtime_1.jsx)("a", { href: "#", className: `nav-link ${resolvedActiveTab.name === tab.name ? "active" : ""}`, onClick: (evt) => {
+                                evt.preventDefault();
+                                setActiveTab(tab);
+                            }, children: tab.name }) }, tab.name));
+                }) }), (0, jsx_runtime_1.jsx)("div", { className: `tab-content ${props.contentClassName ?? "mt-3"}`, children: tabs.map((tab) => {
+                    return ((0, jsx_runtime_1.jsx)("div", { hidden: resolvedActiveTab.name !== tab.name, children: tab.content }, tab.name));
+                }) })] }));
 };
 exports.Tabs = Tabs;
 const ScreenTabBody = (props) => {
-    return (react_1.default.createElement("div", { style: { maxHeight: 'calc(100vh - 138px)', overflowY: 'auto' } }, props.children));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { maxHeight: "calc(100vh - 138px)", overflowY: "auto" }, children: props.children }));
 };
 exports.ScreenTabBody = ScreenTabBody;

package/dist/components/tooltip.d.ts

@@ -1,11 +1,11 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from 'react';
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
 interface IProps {
     markdownContent?: string | Observable<string> | Observable<string | undefined>;
     handle?: React.ReactNode;
     handleClassName?: string;
-    positions?: ('right' | 'bottom' | 'left' | 'top')[];
+    positions?: ("right" | "bottom" | "left" | "top")[];
     genericContent?: React.ReactNode;
 }
-export declare const Tooltip: (props: IProps) => React.JSX.Element;
+export declare const Tooltip: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip.js

@@ -1,20 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_tiny_popover_1 = require("react-tiny-popover");
-const markdown_with_mentions_1 = require("./markdown-with-mentions");
 const hooks_1 = require("../hooks");
+const markdown_with_mentions_1 = require("./markdown-with-mentions");
 const Tooltip = (props) => {
     const { handle } = props;
     let [markdownContent] = (0, hooks_1.useObservable)(props.markdownContent);
-    markdownContent = markdownContent ?? '';
+    markdownContent = markdownContent ?? "";
     const showPopover = (0, hooks_1.useObservableState)(false);
-    return (react_1.default.createElement(react_tiny_popover_1.Popover, { isOpen: showPopover(), onClickOutside: () => showPopover(false), positions: props.positions ?? ['right', 'bottom', 'left', 'top'], content: () => (react_1.default.createElement("div", { className: 'card p-2 bg-light-subtle', style: { maxWidth: 500, maxHeight: 400, overflowY: 'auto', zIndex: 1000001 } }, props.genericContent ||
-            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: markdownContent }))) },
-        react_1.default.createElement("span", { className: props.handleClassName ?? 'p-2', onClick: () => showPopover(!showPopover()) }, handle ?? react_1.default.createElement("i", { className: "bi bi-info-circle", style: { cursor: 'pointer' } }))));
+    return ((0, jsx_runtime_1.jsx)(react_tiny_popover_1.Popover, { isOpen: showPopover(), onClickOutside: () => showPopover(false), positions: props.positions ?? ["right", "bottom", "left", "top"], content: () => ((0, jsx_runtime_1.jsx)("div", { className: "card p-2 bg-light-subtle", style: { maxWidth: 500, maxHeight: 400, overflowY: "auto", zIndex: 1000001 }, children: props.genericContent || (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: markdownContent }) })), children: (0, jsx_runtime_1.jsx)("span", { className: props.handleClassName ?? "p-2", onClick: () => showPopover(!showPopover()), children: handle ?? (0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle", style: { cursor: "pointer" } }) }) }));
 };
 exports.Tooltip = Tooltip;

package/dist/components/trust-level-badge.d.ts

@@ -1,7 +1,6 @@
-import { TrustLevel } from '@peers-app/peers-sdk';
-import React from 'react';
+import { TrustLevel } from "@peers-app/peers-sdk";
 interface TrustLevelBadgeProps {
     level: TrustLevel;
 }
-export declare const TrustLevelBadge: ({ level }: TrustLevelBadgeProps) => React.JSX.Element;
+export declare const TrustLevelBadge: ({ level }: TrustLevelBadgeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/trust-level-badge.js

@@ -1,27 +1,29 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TrustLevelBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importDefault(require("react"));
 const TrustLevelBadge = ({ level }) => {
     // Define trust level configurations with their numeric values
     const trustLevelConfigs = [
-        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
-        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
-        { value: peers_sdk_1.TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
-        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device' },
-        { value: peers_sdk_1.TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User' },
-        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
-        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
-        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+        { value: peers_sdk_1.TrustLevel.Self, color: "success", icon: "bi-shield-fill-check", text: "Self" },
+        { value: peers_sdk_1.TrustLevel.Trusted, color: "success", icon: "bi-shield-check", text: "Trusted" },
+        { value: peers_sdk_1.TrustLevel.Known, color: "primary", icon: "bi-shield-check", text: "Known" },
+        { value: peers_sdk_1.TrustLevel.NewDevice, color: "info", icon: "bi-shield-plus", text: "New Device" },
+        { value: peers_sdk_1.TrustLevel.NewUser, color: "info", icon: "bi-shield-plus", text: "New User" },
+        { value: peers_sdk_1.TrustLevel.Unknown, color: "warning", icon: "bi-shield-exclamation", text: "Unknown" },
+        {
+            value: peers_sdk_1.TrustLevel.Untrusted,
+            color: "danger",
+            icon: "bi-shield-exclamation",
+            text: "Untrusted",
+        },
+        { value: peers_sdk_1.TrustLevel.Malicious, color: "danger", icon: "bi-shield-x", text: "Malicious" },
     ];
     // Sort by trust level value (ascending, so lowest first)
     const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
     // Find the highest trust level that is at or below the current level
-    let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+    let config = { color: "secondary", icon: "bi-shield", text: "Unknown" };
     for (const trustConfig of sortedConfigs) {
         if (level >= trustConfig.value) {
             config = trustConfig;
@@ -30,8 +32,6 @@ const TrustLevelBadge = ({ level }) => {
             break;
         }
     }
-    return (react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1` },
-        react_1.default.createElement("i", { className: config.icon }),
-        config.text));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${config.color} d-flex align-items-center gap-1`, children: [(0, jsx_runtime_1.jsx)("i", { className: config.icon }), config.text] }));
 };
 exports.TrustLevelBadge = TrustLevelBadge;

package/dist/components/trust-level-dropdown.d.ts

@@ -1,10 +1,9 @@
-import { DataContext, TrustLevel } from '@peers-app/peers-sdk';
-import React from 'react';
+import { type DataContext, TrustLevel } from "@peers-app/peers-sdk";
 interface TrustLevelDropdownProps {
     userId: string;
     dataContext?: DataContext;
     onChange?: (newLevel: TrustLevel) => void;
-    type?: 'user' | 'device';
+    type?: "user" | "device";
 }
-export declare const TrustLevelDropdown: ({ userId, dataContext, onChange, type }: TrustLevelDropdownProps) => React.JSX.Element;
+export declare const TrustLevelDropdown: ({ userId, dataContext, onChange, type, }: TrustLevelDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/trust-level-dropdown.js

@@ -1,57 +1,42 @@
 "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 __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.TrustLevelDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const loading_indicator_1 = require("./loading-indicator");
-const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user' }) => {
+const TrustLevelDropdown = ({ userId, dataContext, onChange, type = "user", }) => {
     const [trustLevel, setTrustLevelState] = (0, react_1.useState)(peers_sdk_1.TrustLevel.Unknown);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const allTrustLevelConfigs = [
-        { value: peers_sdk_1.TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
-        { value: peers_sdk_1.TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
-        { value: peers_sdk_1.TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
-        { value: peers_sdk_1.TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device', showFor: 'device' },
-        { value: peers_sdk_1.TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User', showFor: 'user' },
-        { value: peers_sdk_1.TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
-        { value: peers_sdk_1.TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
-        { value: peers_sdk_1.TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+        { value: peers_sdk_1.TrustLevel.Self, color: "success", icon: "bi-shield-fill-check", text: "Self" },
+        { value: peers_sdk_1.TrustLevel.Trusted, color: "success", icon: "bi-shield-check", text: "Trusted" },
+        { value: peers_sdk_1.TrustLevel.Known, color: "primary", icon: "bi-shield-check", text: "Known" },
+        {
+            value: peers_sdk_1.TrustLevel.NewDevice,
+            color: "info",
+            icon: "bi-shield-plus",
+            text: "New Device",
+            showFor: "device",
+        },
+        {
+            value: peers_sdk_1.TrustLevel.NewUser,
+            color: "info",
+            icon: "bi-shield-plus",
+            text: "New User",
+            showFor: "user",
+        },
+        { value: peers_sdk_1.TrustLevel.Unknown, color: "warning", icon: "bi-shield-exclamation", text: "Unknown" },
+        {
+            value: peers_sdk_1.TrustLevel.Untrusted,
+            color: "danger",
+            icon: "bi-shield-exclamation",
+            text: "Untrusted",
+        },
+        { value: peers_sdk_1.TrustLevel.Malicious, color: "danger", icon: "bi-shield-x", text: "Malicious" },
     ];
     // Filter configs based on type
-    const trustLevelConfigs = allTrustLevelConfigs.filter(config => !config.showFor || config.showFor === type);
+    const trustLevelConfigs = allTrustLevelConfigs.filter((config) => !config.showFor || config.showFor === type);
     (0, react_1.useEffect)(() => {
         async function loadTrustLevel() {
             const userContext = await (0, peers_sdk_1.getUserContext)();
@@ -73,7 +58,7 @@ const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user' }) =>
     }
     // Find current config
     const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
-    let currentConfig = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+    let currentConfig = { color: "secondary", icon: "bi-shield", text: "Unknown" };
     for (const config of sortedConfigs) {
         if (trustLevel >= config.value) {
             currentConfig = config;
@@ -83,16 +68,8 @@ const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user' }) =>
         }
     }
     if (loading) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    return (react_1.default.createElement("div", { className: "dropdown" },
-        react_1.default.createElement("button", { className: `btn btn-sm btn-${currentConfig.color} dropdown-toggle d-flex align-items-center gap-1`, type: "button", "data-bs-toggle": "dropdown", "data-bs-auto-close": "true", "data-bs-popper-config": '{"strategy":"fixed"}', "aria-expanded": "false" },
-            react_1.default.createElement("i", { className: currentConfig.icon }),
-            currentConfig.text),
-        react_1.default.createElement("ul", { className: "dropdown-menu" }, trustLevelConfigs.map((config) => (react_1.default.createElement("li", { key: config.value },
-            react_1.default.createElement("button", { className: "dropdown-item p-2", onClick: () => handleTrustLevelChange(config.value) },
-                react_1.default.createElement("span", { className: `badge bg-${config.color} d-flex align-items-center gap-2 w-100 py-2 px-3 fs-6 ${trustLevel === config.value ? 'border border-dark border-2' : ''}` },
-                    react_1.default.createElement("i", { className: config.icon }),
-                    config.text))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: `btn btn-sm btn-${currentConfig.color} dropdown-toggle d-flex align-items-center gap-1`, type: "button", "data-bs-toggle": "dropdown", "data-bs-auto-close": "true", "data-bs-popper-config": '{"strategy":"fixed"}', "aria-expanded": "false", children: [(0, jsx_runtime_1.jsx)("i", { className: currentConfig.icon }), currentConfig.text] }), (0, jsx_runtime_1.jsx)("ul", { className: "dropdown-menu", children: trustLevelConfigs.map((config) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("button", { className: "dropdown-item p-2", onClick: () => handleTrustLevelChange(config.value), children: (0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${config.color} d-flex align-items-center gap-2 w-100 py-2 px-3 fs-6 ${trustLevel === config.value ? "border border-dark border-2" : ""}`, children: [(0, jsx_runtime_1.jsx)("i", { className: config.icon }), config.text] }) }) }, config.value))) })] }));
 };
 exports.TrustLevelDropdown = TrustLevelDropdown;

package/dist/components/typeahead.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import type React from "react";
 export interface TypeaheadItem {
     id: string;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 interface TypeaheadProps<T extends TypeaheadItem> {
     placeholder?: string;
@@ -18,5 +18,5 @@ interface TypeaheadProps<T extends TypeaheadItem> {
     debounceMs?: number;
     maxResults?: number;
 }
-export declare function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>): React.JSX.Element;
+export declare function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};