react-native-inapp-inspector 2.3.9 → 2.3.11

package/dist/commonjs/components/Inspector/NetworkTab.js

@@ -39,99 +39,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
-const useAccordion_1 = __importDefault(require("../../customHooks/useAccordion"));
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
 const DomainHeader_1 = __importDefault(require("../DomainHeader"));
 const LogCard_1 = __importDefault(require("../LogCard"));
 const EmptyState_1 = __importDefault(require("../EmptyState"));
 const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const NetworkFilterModal_1 = __importDefault(require("./NetworkFilterModal"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const i18n_1 = require("../../i18n");
 const NetworkIcons_1 = require("../NetworkIcons");
-const STATUS_META = {
-    ALL: { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon },
-    '2xx': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
-    '200': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
-    '3xx': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
-    '300': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
-    '4xx': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '400': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '404': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
-    '5xx': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-    '500': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-    Failed: { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
-};
-const getStatusMeta = (filter) => {
-    if (STATUS_META[filter])
-        return STATUS_META[filter];
-    const num = parseInt(filter, 10);
-    if (!isNaN(num)) {
-        if (num >= 200 && num < 300)
-            return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
-        if (num >= 300 && num < 400)
-            return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
-        if (num >= 400 && num < 500)
-            return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
-        if (num >= 500)
-            return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
-    }
-    if (filter.startsWith('2'))
-        return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
-    if (filter.startsWith('3'))
-        return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
-    if (filter.startsWith('4'))
-        return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
-    if (filter.startsWith('5'))
-        return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
-    return { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon };
-};
-const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, onPress, }) => {
-    const iconColor = active ? color : AppColors_1.AppColors.grayTextWeak;
-    return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
-      <react_native_1.View style={[
-            styles_1.default.statusFilterChip,
-            {
-                paddingHorizontal: 9,
-                paddingVertical: 5,
-                borderRadius: 7,
-                borderWidth: 1,
-                borderColor: active ? color : `${AppColors_1.AppColors.grayBorderSecondary}`,
-                backgroundColor: active ? `${color}14` : AppColors_1.AppColors.grayBackground,
-            },
-            active && {
-                shadowColor: color,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.2,
-                shadowRadius: 2,
-                elevation: 1.5,
-            },
-        ]}>
-        {badge != null ? (<react_native_1.View style={[
-                styles_1.default.methodBadgeMini,
-                { backgroundColor: badge },
-            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
-        <react_native_1.Text numberOfLines={1} style={[
-            styles_1.default.statusFilterText,
-            {
-                color: active ? color : AppColors_1.AppColors.grayText,
-                fontFamily: active ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
-            },
-        ]}>
-          {label}
-        </react_native_1.Text>
-      </react_native_1.View>
-    </TouchableScale_1.default>);
-});
 const NetworkTab = react_1.default.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
     const { t } = (0, i18n_1.useTranslation)();
-    const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
+    const [isFilterModalOpen, setIsFilterModalOpen] = react_1.default.useState(false);
     const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const modalFilterState = (0, react_1.useMemo)(() => ({
+        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
+        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
+        latency: 'all',
+        protocol: 'all',
+        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
+    }), [statusFilters, methodFilters, sortOrder]);
+    const handleApplyNetworkFilters = (0, react_1.useCallback)((newFilters) => {
+        if (newFilters.statusCodes.has('all') ||
+            newFilters.statusCodes.size === 0) {
+            setStatusFilters(new Set());
+        }
+        else {
+            setStatusFilters(new Set(newFilters.statusCodes));
+        }
+        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
+            setMethodFilters(new Set());
+        }
+        else {
+            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
+        }
+        if (newFilters.sortBy === 'time_asc') {
+            setSortOrder('oldest');
+        }
+        else {
+            setSortOrder('newest');
+        }
+    }, [setStatusFilters, setMethodFilters, setSortOrder]);
     const quickCounts = (0, react_1.useMemo)(() => {
         let errorCount = 0;
         let successCount = 0;
@@ -558,10 +512,12 @@ const NetworkTab = react_1.default.memo(() => {
 
                 <TouchableScale_1.default style={[
                 styles_1.default.toolbarBtn,
-                filtersAccordion.isOpen &&
-                    styles_1.default.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
-                  <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                (statusFilters.size > 0 || methodFilters.size > 0) && {
+                    borderColor: AppColors_1.AppColors.purple,
+                    backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+                  <NetworkIcons_1.FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors_1.AppColors.purple
                 : AppColors_1.AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
@@ -723,6 +679,51 @@ const NetworkTab = react_1.default.memo(() => {
                       </react_native_1.View>
                     </TouchableScale_1.default>);
             })}
+
+                <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)}>
+                  <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                paddingVertical: 4.5,
+                borderRadius: 8,
+                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? `${AppColors_1.AppColors.purple}20`
+                    : AppColors_1.AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayBorderSecondary,
+                gap: 5,
+            }}>
+                    <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayText}/>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10.5,
+                color: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayText,
+            }}>
+                      More Filters
+                    </react_native_1.Text>
+                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.purple,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 6,
+                }}>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                          {statusFilters.size + methodFilters.size}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
+                  </react_native_1.View>
+                </TouchableScale_1.default>
               </react_native_1.ScrollView>
             </react_native_1.View>
 
