react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/QRCodeView.js

@@ -1,45 +1,8 @@
-import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import Svg, { Rect, G } from 'react-native-svg';
-import { generateQRMatrix } from '../helpers/qrGenerator';
-import { AppColors } from '../styles/AppColors';
-export const QRCodeView = ({ value, size = 200, color = '#000000', backgroundColor = '#FFFFFF', }) => {
-    const matrix = useMemo(() => generateQRMatrix(value || 'http://localhost:8081'), [value]);
-    const numCells = matrix.length || 21;
-    const margin = 4;
-    const totalCells = numCells + margin * 2;
-    const cellSize = size / totalCells;
-    return (<View style={[
-            styles.container,
-            {
-                width: size + 20,
-                height: size + 20,
-                backgroundColor,
-            },
-        ]}>
-      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-        <Rect width={size} height={size} fill={backgroundColor}/>
-        <G>
-          {matrix.map((row, r) => row.map((cell, c) => {
-            if (!cell)
-                return null;
-            return (<Rect key={`${r}-${c}`} x={(c + margin) * cellSize} y={(r + margin) * cellSize} width={cellSize + 0.3} height={cellSize + 0.3} fill={color}/>);
-        }))}
-        </G>
-      </Svg>
-    </View>);
-};
-const styles = StyleSheet.create({
-    container: {
-        padding: 10,
-        borderRadius: 14,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 3 },
-        shadowOpacity: 0.15,
-        shadowRadius: 8,
-        elevation: 4,
-    },
-});
-export default QRCodeView;
+import{useMemo as V}from"react";import{View as G,StyleSheet as M}from"react-native";import O,{Rect as F,G as Q}from"react-native-svg";import{generateQRMatrix as b}from"../helpers/qrGenerator";import{AppColors as j}from"../styles/AppColors";export const QRCodeView=({value:r,size:t=200,color:R="#000000",backgroundColor:i="#FFFFFF"})=>{const n=V(()=>b(r||"http://localhost:8081"),[r]),C=n.length||21,o=4,S=C+o*2,e=t/S;return<G style={[k.container,{width:t+20,height:t+20,backgroundColor:i}]}>
+      <O width={t}height={t}viewBox={`0 0 ${t} ${t}`}>
+        <F width={t}height={t}fill={i}/>
+        <Q>
+          {n.map(($,h)=>$.map((v,l)=>v?<F key={`${h}-${l}`}x={(l+o)*e}y={(h+o)*e}width={e+.3}height={e+.3}fill={R}/>:null))}
+        </Q>
+      </O>
+    </G>};const k=M.create({container:{padding:10,borderRadius:14,alignItems:"center",justifyContent:"center",shadowColor:j.black,shadowOffset:{width:0,height:3},shadowOpacity:.15,shadowRadius:8,elevation:4}});export default QRCodeView;

package/dist/esm/components/SectionHeader.js

