react-native-inapp-inspector 2.0.0 → 2.0.2

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

@@ -8,10 +8,10 @@ const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const NetworkIcons_1 = require("../NetworkIcons");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
-const NativeInspector_1 = require("../../native/NativeInspector");
 const TabBar = react_1.default.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
     const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
@@ -85,9 +85,8 @@ const TabBar = react_1.default.memo(() => {
                 consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes = activeTab !== 'crash' &&
                 (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
-            return (<react_native_1.TouchableOpacity key={tab.key} activeOpacity={0.7} onPress={() => {
+            return (<TouchableScale_1.default key={tab.key} onPress={() => {
                     switchActiveTab(tab.key);
-                    (0, NativeInspector_1.triggerNativeHaptic)('light');
                 }} style={[
                     styles_1.default.contentTabButton,
                     isActive && styles_1.default.contentTabButtonActive,
@@ -124,7 +123,7 @@ const TabBar = react_1.default.memo(() => {
                         transform: [{ scale: unreadPulseAnim }],
                     }}/>)}
                 </react_native_1.View>
-              </react_native_1.TouchableOpacity>);
+              </TouchableScale_1.default>);
         })}
       </react_native_1.ScrollView>
     </react_native_1.View>);

package/dist/commonjs/components/Inspector/TelemetryConsentModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const TelemetryConsentModal: () => React.JSX.Element;
+export default TelemetryConsentModal;

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

@@ -0,0 +1,212 @@
+"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.TelemetryConsentModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../../styles/AppColors");
+const BrandCircleIcon_1 = require("../BrandCircleIcon");
+const telemetry_1 = require("../../helpers/telemetry");
+const TelemetryConsentModal = () => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        (0, telemetry_1.getTelemetryConsentStatus)().then(status => {
+            if (isMounted && status === 'undetermined') {
+                setVisible(true);
+                react_native_1.Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: true,
+                }).start();
+            }
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, [fadeAnim]);
+    const handleDecision = async (granted) => {
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+        }).start(async () => {
+            setVisible(false);
+            await (0, telemetry_1.setTelemetryConsent)(granted);
+            if (granted) {
+                // Immediately trigger the session initialization ping
+                (0, telemetry_1.sendSessionTelemetryPing)({ force: true });
+            }
+        });
+    };
+    if (!visible)
+        return null;
+    return (<react_native_1.Modal transparent visible={visible} animationType="none" statusBarTranslucent>
+      <react_native_1.View style={styles.overlay}>
+        <react_native_1.Animated.View style={[styles.card, { opacity: fadeAnim }]}>
+          <react_native_1.View style={styles.headerRow}>
+            <react_native_1.View style={styles.iconWrapper}>
+              <BrandCircleIcon_1.BrandCircleIcon size={40}/>
+            </react_native_1.View>
+            <react_native_1.View style={styles.titleContainer}>
+              <react_native_1.Text style={styles.title}>Help Improve In-App Inspector</react_native_1.Text>
+              <react_native_1.Text style={styles.subtitle}>Anonymous Diagnostic Insights</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <react_native_1.Text style={styles.description}>
+            To help us continually enhance tooling performance and compatibility,
+            would you mind sharing anonymous diagnostics (such as React Native
+            version, JavaScript engine, and platform architecture)?
+          </react_native_1.Text>
+
+          <react_native_1.View style={styles.privacyBadge}>
+            <react_native_1.Text style={styles.privacyText}>
+              🔒 <react_native_1.Text style={{ fontWeight: '700' }}>Privacy Guaranteed:</react_native_1.Text> We
+              only collect non-identifiable environment metrics. No personal
+              data, tokens, or network request payloads are ever collected.
+            </react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={styles.buttonRow}>
+            <react_native_1.TouchableOpacity style={styles.declineButton} onPress={() => handleDecision(false)} activeOpacity={0.7}>
+              <react_native_1.Text style={styles.declineText}>Not Now</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity style={styles.allowButton} onPress={() => handleDecision(true)} activeOpacity={0.8}>
+              <react_native_1.Text style={styles.allowText}>Allow & Share</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.Animated.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.TelemetryConsentModal = TelemetryConsentModal;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.65)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        zIndex: 999999,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        backgroundColor: '#1E1F29',
+        borderRadius: 20,
+        padding: 22,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.12)',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.5,
+        shadowRadius: 20,
+        elevation: 24,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 14,
+    },
+    iconWrapper: {
+        marginRight: 14,
+    },
+    titleContainer: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '700',
+        color: '#FFFFFF',
+        letterSpacing: -0.2,
+    },
+    subtitle: {
+        fontSize: 12,
+        color: AppColors_1.AppColors.purple || '#9055FF',
+        fontWeight: '600',
+        marginTop: 2,
+    },
+    description: {
+        fontSize: 13,
+        lineHeight: 19,
+        color: 'rgba(255, 255, 255, 0.75)',
+        marginBottom: 14,
+    },
+    privacyBadge: {
+        backgroundColor: 'rgba(144, 85, 255, 0.12)',
+        borderRadius: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(144, 85, 255, 0.25)',
+        marginBottom: 20,
+    },
+    privacyText: {
+        fontSize: 11,
+        lineHeight: 16,
+        color: '#D8C6FF',
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        gap: 12,
+    },
+    declineButton: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 10,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    },
+    declineText: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: 'rgba(255, 255, 255, 0.7)',
+    },
+    allowButton: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+        backgroundColor: '#7C3AED',
+    },
+    allowText: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: '#FFFFFF',
+    },
+});
+exports.default = exports.TelemetryConsentModal;

