react-native-inapp-inspector 1.1.23 → 1.1.25

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

@@ -1,37 +1,4 @@
 "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;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const i18n_1 = require("../../i18n");
 const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
 const InspectorContext_1 = require("./InspectorContext");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
@@ -111,70 +77,122 @@ const NetworkDetail = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 6,
+                    flexWrap: 'wrap',
+                    flex: 1,
                 }}>
+                    {/* Method Chip */}
                     <react_native_1.View style={[
                     styles_1.default.methodBadge,
                     {
                         backgroundColor: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 7,
                     },
                 ]}>
                       <react_native_1.Text style={[
                     styles_1.default.methodBadgeText,
                     {
                         color: AppColors_1.AppColors.white,
+                        fontSize: 10.5,
                     },
                 ]}>
                         {selected.method}
                       </react_native_1.Text>
                     </react_native_1.View>
 
+                    {/* Status Pill */}
                     {selected.status != null && (<react_native_1.View style={[
                         styles_1.default.chip,
                         {
                             backgroundColor: selected.status === 0
-                                ? `${AppColors_1.AppColors.errorColor}15`
-                                : `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                                ? `${AppColors_1.AppColors.errorColor}18`
+                                : `${(0, helpers_1.getStatusColor)(selected.status)}18`,
                             borderColor: selected.status === 0
                                 ? `${AppColors_1.AppColors.errorColor}40`
                                 : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
                         },
                     ]}>
-                        {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
-                            <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
-                          </react_native_svg_1.default>)}
+                        {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_1.View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                        }}/>)}
                         <react_native_1.Text style={[
                         styles_1.default.chipText,
                         {
                             color: selected.status === 0
                                 ? AppColors_1.AppColors.errorColor
                                 : (0, helpers_1.getStatusColor)(selected.status),
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
                         },
                     ]}>
                           {selected.status === 0
                         ? 'Failed'
-                        : String(selected.status)}
+                        : `${selected.status} ${selected.status === 200 ? 'OK' : ''}`}
                         </react_native_1.Text>
                       </react_native_1.View>)}
 
+                    {/* Duration Pill */}
                     {selected.duration != null && (<react_native_1.View style={[
                         styles_1.default.chip,
                         {
-                            backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                            borderColor: `${AppColors_1.AppColors.purple}2E`,
+                            backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
+                            borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
                         },
                     ]}>
+                        <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
                         <react_native_1.Text style={[
                         styles_1.default.chipText,
-                        { color: AppColors_1.AppColors.purple },
+                        {
+                            color: AppColors_1.AppColors.brandPurple,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
                     ]}>
                           {selected.duration}ms
                         </react_native_1.Text>
                       </react_native_1.View>)}
+
+                    {/* Size Pill */}
+                    {selected.response != null && (<react_native_1.View style={[
+                        styles_1.default.chip,
+                        {
+                            backgroundColor: `${AppColors_1.AppColors.sky600}14`,
+                            borderColor: `${AppColors_1.AppColors.sky600}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
+                        },
+                    ]}>
+                        <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.sky600} size={10}/>
+                        <react_native_1.Text style={[
+                        styles_1.default.chipText,
+                        {
+                            color: AppColors_1.AppColors.sky600,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
+                    ]}>
+                          {(0, helpers_1.getSize)(selected.response)}
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
                   </react_native_1.View>
+
                   <react_native_1.View style={styles_1.default.detailInfoRight}>
-                    <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
-                      <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                    <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                      <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
                     </TouchableScale_1.default>
                     <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
                     <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
@@ -182,67 +200,99 @@ const NetworkDetail = react_1.default.memo(() => {
                   </react_native_1.View>
                 </react_native_1.View>
 
+                {/* Full Live URL Analysis Card */}
                 <react_native_1.Pressable style={{
                     backgroundColor: AppColors_1.AppColors.grayBackground,
                     borderRadius: 10,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.dividerColor,
                     padding: 10,
-                    marginTop: 6,
+                    marginTop: 8,
+                    gap: 6,
                 }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: 2,
                 }}>
-                    <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    flex: 1,
-                }} numberOfLines={1}>
-                      {schemeStr ? (<>
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      {schemeStr ? (<react_native_1.View style={{
+                        backgroundColor: schemeStr.startsWith('https')
+                            ? `${AppColors_1.AppColors.green600}18`
+                            : `${AppColors_1.AppColors.amber500}18`,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
+                        borderRadius: 4,
+                    }}>
                           <react_native_1.Text style={{
-                        color: AppColors_1.AppColors.slate400,
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9,
+                        color: schemeStr.startsWith('https')
+                            ? AppColors_1.AppColors.green600
+                            : AppColors_1.AppColors.amber500,
                     }}>
-                            {schemeStr}
+                            {schemeStr.replace('://', '').toUpperCase()}
                           </react_native_1.Text>
-                          {hostStr}
-                        </>) : (hostStr || 'API Endpoint')}
-                    </react_native_1.Text>
-                    {queryStr ? (<react_native_1.View style={{
+                        </react_native_1.View>) : null}
+
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.4,
+                    textTransform: 'uppercase',
+                }}>
+                        ENDPOINT URL ↗
+                      </react_native_1.Text>
+                    </react_native_1.View>
+
+                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                      {queryStr ? (<react_native_1.View style={{
                         backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                        paddingHorizontal: 5,
-                        paddingVertical: 1,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
                         borderRadius: 4,
                     }}>
-                        <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 8.5,
                         color: AppColors_1.AppColors.purple,
                     }}>
-                          {t('network.queryParams')}
+                            {t('network.queryParams')}
+                          </react_native_1.Text>
+                        </react_native_1.View>) : null}
+
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors_1.AppColors.sky600}14`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                }}>
+                        <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={10}/>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.sky600,
+                }}>
+                          Open ↗
                         </react_native_1.Text>
-                      </react_native_1.View>) : null}
+                      </react_native_1.View>
+                    </react_native_1.View>
                   </react_native_1.View>
+
+                  {/* Full Clickable Hyperlink */}
                   <react_native_1.Text selectable={true} style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 12,
-                    color: AppColors_1.AppColors.primaryBlack,
-                    marginTop: 2,
-                }} numberOfLines={2}>
-                    {pathStr}
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 12.5,
+                    color: AppColors_1.AppColors.skyBlue,
+                    textDecorationLine: 'underline',
+                    lineHeight: 18,
+                }}>
+                    {detailDisplayUrl}
                   </react_native_1.Text>
-                  {queryStr ? (<react_native_1.Text selectable={true} style={{
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
-                        fontSize: 10,
-                        color: AppColors_1.AppColors.grayTextWeak,
-                        marginTop: 4,
-                    }} numberOfLines={1}>
-                      {queryStr}
-                    </react_native_1.Text>) : null}
                 </react_native_1.Pressable>
               </>);
         })()}

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

@@ -47,6 +47,7 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const i18n_1 = require("../../i18n");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
+const performanceTracker_1 = require("../../customHooks/performanceTracker");
 const PerformanceTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -72,10 +73,16 @@ const PerformanceTab = react_1.default.memo(() => {
     const [fpsHistory, setFpsHistory] = (0, react_1.useState)([
         60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
     ]);
-    // Performance Log Events
-    const [events, setEvents] = (0, react_1.useState)([]);
+    // Performance Log Events (Initialized with benchmark & diagnostics events)
+    const [events, setEvents] = (0, react_1.useState)(performanceTracker_1.INITIAL_EVENTS);
     const [filterCategory, setFilterCategory] = (0, react_1.useState)('ALL');
     const [search, setSearch] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        const unsub = (0, performanceTracker_1.subscribePerformanceEvents)(liveEvents => {
+            setEvents(liveEvents);
+        });
+        return unsub;
+    }, []);
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = (0, react_1.useRef)(Date.now());
     const rafIdRef = (0, react_1.useRef)(null);
@@ -119,9 +126,7 @@ const PerformanceTab = react_1.default.memo(() => {
                 // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
                     const durationStr = (1000 / measuredFps).toFixed(1);
-                    const newEvent = {
-                        id: `drop-${Date.now()}`,
-                        timestamp: Date.now(),
+                    (0, performanceTracker_1.logPerformanceEvent)({
                         type: 'fps_drop',
                         category: 'render',
                         fps: measuredFps,
@@ -135,8 +140,7 @@ const PerformanceTab = react_1.default.memo(() => {
                         },
                         advice: t('performance.liveFpsDipAdvice'),
                         severity: measuredFps < 30 ? 'critical' : 'warning',
-                    };
-                    setEvents(prev => [newEvent, ...prev.slice(0, 49)]);
+                    });
                 }
                 frameCount = 0;
                 maxLagInSecond = 0;
@@ -246,7 +250,7 @@ const PerformanceTab = react_1.default.memo(() => {
         };
     }, [avgFps, jsLagMs]);
     const clearEvents = () => {
-        setEvents([]);
+        (0, performanceTracker_1.clearPerformanceEvents)();
     };
     return (<react_native_1.View style={perfStyles.container}>
       {/* Search & Live Control Header */}
@@ -291,9 +295,9 @@ const PerformanceTab = react_1.default.memo(() => {
         </react_native_1.View>
       </react_native_1.View>
 
-      {/* Filter Tabs */}
+      {/* ─── Frozen Interactive Filter Tabs Under Search Component ─── */}
       <react_native_1.View style={perfStyles.filterRow}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={perfStyles.filterScrollContent}>
           {[
             { key: 'ALL', label: t('performance.allLogs'), Icon: NetworkIcons_1.BoltIcon, count: events.length },
             {
@@ -690,6 +694,12 @@ const perfStyles = react_native_1.StyleSheet.create({
         backgroundColor: AppColors_1.AppColors.white,
         borderBottomWidth: 1,
         borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingVertical: 5,
+    },
+    filterScrollContent: {
+        gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 2,
     },
     filterPill: {
         flexDirection: 'row',

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

@@ -62,6 +62,7 @@ export declare const ForwardChevronIcon: ({ color, size, }: any) => React.JSX.El
 export declare const BundleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const LiveStateIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RefreshCcwIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const StorageIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MetadataIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxIcon: ({ color, size, }: any) => React.JSX.Element;
@@ -78,3 +79,16 @@ export declare const BrainIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TextAaIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const CartIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const MoneyIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const ExternalLinkIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PackageBoxIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const GitHubIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LinkChainIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AndroidIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CodeBracketsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FlameIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const HourglassIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PinIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RepeatIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TargetGoalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const UserCheckIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,7 +37,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.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.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.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;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -475,6 +475,12 @@ const TimelineIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     </react_native_svg_1.default>);
 };
 exports.TimelineIcon = TimelineIcon;
+const RefreshCcwIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.RefreshCcwIcon = RefreshCcwIcon;
 const StorageIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Ellipse cx="12" cy="6" rx="8" ry="2.8" stroke={color} strokeWidth="1.8"/>
@@ -599,3 +605,89 @@ const MoneyIcon = ({ color = AppColors_1.AppColors.emerald500, size = 14 }) => {
     </react_native_svg_1.default>);
 };
 exports.MoneyIcon = MoneyIcon;
+const ExternalLinkIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M15 3h6v6M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ExternalLinkIcon = ExternalLinkIcon;
+const PackageBoxIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.PackageBoxIcon = PackageBoxIcon;
+const GitHubIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.GitHubIcon = GitHubIcon;
+const LinkChainIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.LinkChainIcon = LinkChainIcon;
+const AppleIcon = ({ color = AppColors_1.AppColors.white, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <react_native_svg_1.Path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.37c.61-.75 1.04-1.8 0.92-2.87-.9.04-1.99.6-2.63 1.35-.56.65-1.06 1.71-.93 2.74 1.01.08 2.03-.47 2.64-1.22z"/>
+    </react_native_svg_1.default>);
+};
+exports.AppleIcon = AppleIcon;
+const AndroidIcon = ({ color = AppColors_1.AppColors.white, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <react_native_svg_1.Path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v6c0 .83.67 1.5 1.5 1.5S5 16.33 5 15.5v-6C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v6c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.83-.67-1.5-1.5-1.5zm-4.97-4.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 2.23 12.95 2 12 2c-.96 0-1.86.23-2.66.63L7.85 1.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.73 4.26 5.54 6 5.16 8h13.68c-.38-2-1.57-3.74-3.31-4.84zM9 6c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
+    </react_native_svg_1.default>);
+};
+exports.AndroidIcon = AndroidIcon;
+const CodeBracketsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CodeBracketsIcon = CodeBracketsIcon;
+const FlameIcon = ({ color = AppColors_1.AppColors.darkOrange, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.FlameIcon = FlameIcon;
+const HourglassIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M5 22h14M5 2h14M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.HourglassIcon = HourglassIcon;
+const PinIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 21s-6-5.333-6-10a6 6 0 0 1 12 0c0 4.667-6 10-6 10z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="11" r="2" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.PinIcon = PinIcon;
+const RepeatIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.RepeatIcon = RepeatIcon;
+const TargetGoalIcon = ({ color = AppColors_1.AppColors.brandPurple, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="6" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="2" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.TargetGoalIcon = TargetGoalIcon;
+const UserCheckIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="9" cy="7" r="4" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Path d="M16 11l2 2 4-4" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.UserCheckIcon = UserCheckIcon;

package/dist/commonjs/components/SegmentedTabs.js

@@ -10,39 +10,48 @@ const AppFonts_1 = require("../styles/AppFonts");
 const SegmentedTabs = react_1.default.memo(({ tabs, activeKey, onChange, style }) => (<react_native_1.View style={[
         {
             flexDirection: 'row',
-            borderRadius: 8,
-            overflow: 'hidden',
+            borderRadius: 10,
+            backgroundColor: `${AppColors_1.AppColors.slate200}80`,
+            padding: 3,
             borderWidth: 1,
             borderColor: AppColors_1.AppColors.dividerColor,
-            backgroundColor: AppColors_1.AppColors.primaryLight,
+            gap: 3,
         },
         style,
     ]}>
-    {tabs.map((tab, index) => {
+    {tabs.map((tab) => {
         const isActive = activeKey === tab.key;
-        return (<react_native_1.Pressable key={tab.key} onPress={() => onChange(tab.key)} style={{
-                flex: 1,
-                paddingVertical: 8,
-                paddingHorizontal: 8,
-                backgroundColor: isActive
-                    ? AppColors_1.AppColors.brandPurple
-                    : AppColors_1.AppColors.primaryLight,
-                borderRightWidth: index < tabs.length - 1 ? 1 : 0,
-                borderRightColor: AppColors_1.AppColors.dividerColor,
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 4,
-                flexDirection: 'row',
-            }}>
+        return (<react_native_1.Pressable key={tab.key} onPress={() => onChange(tab.key)} style={({ pressed }) => [
+                {
+                    flex: 1,
+                    paddingVertical: 7,
+                    paddingHorizontal: 6,
+                    borderRadius: 7,
+                    backgroundColor: isActive
+                        ? AppColors_1.AppColors.brandPurple
+                        : 'transparent',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 4.5,
+                    flexDirection: 'row',
+                    opacity: pressed ? 0.8 : 1,
+                },
+                isActive && {
+                    shadowColor: AppColors_1.AppColors.brandPurple,
+                    shadowOffset: { width: 0, height: 1 },
+                    shadowOpacity: 0.25,
+                    shadowRadius: 3,
+                    elevation: 2,
+                },
+            ]}>
           {tab.icon ? tab.icon(isActive) : null}
           <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10,
+                fontSize: 10.5,
                 color: isActive
                     ? AppColors_1.AppColors.white
-                    : AppColors_1.AppColors.grayTextWeak,
-                textTransform: 'capitalize',
-                letterSpacing: 0.3,
+                    : AppColors_1.AppColors.grayText,
+                letterSpacing: 0.2,
             }}>
             {tab.label}
           </react_native_1.Text>