@@ -1,39 +1,22 @@
-import React from 'react';
-import { View, Pressable, Text } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import CopyButton from './CopyButton';
-import TouchableScale from './TouchableScale';
-import { RequestIcon, ResponseIcon, HeadersIcon, DiffIcon, ChevronIcon, SearchIcon, } from './NetworkIcons';
-import styles from '../styles';
-const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }) => {
-    const isOpen = expanded === undefined ? false : !!expanded;
-    return (<View style={styles.sectionHeaderGradient}>
-      <View style={styles.sectionHeaderRow}>
-        <Pressable style={styles.sectionTitleRow} onPress={onToggleExpand} hitSlop={12}>
-          {title === 'Request' || title === 'API' ? (<RequestIcon color={AppColors.offerPurple}/>) : title === 'Response' ? (<ResponseIcon color={AppColors.greenColor}/>) : (<HeadersIcon color={AppColors.skyBlue}/>)}
-          <Text style={styles.sectionTitle}>{title}</Text>
-        </Pressable>
-        <View style={styles.sectionHeaderActions}>
-          {showSearch && (<TouchableScale onPress={onToggleSearch} hitSlop={12} style={[
-                styles.iconSquareBtn,
-                isSearching ? styles.iconSquareBtnActive : null,
-            ]}>
-              <SearchIcon color={isSearching ? AppColors.skyBlue : AppColors.grayTextWeak} size={14}/>
-            </TouchableScale>)}
-          {showDiff && (<TouchableScale onPress={onToggleDiff} hitSlop={12} style={[
-                styles.iconSquareBtn,
-                isDiffing ? styles.iconSquareBtnActive : null,
-            ]}>
-              <DiffIcon color={isDiffing ? AppColors.skyBlue : AppColors.grayTextWeak} size={14}/>
-            </TouchableScale>)}
-          <CopyButton value={value} label={title}/>
-          <TouchableScale onPress={onToggleExpand} hitSlop={12} style={styles.iconSquareBtn}>
-            <View style={{ transform: [{ rotate: isOpen ? '180deg' : '0deg' }] }}>
-              <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
-            </View>
-          </TouchableScale>
-        </View>
-      </View>
-    </View>);
-};
-export default SectionHeader;
+import"react";import{View as S,Pressable as A,Text as H}from"react-native";import{AppColors as o}from"../styles/AppColors";import V from"./CopyButton";import T from"./TouchableScale";import{RequestIcon as C,ResponseIcon as W,HeadersIcon as G,DiffIcon as O,ChevronIcon as D,SearchIcon as F}from"./NetworkIcons";import e from"../styles";const J=({title:r,value:b,expanded:h,onToggleExpand:B,showDiff:q,isDiffing:d,onToggleDiff:w,showSearch:I,isSearching:P,onToggleSearch:R})=>{const k=h===void 0?!1:!!h;return<S style={e.sectionHeaderGradient}>
+      <S style={e.sectionHeaderRow}>
+        <A style={e.sectionTitleRow}onPress={B}hitSlop={12}>
+          {r==="Request"||r==="API"?<C color={o.offerPurple}/>:r==="Response"?<W color={o.greenColor}/>:<G color={o.skyBlue}/>}
+          <H style={e.sectionTitle}>{r}</H>
+        </A>
+        <S style={e.sectionHeaderActions}>
+          {I&&<T onPress={R}hitSlop={12}style={[e.iconSquareBtn,P?e.iconSquareBtnActive:null]}>
+              <F color={P?o.skyBlue:o.grayTextWeak}size={14}/>
+            </T>}
+          {q&&<T onPress={w}hitSlop={12}style={[e.iconSquareBtn,d?e.iconSquareBtnActive:null]}>
+              <O color={d?o.skyBlue:o.grayTextWeak}size={14}/>
+            </T>}
+          <V value={b}label={r}/>
+          <T onPress={B}hitSlop={12}style={e.iconSquareBtn}>
+            <S style={{transform:[{rotate:k?"180deg":"0deg"}]}}>
+              <D color={o.grayTextStrong}size={14}/>
+            </S>
+          </T>
+        </S>
+      </S>
+    </S>};export default J;

package/dist/esm/components/SegmentedTabs.js