package/dist/commonjs/components/JsonViewer.js

@@ -106,20 +106,25 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
         }
     };
     const rawText = react_1.default.useMemo(() => {
+        if (data === undefined || data === null) {
+            return '';
+        }
         if (typeof data === 'string') {
             return data;
         }
         try {
-            return JSON.stringify(data);
+            const stringified = JSON.stringify(data);
+            return stringified ?? '';
         }
         catch {
-            return String(data);
+            return String(data) || '';
         }
     }, [data]);
     const [showFullRaw, setShowFullRaw] = (0, react_1.useState)(false);
     const RAW_LIMIT = 50000;
-    const isTruncated = rawText.length > RAW_LIMIT && !showFullRaw;
-    const displayRawText = isTruncated ? rawText.slice(0, RAW_LIMIT) : rawText;
+    const safeRawText = typeof rawText === 'string' ? rawText : '';
+    const isTruncated = safeRawText.length > RAW_LIMIT && !showFullRaw;
+    const displayRawText = isTruncated ? safeRawText.slice(0, RAW_LIMIT) : safeRawText;
     (0, react_1.useEffect)(() => {
         if (externalMode) {
             setInternalMode(externalMode);

package/dist/commonjs/components/LogCard.js

@@ -97,6 +97,22 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             }).start();
         }
     }, [isNew]);