@@ -871,86 +872,24 @@ const NetworkTab = react_1.default.memo(() => {
                 </TouchableScale_1.default>
               </react_native_1.View>)}
 
-            <react_native_1.Animated.View style={[
-                filtersAccordion.bodyStyle,
-                { overflow: 'hidden' },
-            ]}>
-              <react_native_1.View style={styles_1.default.filtersContainer}>
-                <react_native_1.Text style={styles_1.default.filtersHeading}>
-                  STATUS
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                  {constants_1.STATUS_FILTERS.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? statusFilters.size === 0
-                    : statusFilters.has(filter);
-                const meta = getStatusMeta(filter);
-                return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
-                        if (isAll) {
-                            setStatusFilters(new Set());
-                        }
-                        else {
-                            setStatusFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </react_native_1.ScrollView>
-
-                <react_native_1.Text style={[
-                styles_1.default.filtersHeading,
-                { marginTop: 16 },
-            ]}>
-                  METHOD
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
-                  {availableMethods.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? methodFilters.size === 0
-                    : methodFilters.has(filter);
-                const methodColor = constants_1.METHOD_COLORS[filter] ??
-                    constants_1.METHOD_COLORS.ALL;
-                return (<FilterChip key={filter} label={filter} color={methodColor} badge={methodColor} active={active} onPress={() => {
-                        if (isAll) {
-                            setMethodFilters(new Set());
-                        }
-                        else {
-                            setMethodFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </react_native_1.ScrollView>
-              </react_native_1.View>
-            </react_native_1.Animated.View>
-
             {(search ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
+                methodFilters.size > 0 ||
+                quickFilter !== 'all') && (<react_native_1.Text style={styles_1.default.resultCount}>
                 {filteredLogs.length === logs.length
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </react_native_1.Text>)}
           </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                methodFilters.size > 0 ||
+                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
                 ? 'No matching API requests'
                 : 'No network activity'} onClearSearch={() => {
                 setSearch('');
                 setStatusFilters(new Set());
                 setMethodFilters(new Set());
+                setQuickFilter('all');
                 setSearchScope('all');
             }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
@@ -978,6 +917,9 @@ const NetworkTab = react_1.default.memo(() => {
           <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
         </react_native_1.View>
       </TouchableScale_1.default>
+
+      
+      <NetworkFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
     </react_native_1.View>);
 });
 exports.default = NetworkTab;

package/dist/commonjs/components/Inspector/SettingsPanel.js

@@ -135,6 +135,13 @@ const SettingsPanel = () => {
             icon: 'storage',
             desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
         },
+        {
+            key: 'debugging',
+            label: 'Multi-Device Debugging',
+            category: 'diagnostic',
+            icon: 'debugging',
+            desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
+        },
     ];
     const [stagedTabVisibility, setStagedTabVisibility] = (0, react_1.useState)(() => ({
         apis: true,
@@ -146,6 +153,7 @@ const SettingsPanel = () => {
         crash: Boolean(tabVisibility?.crash),
         device: Boolean(tabVisibility?.device),
         storage: Boolean(tabVisibility?.storage),
+        debugging: Boolean(tabVisibility?.debugging ?? true),
     }));
     (0, react_1.useEffect)(() => {
         setStagedTabVisibility({
@@ -158,6 +166,7 @@ const SettingsPanel = () => {
             crash: Boolean(tabVisibility?.crash),
             device: Boolean(tabVisibility?.device),
             storage: Boolean(tabVisibility?.storage),
+            debugging: Boolean(tabVisibility?.debugging ?? true),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = (0, react_1.useMemo)(() => {
@@ -545,6 +554,9 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={isChecked
                             ? AppColors_1.AppColors.purple
                             : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'debugging' && (<NetworkIcons_1.QrCodeIcon color={isChecked
+                            ? AppColors_1.AppColors.purple
+                            : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
                         </react_native_1.View>
 
                         

package/dist/commonjs/components/Inspector/TabBar.js

@@ -73,8 +73,16 @@ const TabBar = react_1.default.memo(() => {
                 count: 0,
                 icon: 'storage',
             },
+            {
+                key: 'debugging',
+                label: 'Debugging',
+                count: 0,
+                icon: 'debugging',
+            },
         ]
             .filter(tab => {
+            if (tab.key === 'debugging')
+                return true;
             if (!tabVisibility?.[tab.key])
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)
@@ -117,6 +125,7 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'debugging' && (<NetworkIcons_1.QrCodeIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&

package/dist/commonjs/components/LogCard.js

@@ -236,29 +236,6 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                   GQL
                 </react_native_1.Text>
               </react_native_1.View>)}
-
-            
-            {item.duration != null && !isFailed && (<react_native_1.View style={[
-                styles_1.default.chip,
-                {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                },
-            ]}>
-                <react_native_1.Text style={[
-                styles_1.default.chipText,
-                {
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: durationColor,
-                },
-            ]}>
-                  {item.duration}ms
-                </react_native_1.Text>
-              </react_native_1.View>)}
           </react_native_1.View>
 
           <react_native_1.View style={[
@@ -277,6 +254,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                     : isLoading
                         ? `${AppColors_1.AppColors.darkOrange}30`
                         : `${statusColor}30`,
+                flexShrink: 0,
             },
         ]}>
             {renderStatusIcon()}
@@ -310,6 +288,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             alignItems: 'center',
             justifyContent: 'center',
             marginRight: 4,
+            flexShrink: 0,
         }}>
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.skyBlue} size={11}/>
             </react_native_1.View>
@@ -348,8 +327,8 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
 
         
         <react_native_1.View style={styles_1.default.cardFooterRow}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0 }}>
-            <react_native_1.View style={styles_1.default.cardDateRow}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8 }}>
+            <react_native_1.View style={[styles_1.default.cardDateRow, { flexShrink: 0 }]}>
               <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
               <react_native_1.Text style={styles_1.default.cardDateText}>{triggeredAt}</react_native_1.Text>
             </react_native_1.View>
@@ -366,7 +345,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                     paddingVertical: 1,
                     borderRadius: 4,
                     flexShrink: 1,
-                    maxWidth: 160,
+                    minWidth: 0,
                 },
             ]}>
                 <NetworkIcons_1.PinIcon color={AppColors_1.AppColors.skyBlue} size={8.5}/>

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -133,3 +133,5 @@ export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -894,3 +894,15 @@ const PlusIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) =>
     <react_native_svg_1.Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
 exports.PlusIcon = PlusIcon;
+const LockIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M7 11V7a5 5 0 0 1 10 0v4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.LockIcon = LockIcon;
+const QrCodeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Path d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z" fill={color}/>
+  </react_native_svg_1.default>);
+exports.QrCodeIcon = QrCodeIcon;

package/dist/commonjs/components/QRCodeView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface QRCodeViewProps {
+    value: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+}
+export declare const QRCodeView: React.FC<QRCodeViewProps>;
+export default QRCodeView;

package/dist/commonjs/components/QRCodeView.js

@@ -0,0 +1,79 @@
+"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.QRCodeView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const qrGenerator_1 = require("../helpers/qrGenerator");
+const AppColors_1 = require("../styles/AppColors");
+const QRCodeView = ({ value, size = 180, color = AppColors_1.AppColors.primaryBlack, backgroundColor = AppColors_1.AppColors.white, }) => {
+    const matrix = (0, react_1.useMemo)(() => (0, qrGenerator_1.generateQRMatrix)(value), [value]);
+    const numCells = matrix.length;
+    const cellSize = size / numCells;
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                width: size + 16,
+                height: size + 16,
+                backgroundColor,
+            },
+        ]}>
+      <react_native_svg_1.default width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <react_native_svg_1.G>
+          {matrix.map((row, r) => row.map((cell, c) => {
+            if (!cell)
+                return null;
+            return (<react_native_svg_1.Rect key={`${r}-${c}`} x={c * cellSize} y={r * cellSize} width={cellSize + 0.2} height={cellSize + 0.2} fill={color}/>);
+        }))}
+        </react_native_svg_1.G>
+      </react_native_svg_1.default>
+    </react_native_1.View>);
+};
+exports.QRCodeView = QRCodeView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 8,
+        borderRadius: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        elevation: 3,
+    },
+});
+exports.default = exports.QRCodeView;

package/dist/commonjs/constants/index.js

@@ -21,6 +21,9 @@ exports.METHOD_COLORS = {
     PUT: '#D97706',
     PATCH: '#7C3AED',
     DELETE: '#DC2626',
+    QUERY: '#0284C7',
+    OPTIONS: '#475569',
+    HEAD: '#0891B2',
 };
 exports.DOMAIN_COLORS = AppColors_1.AppColors.domainColors;
 exports.DURATION_FAST_MS = 200;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.9";
+export declare const LIB_VERSION = "2.3.11";

package/dist/commonjs/constants/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '2.3.9';
+exports.LIB_VERSION = '2.3.11';

package/dist/commonjs/helpers/qrGenerator.d.ts

@@ -0,0 +1,2 @@
+export type QRECC = 'L' | 'M' | 'Q' | 'H';
+export declare function generateQRMatrix(text: string, ecc?: QRECC): boolean[][];