@@ -1,57 +1,8 @@
-import React from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-const SegmentedTabs = React.memo(({ tabs, activeKey, onChange, style }) => (<View style={[
-        {
-            flexDirection: 'row',
-            borderRadius: 10,
-            backgroundColor: `${AppColors.slate200}80`,
-            padding: 3,
-            borderWidth: 1,
-            borderColor: AppColors.dividerColor,
-            gap: 3,
-        },
-        style,
-    ]}>
-    {tabs.map((tab) => {
-        const isActive = activeKey === tab.key;
-        return (<Pressable key={tab.key} onPress={() => onChange(tab.key)} style={({ pressed }) => [
-                {
-                    flex: 1,
-                    paddingVertical: 7,
-                    paddingHorizontal: 6,
-                    borderRadius: 7,
-                    backgroundColor: isActive
-                        ? AppColors.brandPurple
-                        : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 4.5,
-                    flexDirection: 'row',
-                    opacity: pressed ? 0.8 : 1,
-                },
-                isActive && {
-                    shadowColor: AppColors.brandPurple,
-                    shadowOffset: { width: 0, height: 1 },
-                    shadowOpacity: 0.25,
-                    shadowRadius: 3,
-                    elevation: 2,
-                },
-            ]}>
-          {tab.icon ? tab.icon(isActive) : null}
-          <Text numberOfLines={1} ellipsizeMode="tail" style={{
-                flexShrink: 1,
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: isActive
-                    ? AppColors.white
-                    : AppColors.grayText,
-                letterSpacing: 0.2,
-            }}>
-            {tab.label}
-          </Text>
-        </Pressable>);
-    })}
-  </View>));
-export default SegmentedTabs;
+import d from"react";import{Pressable as C,Text as P,View as R}from"react-native";import{AppColors as o}from"../styles/AppColors";import{AppFonts as S}from"../styles/AppFonts";const T=d.memo(({tabs:i,activeKey:t,onChange:n,style:l})=><R style={[{flexDirection:"row",borderRadius:10,backgroundColor:`${o.slate200}80`,padding:3,borderWidth:1,borderColor:o.dividerColor,gap:3,minWidth:0},l]}>
+    {i.map(e=>{const r=t===e.key;return<C key={e.key}onPress={()=>n(e.key)}style={({pressed:a})=>[{flex:1,paddingVertical:7,paddingHorizontal:6,borderRadius:7,backgroundColor:r?o.brandPurple:"transparent",alignItems:"center",justifyContent:"center",gap:4.5,flexDirection:"row",opacity:a?.8:1},r&&{shadowColor:o.brandPurple,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:3,elevation:2}]}>
+          {e.icon?e.icon(r):null}
+          <P numberOfLines={1}ellipsizeMode="tail"style={{flexShrink:1,fontFamily:S.interBold,fontSize:10.5,color:r?o.white:o.grayText,letterSpacing:.2}}>
+            {e.label}
+          </P>
+        </C>})}
+  </R>);export default T;

package/dist/esm/components/SkeletonPlaceholder.js