+    const renderStatusIcon = () => {
+        if (isLoading) {
+            return <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.darkOrange} size={9}/>;
+        }
+        const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
+        if (num >= 200 && num < 300) {
+            return <NetworkIcons_1.CircleCheckIcon color={AppColors_1.AppColors.greenColor} size={9}/>;
+        }
+        if (num >= 300 && num < 400) {
+            return <NetworkIcons_1.RepeatIcon color={AppColors_1.AppColors.amber700} size={9}/>;
+        }
+        if (num >= 400 && num < 500) {
+            return <NetworkIcons_1.CircleAlertIcon color={AppColors_1.AppColors.darkOrange} size={9}/>;
+        }
+        return <NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.errorColor} size={9}/>;
+    };
     const triggeredAt = (0, helpers_1.formatDateTime)(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale_1.default onPress={onPress} style={[
@@ -248,6 +264,9 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
           <react_native_1.View style={[
             styles_1.default.statusPill,
             {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3.5,
                 backgroundColor: isFailed
                     ? `${AppColors_1.AppColors.errorColor}15`
                     : isLoading
@@ -260,6 +279,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                         : `${statusColor}30`,
             },
         ]}>
+            {renderStatusIcon()}
             <react_native_1.Text style={[
             styles_1.default.statusPillText,
             {
@@ -282,7 +302,17 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
         {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
         <react_native_1.View style={styles_1.default.cardSlugBox}>
           <react_native_1.Pressable onPress={handleOpenUrl} style={styles_1.default.slugLeft} hitSlop={6}>
-            <react_native_1.Text style={styles_1.default.slugTag}>URL ↗</react_native_1.Text>
+            <react_native_1.View style={{
+            width: 17,
+            height: 17,
+            borderRadius: 4,
+            backgroundColor: `${AppColors_1.AppColors.skyBlue}1A`,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginRight: 4,
+        }}>
+              <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.skyBlue} size={11}/>
+            </react_native_1.View>
             <HighlightText_1.default text={item.url} search={searchStr} style={[styles_1.default.slugText, { color: AppColors_1.AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles_1.default.highlight} numberOfLines={2} ellipsizeMode="middle"/>
           </react_native_1.Pressable>
 

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextStyle } from 'react-native';
+export interface LogSyntaxHighlighterProps {
+    text: string;
+    search?: string;
+    numberOfLines?: number;
+    style?: TextStyle | TextStyle[];
+    detectLinks?: boolean;
+}
+interface Token {
+    type: 'key' | 'string' | 'number' | 'boolean' | 'null' | 'url' | 'bracket' | 'tag' | 'plain';
+    value: string;
+}
+export declare const tokenizeText: (input: string) => Token[];
+export declare const LogSyntaxHighlighter: React.FC<LogSyntaxHighlighterProps>;
+export default LogSyntaxHighlighter;

package/dist/commonjs/components/LogSyntaxHighlighter.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogSyntaxHighlighter = exports.tokenizeText = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const helpers_1 = require("../helpers");
+const TOKEN_REGEX = /("(?:\\.|[^"\\])*"(?=\s*:))|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(\b(?:true|false)\b)|(\b(?:null|undefined|NaN)\b)|(https?:\/\/[^\s"',]+)|(\[[\w\s_-]+\])|([{}[\],:])|([^"'\d\s{}[\],:]+|[ \t\r\n]+)/g;
+const tokenizeText = (input) => {
+    if (!input)
+        return [];
+    const tokens = [];
+    let match;
+    TOKEN_REGEX.lastIndex = 0;
+    while ((match = TOKEN_REGEX.exec(input)) !== null) {
+        if (match[1]) {
+            tokens.push({ type: 'key', value: match[1] });
+        }
+        else if (match[2]) {
+            tokens.push({ type: 'string', value: match[2] });
+        }
+        else if (match[3]) {
+            tokens.push({ type: 'number', value: match[3] });
+        }
+        else if (match[4]) {
+            tokens.push({ type: 'boolean', value: match[4] });
+        }
+        else if (match[5]) {
+            tokens.push({ type: 'null', value: match[5] });
+        }
+        else if (match[6]) {
+            tokens.push({ type: 'url', value: match[6] });
+        }
+        else if (match[7]) {
+            tokens.push({ type: 'tag', value: match[7] });
+        }
+        else if (match[8]) {
+            tokens.push({ type: 'bracket', value: match[8] });
+        }
+        else if (match[9]) {
+            tokens.push({ type: 'plain', value: match[9] });
+        }
+    }
+    return tokens;
+};
+exports.tokenizeText = tokenizeText;
+const getTokenColor = (type) => {
+    switch (type) {
+        case 'key':
+            return AppColors_1.AppColors.sky600 || '#0369a1';
+        case 'string':
+            return AppColors_1.AppColors.emerald600 || '#059669';
+        case 'number':
+            return AppColors_1.AppColors.amber600 || '#d97706';
+        case 'boolean':
+            return AppColors_1.AppColors.purple || '#7c3aed';
+        case 'null':
+            return AppColors_1.AppColors.red600 || '#dc2626';
+        case 'url':
+            return '#0284c7';
+        case 'tag':
+            return AppColors_1.AppColors.violet600 || '#7c3aed';
+        case 'bracket':
+            return AppColors_1.AppColors.slate500 || '#64748b';
+        case 'plain':
+        default:
+            return AppColors_1.AppColors.primaryBlack || '#1e293b';
+    }
+};
+exports.LogSyntaxHighlighter = react_1.default.memo(({ text, search, numberOfLines, style, detectLinks = true }) => {
+    if (!text)
+        return null;
+    const tokens = react_1.default.useMemo(() => (0, exports.tokenizeText)(text), [text]);
+    const renderToken = (token, tokenIdx) => {
+        const baseColor = getTokenColor(token.type);
+        const isUrl = token.type === 'url';
+        const isKey = token.type === 'key';
+        const tokenStyle = {
+            color: baseColor,
+            fontFamily: isKey ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interRegular,
+            textDecorationLine: isUrl ? 'underline' : 'none',
+        };
+        if (!search || search.trim().length === 0) {
+            return (<react_native_1.Text key={tokenIdx} style={tokenStyle} onPress={isUrl && detectLinks
+                    ? () => (0, helpers_1.handleOpenExternalLink)(token.value)
+                    : undefined}>
+            {token.value}
+          </react_native_1.Text>);
+        }
+        const regex = new RegExp(`(${(0, helpers_1.escapeRegex)(search.trim())})`, 'gi');
+        const parts = token.value.split(regex);
+        return (<react_native_1.Text key={tokenIdx} style={tokenStyle}>
+          {parts.map((part, partIdx) => {
+                const isMatch = part.toLowerCase() === search.trim().toLowerCase();
+                return isMatch ? (<react_native_1.Text key={partIdx} style={[
+                        tokenStyle,
+                        styles.searchHighlight,
+                    ]}>
+                {part}
+              </react_native_1.Text>) : (<react_native_1.Text key={partIdx} style={tokenStyle} onPress={isUrl && detectLinks
+                        ? () => (0, helpers_1.handleOpenExternalLink)(token.value)
+                        : undefined}>
+                {part}
+              </react_native_1.Text>);
+            })}
+        </react_native_1.Text>);
+    };
+    return (<react_native_1.Text style={[styles.containerText, style]} numberOfLines={numberOfLines}>
+        {tokens.map(renderToken)}
+      </react_native_1.Text>);
+});
+const styles = react_native_1.StyleSheet.create({
+    containerText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        lineHeight: 18,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    searchHighlight: {
+        backgroundColor: '#fef08a',
+        color: '#854d0e',
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        borderRadius: 2,
+    },
+});
+exports.default = exports.LogSyntaxHighlighter;

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

@@ -125,3 +125,5 @@ export declare const AlertTriangleIcon: ({ color, size }: IconProps) => React.JS
 export declare const BugIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ResetIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ChevronDownIcon: ({ 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.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.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"));
 // Stylesheet
@@ -860,3 +860,12 @@ const NpmIcon = ({ color = '#CB3837', size = 14 }) => (<react_native_svg_1.defau
     <react_native_svg_1.Path d="M48 48h160v160h-32V96h-32v112H48V48z" fill="#FFFFFF"/>
   </react_native_svg_1.default>);
 exports.NpmIcon = NpmIcon;
+const ResetIcon = ({ color = AppColors_1.AppColors.white, size = 16 }) => (<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 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ResetIcon = ResetIcon;
+const ChevronDownIcon = ({ 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.Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ChevronDownIcon = ChevronDownIcon;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SliderProps {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    formatLabel?: (value: number) => string;
+    quickPresets?: number[];
+    disabled?: boolean;
+}
+export declare const Slider: React.FC<SliderProps>;
+export default Slider;