@@ -1,173 +1,40 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
-    const shimmerAnim = useRef(new Animated.Value(0.35)).current;
-    useEffect(() => {
-        const animation = Animated.loop(Animated.sequence([
-            Animated.timing(shimmerAnim, {
-                toValue: 0.85,
-                duration: 750,
-                useNativeDriver: false,
-            }),
-            Animated.timing(shimmerAnim, {
-                toValue: 0.35,
-                duration: 750,
-                useNativeDriver: false,
-            }),
-        ]));
-        animation.start();
-        return () => animation.stop();
-    }, [shimmerAnim]);
-    return (<View style={skeletonStyles.container}>
+import B,{useEffect as R,useRef as x}from"react";import{Animated as k,StyleSheet as v,View as S}from"react-native";import{AppColors as w}from"../styles/AppColors";export const SkeletonPlaceholder=B.memo(function({cardCount:C=4}){const b=x(new k.Value(.35)).current;return R(()=>{const f=k.loop(k.sequence([k.timing(b,{toValue:.85,duration:750,useNativeDriver:!1}),k.timing(b,{toValue:.35,duration:750,useNativeDriver:!1})]));return f.start(),()=>f.stop()},[b]),<S style={e.container}>
       
-      <View style={skeletonStyles.toolbarSkeleton}>
-        <Animated.View style={[
-            skeletonStyles.searchBarSkeleton,
-            { opacity: shimmerAnim },
-        ]}/>
-        <View style={skeletonStyles.actionButtonsRow}>
-          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
-          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
-        </View>
-      </View>
+      <S style={e.toolbarSkeleton}>
+        <k.View style={[e.searchBarSkeleton,{opacity:b}]}/>
+        <S style={e.actionButtonsRow}>
+          <k.View style={[e.iconButtonSkeleton,{opacity:b}]}/>
+          <k.View style={[e.iconButtonSkeleton,{opacity:b}]}/>
+        </S>
+      </S>
 
       
-      <View style={skeletonStyles.chipStripSkeleton}>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
-        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
-      </View>
+      <S style={e.chipStripSkeleton}>
+        <k.View style={[e.chipSkeleton,{width:48,opacity:b}]}/>
+        <k.View style={[e.chipSkeleton,{width:68,opacity:b}]}/>
+        <k.View style={[e.chipSkeleton,{width:76,opacity:b}]}/>
+        <k.View style={[e.chipSkeleton,{width:58,opacity:b}]}/>
+      </S>
 
       
-      {Array.from({ length: cardCount }).map((_, i) => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+      {Array.from({length:C}).map((f,V)=><k.View key={`skeleton_card_${V}`}style={[e.cardSkeleton,{opacity:b}]}>
           
-          <View style={skeletonStyles.cardTopRow}>
-            <View style={skeletonStyles.badgeGroup}>
-              <View style={skeletonStyles.statusBadgeSkeleton}/>
-              <View style={skeletonStyles.methodBadgeSkeleton}/>
-            </View>
-            <View style={skeletonStyles.timeSkeleton}/>
-          </View>
+          <S style={e.cardTopRow}>
+            <S style={e.badgeGroup}>
+              <S style={e.statusBadgeSkeleton}/>
+              <S style={e.methodBadgeSkeleton}/>
+            </S>
+            <S style={e.timeSkeleton}/>
+          </S>
 
           
-          <View style={skeletonStyles.urlLineLong}/>
-          <View style={skeletonStyles.urlLineShort}/>
+          <S style={e.urlLineLong}/>
+          <S style={e.urlLineShort}/>
 
           
-          <View style={skeletonStyles.cardBottomRow}>
-            <View style={skeletonStyles.metaPillSkeleton}/>
-            <View style={skeletonStyles.metaPillSkeleton}/>
-          </View>
-        </Animated.View>))}
-    </View>);
-});
-const skeletonStyles = StyleSheet.create({
-    container: {
-        flex: 1,
-        paddingHorizontal: 12,
-        paddingTop: 8,
-    },
-    toolbarSkeleton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        marginBottom: 8,
-    },
-    searchBarSkeleton: {
-        flex: 1,
-        height: 36,
-        borderRadius: 8,
-        backgroundColor: AppColors.graySurface,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    actionButtonsRow: {
-        flexDirection: 'row',
-        gap: 6,
-    },
-    iconButtonSkeleton: {
-        width: 36,
-        height: 36,
-        borderRadius: 8,
-        backgroundColor: AppColors.graySurface,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    chipStripSkeleton: {
-        flexDirection: 'row',
-        gap: 6,
-        marginBottom: 10,
-    },
-    chipSkeleton: {
-        height: 24,
-        borderRadius: 6,
-        backgroundColor: AppColors.graySurface,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    cardSkeleton: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 10,
-        padding: 12,
-        marginBottom: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    cardTopRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 8,
-    },
-    badgeGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    statusBadgeSkeleton: {
-        width: 38,
-        height: 18,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-    methodBadgeSkeleton: {
-        width: 44,
-        height: 18,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-    timeSkeleton: {
-        width: 48,
-        height: 12,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-    urlLineLong: {
-        height: 13,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-        marginBottom: 5,
-        width: '90%',
-    },
-    urlLineShort: {
-        height: 11,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-        marginBottom: 8,
-        width: '55%',
-    },
-    cardBottomRow: {
-        flexDirection: 'row',
-        gap: 8,
-        marginTop: 2,
-    },
-    metaPillSkeleton: {
-        width: 52,
-        height: 14,
-        borderRadius: 4,
-        backgroundColor: AppColors.graySurface,
-    },
-});
-export default SkeletonPlaceholder;
+          <S style={e.cardBottomRow}>
+            <S style={e.metaPillSkeleton}/>
+            <S style={e.metaPillSkeleton}/>
+          </S>
+        </k.View>)}
+    </S>});const e=v.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:w.graySurface,borderWidth:1,borderColor:w.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:w.graySurface,borderWidth:1,borderColor:w.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:w.graySurface,borderWidth:1,borderColor:w.dividerColor},cardSkeleton:{backgroundColor:w.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:w.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:w.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:w.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:w.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:w.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:w.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:w.graySurface}});export default SkeletonPlaceholder;

package/dist/esm/components/Slider.js

@@ -1,222 +1,33 @@
-import React, { useRef, useState, useCallback, useMemo } from 'react';
-import { View, Text, StyleSheet, PanResponder, } from 'react-native';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import TouchableScale from './TouchableScale';
-export const Slider = React.memo(({ value, onValueChange, min = 50, max = 90, step = 5, formatLabel = val => `${Math.round(val)}%`, quickPresets = [50, 60, 70, 80, 90], disabled = false, }) => {
-    const trackWidthRef = useRef(0);
-    const [trackWidth, setTrackWidth] = useState(0);
-    const [isDragging, setIsDragging] = useState(false);
-    const clampedValue = Math.max(min, Math.min(max, value));
-    const percentage = (clampedValue - min) / (max - min || 1);
-    const updateValueFromPosition = useCallback((pageX, trackPageX) => {
-        if (trackWidthRef.current <= 0)
-            return;
-        const relativeX = Math.max(0, Math.min(trackWidthRef.current, pageX - trackPageX));
-        const rawRatio = relativeX / trackWidthRef.current;
-        let newValue = min + rawRatio * (max - min);
-        if (step > 0) {
-            newValue = Math.round(newValue / step) * step;
-        }
-        newValue = Math.max(min, Math.min(max, newValue));
-        onValueChange(newValue);
-    }, [min, max, step, onValueChange]);
-    const trackContainerRef = useRef(null);
-    const trackPageXRef = useRef(0);
-    const measureTrack = useCallback(() => {
-        if (trackContainerRef.current) {
-            trackContainerRef.current.measure((_x, _y, _width, _height, pageX) => {
-                trackPageXRef.current = pageX;
-            });
-        }
-    }, []);
-    const panResponder = useMemo(() => PanResponder.create({
-        onStartShouldSetPanResponder: () => !disabled,
-        onMoveShouldSetPanResponder: () => !disabled,
-        onPanResponderGrant: (evt) => {
-            setIsDragging(true);
-            measureTrack();
-            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
-        },
-        onPanResponderMove: (evt, _gestureState) => {
-            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
-        },
-        onPanResponderRelease: () => {
-            setIsDragging(false);
-        },
-        onPanResponderTerminate: () => {
-            setIsDragging(false);
-        },
-    }), [disabled, measureTrack, updateValueFromPosition]);
-    const handleLayout = (e) => {
-        const w = e.nativeEvent.layout.width;
-        trackWidthRef.current = w;
-        setTrackWidth(w);
-        measureTrack();
-    };
-    const thumbPosition = percentage * (trackWidth || 0);
-    return (<View style={styles.container}>
+import Z,{useRef as I,useState as O,useCallback as L,useMemo as q}from"react";import{View as R,Text as M,StyleSheet as ee,PanResponder as te}from"react-native";import{AppColors as e}from"../styles/AppColors";import{AppFonts as X}from"../styles/AppFonts";import Re from"./TouchableScale";export const Slider=Z.memo(({value:G,onValueChange:S,min:v=50,max:T=90,step:V=5,formatLabel:J=x=>`${Math.round(x)}%`,quickPresets:B=[50,60,70,80,90],disabled:A=!1})=>{const x=I(0),[_,K]=O(0),[j,P]=O(!1),W=Math.max(v,Math.min(T,G)),E=(W-v)/(T-v||1),D=L((r,o)=>{if(x.current<=0)return;const H=Math.max(0,Math.min(x.current,r-o))/x.current;let C=v+H*(T-v);V>0&&(C=Math.round(C/V)*V),C=Math.max(v,Math.min(T,C)),S(C)},[v,T,V,S]),$=I(null),z=I(0),F=L(()=>{$.current&&$.current.measure((r,o,Y,H,C)=>{z.current=C})},[]),N=q(()=>te.create({onStartShouldSetPanResponder:()=>!A,onMoveShouldSetPanResponder:()=>!A,onPanResponderGrant:r=>{P(!0),F(),D(r.nativeEvent.pageX,z.current)},onPanResponderMove:(r,o)=>{D(r.nativeEvent.pageX,z.current)},onPanResponderRelease:()=>{P(!1)},onPanResponderTerminate:()=>{P(!1)}}),[A,F,D]),Q=r=>{const o=r.nativeEvent.layout.width;x.current=o,K(o),F()},U=E*(_||0);return<R style={t.container}>
         
-        <View style={styles.valueRow}>
-          <Text style={styles.rangeText}>{min}%</Text>
-          <View style={[
-            styles.currentValueBadge,
-            isDragging && styles.currentValueBadgeActive,
-        ]}>
-            <Text style={styles.currentValueText}>{formatLabel(clampedValue)}</Text>
-          </View>
-          <Text style={styles.rangeText}>{max}%</Text>
-        </View>
+        <R style={t.valueRow}>
+          <M style={t.rangeText}>{v}%</M>
+          <R style={[t.currentValueBadge,j&&t.currentValueBadgeActive]}>
+            <M style={t.currentValueText}>{J(W)}</M>
+          </R>
+          <M style={t.rangeText}>{T}%</M>
+        </R>
 
         
-        <View ref={trackContainerRef} onLayout={handleLayout} {...panResponder.panHandlers} style={styles.touchArea}>
+        <R ref={$}onLayout={Q}{...N.panHandlers}style={t.touchArea}>
           
-          <View style={styles.rail}>
+          <R style={t.rail}>
             
-            <View style={[
-            styles.fillBar,
-            { width: `${Math.round(percentage * 100)}%` },
-        ]}/>
-          </View>
+            <R style={[t.fillBar,{width:`${Math.round(E*100)}%`}]}/>
+          </R>
 
           
-          <View style={[
-            styles.thumb,
-            {
-                left: Math.max(0, Math.min((trackWidth || 0) - 24, thumbPosition - 12)),
-            },
-            isDragging && styles.thumbActive,
-        ]}>
-            <View style={styles.thumbCenterDot}/>
-          </View>
-        </View>
+          <R style={[t.thumb,{left:Math.max(0,Math.min((_||0)-24,U-12))},j&&t.thumbActive]}>
+            <R style={t.thumbCenterDot}/>
+          </R>
+        </R>
 
         
-        {quickPresets && quickPresets.length > 0 && (<View style={styles.presetRow}>
-            {quickPresets.map(preset => {
-                const isSelected = Math.round(clampedValue) === preset;
-                return (<TouchableScale key={preset} onPress={() => onValueChange(preset)} style={[
-                        styles.presetButton,
-                        isSelected && styles.presetButtonActive,
-                    ]}>
-                  <Text style={[
-                        styles.presetText,
-                        isSelected && styles.presetTextActive,
-                    ]}>
-                    {preset}%
-                  </Text>
-                </TouchableScale>);
-            })}
-          </View>)}
-      </View>);
-});
-const styles = StyleSheet.create({
-    container: {
-        paddingVertical: 4,
-        gap: 8,
-    },
-    valueRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 2,
-    },
-    rangeText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    currentValueBadge: {
-        backgroundColor: `${AppColors.purple}1A`,
-        borderColor: `${AppColors.purple}33`,
-        borderWidth: 1,
-        borderRadius: 8,
-        paddingHorizontal: 10,
-        paddingVertical: 2.5,
-    },
-    currentValueBadgeActive: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-        transform: [{ scale: 1.05 }],
-    },
-    currentValueText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.purple,
-    },
-    touchArea: {
-        height: 36,
-        justifyContent: 'center',
-        position: 'relative',
-    },
-    rail: {
-        height: 8,
-        backgroundColor: `${AppColors.grayTextWeak}2B`,
-        borderRadius: 4,
-        overflow: 'hidden',
-        position: 'relative',
-    },
-    fillBar: {
-        height: '100%',
-        backgroundColor: AppColors.purple,
-        borderRadius: 4,
-    },
-    thumb: {
-        position: 'absolute',
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        backgroundColor: AppColors.white,
-        borderWidth: 2.5,
-        borderColor: AppColors.purple,
-        alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.18,
-        shadowRadius: 3.5,
-        elevation: 4,
-    },
-    thumbActive: {
-        transform: [{ scale: 1.15 }],
-        shadowOpacity: 0.28,
-        shadowRadius: 5,
-        elevation: 6,
-        borderColor: AppColors.purple,
-    },
-    thumbCenterDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: AppColors.purple,
-    },
-    presetRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 8,
-        marginTop: 2,
-    },
-    presetButton: {
-        flex: 1,
-        paddingVertical: 5,
-        borderRadius: 7,
-        alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    presetButtonActive: {
-        backgroundColor: `${AppColors.purple}20`,
-        borderColor: AppColors.purple,
-    },
-    presetText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-    },
-    presetTextActive: {
-        color: AppColors.purple,
-    },
-});
-export default Slider;
+        {B&&B.length>0&&<R style={t.presetRow}>
+            {B.map(r=>{const o=Math.round(W)===r;return<Re key={r}onPress={()=>S(r)}style={[t.presetButton,o&&t.presetButtonActive]}>
+                  <M style={[t.presetText,o&&t.presetTextActive]}>
+                    {r}%
+                  </M>
+                </Re>})}
+          </R>}
+      </R>});const t=ee.create({container:{paddingVertical:4,gap:8},valueRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:2},rangeText:{fontFamily:X.interMedium,fontSize:11,color:e.grayText},currentValueBadge:{backgroundColor:`${e.purple}1A`,borderColor:`${e.purple}33`,borderWidth:1,borderRadius:8,paddingHorizontal:10,paddingVertical:2.5},currentValueBadgeActive:{backgroundColor:e.purple,borderColor:e.purple,transform:[{scale:1.05}]},currentValueText:{fontFamily:X.interBold,fontSize:12,color:e.purple},touchArea:{height:36,justifyContent:"center",position:"relative"},rail:{height:8,backgroundColor:`${e.grayTextWeak}2B`,borderRadius:4,overflow:"hidden",position:"relative"},fillBar:{height:"100%",backgroundColor:e.purple,borderRadius:4},thumb:{position:"absolute",width:24,height:24,borderRadius:12,backgroundColor:e.white,borderWidth:2.5,borderColor:e.purple,alignItems:"center",justifyContent:"center",shadowColor:e.black,shadowOffset:{width:0,height:2},shadowOpacity:.18,shadowRadius:3.5,elevation:4},thumbActive:{transform:[{scale:1.15}],shadowOpacity:.28,shadowRadius:5,elevation:6,borderColor:e.purple},thumbCenterDot:{width:6,height:6,borderRadius:3,backgroundColor:e.purple},presetRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8,marginTop:2},presetButton:{flex:1,paddingVertical:5,borderRadius:7,alignItems:"center",backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.dividerColor},presetButtonActive:{backgroundColor:`${e.purple}20`,borderColor:e.purple},presetText:{fontFamily:X.interBold,fontSize:10.5,color:e.grayText},presetTextActive:{color:e.purple}});export default Slider;