@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/dataViewer/CyberpunkInput.js

@@ -1,384 +1 @@
-"use strict";
-
-import { useState, useEffect, useRef } from "react";
-import { View, TextInput, StyleSheet, TouchableOpacity, Text, Animated } from "react-native";
-import { ChevronUp, ChevronDown, Trash } from "../icons/index.js";
-import { buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { monoFont } from "../ui/fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function CyberpunkInput({
-  label,
-  containerStyle,
-  showNumberControls = false,
-  onIncrement,
-  onDecrement,
-  showDeleteButton = false,
-  onDelete,
-  ...props
-}) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  // Animated values for glitch effect
-  const glitchOpacity = useRef(new Animated.Value(0)).current;
-  const glitchX = useRef(new Animated.Value(0)).current;
-  const glitchY = useRef(new Animated.Value(0)).current;
-  const glitchScale = useRef(new Animated.Value(1)).current;
-  const borderGlow = useRef(new Animated.Value(0.6)).current;
-  useEffect(() => {
-    if (isFocused) {
-      // Border glow animation
-      Animated.timing(borderGlow, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true
-      }).start();
-
-      // Glitch opacity animation
-      Animated.loop(Animated.sequence([Animated.timing(glitchOpacity, {
-        toValue: 0,
-        duration: 2000,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0.8,
-        duration: 30,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0.6,
-        duration: 40,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0,
-        duration: 30,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0.4,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchOpacity, {
-        toValue: 0,
-        duration: 50,
-        useNativeDriver: true
-      })])).start();
-
-      // Glitch X displacement
-      Animated.loop(Animated.sequence([Animated.timing(glitchX, {
-        toValue: 0,
-        duration: 2500,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: 3,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: -3,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: 2,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchX, {
-        toValue: 0,
-        duration: 20,
-        useNativeDriver: true
-      })])).start();
-
-      // Glitch Y displacement
-      Animated.loop(Animated.sequence([Animated.timing(glitchY, {
-        toValue: 0,
-        duration: 2200,
-        useNativeDriver: true
-      }), Animated.timing(glitchY, {
-        toValue: -2,
-        duration: 30,
-        useNativeDriver: true
-      }), Animated.timing(glitchY, {
-        toValue: 1,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchY, {
-        toValue: 0,
-        duration: 30,
-        useNativeDriver: true
-      })])).start();
-
-      // Glitch scale effect
-      Animated.loop(Animated.sequence([Animated.timing(glitchScale, {
-        toValue: 1,
-        duration: 3000,
-        useNativeDriver: true
-      }), Animated.timing(glitchScale, {
-        toValue: 1.01,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchScale, {
-        toValue: 0.99,
-        duration: 20,
-        useNativeDriver: true
-      }), Animated.timing(glitchScale, {
-        toValue: 1,
-        duration: 20,
-        useNativeDriver: true
-      })])).start();
-    } else {
-      // Reset animations when not focused
-      Animated.timing(borderGlow, {
-        toValue: 0.6,
-        duration: 200,
-        useNativeDriver: true
-      }).start();
-      Animated.timing(glitchOpacity, {
-        toValue: 0,
-        duration: 100,
-        useNativeDriver: true
-      }).start();
-      Animated.timing(glitchX, {
-        toValue: 0,
-        duration: 100,
-        useNativeDriver: true
-      }).start();
-      Animated.timing(glitchY, {
-        toValue: 0,
-        duration: 100,
-        useNativeDriver: true
-      }).start();
-      Animated.timing(glitchScale, {
-        toValue: 1,
-        duration: 100,
-        useNativeDriver: true
-      }).start();
-    }
-  }, [isFocused, borderGlow, glitchOpacity, glitchX, glitchY, glitchScale]);
-  const handleFocus = e => {
-    setIsFocused(true);
-    props.onFocus?.(e);
-  };
-  const handleBlur = e => {
-    setIsFocused(false);
-    props.onBlur?.(e);
-  };
-  const containerAnimatedStyle = {
-    opacity: borderGlow,
-    borderColor: isFocused ? buoyColors.primary : buoyColors.textMuted + "4D"
-  };
-  const glitchAnimatedStyle = {
-    opacity: glitchOpacity,
-    transform: [{
-      translateX: glitchX
-    }, {
-      translateY: glitchY
-    }, {
-      scale: glitchScale
-    }]
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, containerStyle],
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.rowContainer,
-      children: [label && /*#__PURE__*/_jsx(Text, {
-        style: [styles.label, isFocused && styles.labelFocused],
-        children: label.toUpperCase()
-      }), /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.inputContainer, containerAnimatedStyle],
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          // @ts-ignore - glitchAnimatedStyle is not typed
-          style: [styles.glitchOverlay, glitchAnimatedStyle],
-          pointerEvents: "none"
-        }), /*#__PURE__*/_jsx(TextInput, {
-          ...props,
-          style: [styles.input, props.style, showNumberControls && styles.inputWithControls, showDeleteButton && styles.inputWithDelete],
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          placeholderTextColor: buoyColors.textMuted + "99",
-          autoComplete: "off",
-          autoCorrect: false,
-          autoCapitalize: "none",
-          spellCheck: false
-        }), showNumberControls && /*#__PURE__*/_jsxs(View, {
-          style: styles.numberControls,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.controlButton, isFocused && styles.controlButtonFocused],
-            onPress: onIncrement,
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(ChevronUp, {
-              size: 14,
-              strokeWidth: 2.5,
-              color: isFocused ? buoyColors.primary : buoyColors.textMuted
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.controlButton, isFocused && styles.controlButtonFocused],
-            onPress: onDecrement,
-            activeOpacity: 0.7,
-            children: /*#__PURE__*/_jsx(ChevronDown, {
-              size: 14,
-              strokeWidth: 2.5,
-              color: isFocused ? buoyColors.primary : buoyColors.textMuted
-            })
-          })]
-        }), showDeleteButton && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.deleteButton, isFocused && styles.deleteButtonFocused],
-          onPress: onDelete,
-          activeOpacity: 0.7
-          // The same handle scheme container nodes use (`<node>-delete`):
-          // the input is `<node>-input`, so its delete is `<node>-delete`.
-          ,
-          testID: typeof props.testID === "string" && props.testID.endsWith("-input") ? `${props.testID.slice(0, -"-input".length)}-delete` : undefined,
-          accessibilityLabel: "Delete item",
-          children: /*#__PURE__*/_jsx(Trash, {
-            size: 14,
-            strokeWidth: 2,
-            color: isFocused ? buoyColors.error : buoyColors.error + "CC"
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerAccent, styles.cornerTL, isFocused && styles.cornerAccentFocused]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerAccent, styles.cornerTR, isFocused && styles.cornerAccentFocused]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerAccent, styles.cornerBL, isFocused && styles.cornerAccentFocused]
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.cornerAccent, styles.cornerBR, isFocused && styles.cornerAccentFocused]
-        })]
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    marginVertical: 3
-  },
-  rowContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  label: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    color: buoyColors.textMuted,
-    letterSpacing: 0.5,
-    minWidth: 60
-  },
-  labelFocused: {
-    color: buoyColors.primary
-  },
-  inputContainer: {
-    flex: 1,
-    borderWidth: 1,
-    borderRadius: 6,
-    position: "relative",
-    minHeight: 34,
-    justifyContent: "center",
-    flexDirection: "row",
-    alignItems: "center"
-  },
-  glitchOverlay: {
-    position: "absolute",
-    top: -1,
-    left: -1,
-    right: -1,
-    bottom: -1,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.primary,
-    zIndex: 10
-  },
-  input: {
-    flex: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    color: buoyColors.text,
-    fontSize: 12,
-    fontFamily: monoFont,
-    backgroundColor: "transparent",
-    zIndex: 1
-  },
-  inputWithControls: {
-    paddingRight: 4
-  },
-  inputWithDelete: {
-    paddingRight: 4
-  },
-  numberControls: {
-    flexDirection: "row",
-    gap: 2,
-    paddingRight: 4,
-    zIndex: 2
-  },
-  controlButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.textMuted + "33",
-    alignItems: "center",
-    justifyContent: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 2
-  },
-  controlButtonFocused: {
-    borderColor: buoyColors.primary + "CC",
-    shadowColor: buoyColors.primary,
-    shadowOpacity: 0.3,
-    shadowRadius: 4
-  },
-  deleteButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.error + "4D",
-    alignItems: "center",
-    justifyContent: "center",
-    shadowColor: buoyColors.error,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.15,
-    shadowRadius: 3,
-    marginRight: 4,
-    zIndex: 2
-  },
-  deleteButtonFocused: {
-    borderColor: buoyColors.error + "CC",
-    shadowOpacity: 0.3,
-    shadowRadius: 5
-  },
-  cornerAccent: {
-    position: "absolute",
-    width: 6,
-    height: 1.2,
-    backgroundColor: buoyColors.textMuted + "CC",
-    zIndex: 0
-  },
-  cornerAccentFocused: {
-    backgroundColor: buoyColors.primary
-  },
-  cornerTL: {
-    top: -1,
-    left: 5
-  },
-  cornerTR: {
-    top: -1,
-    right: 5
-  },
-  cornerBL: {
-    bottom: -1,
-    left: 5
-  },
-  cornerBR: {
-    bottom: -1,
-    right: 5
-  }
-});
+"use strict";import{useState as I,useEffect as W,useRef as d}from"react";import{View as c,TextInput as A,StyleSheet as O,TouchableOpacity as g,Text as z,Animated as t}from"react-native";import{ChevronUp as S,ChevronDown as T,Trash as k}from"../icons/index.js";import{buoyColors as r}from"../ui/gameUI/constants/gameUIColors.js";import{monoFont as D}from"../ui/fonts.js";import{jsx as o,jsxs as v}from"react/jsx-runtime";export function CyberpunkInput({label:p,containerStyle:V,showNumberControls:y=false,onIncrement:b,onDecrement:w,showDeleteButton:f=false,onDelete:x,...u}){const[i,C]=I(false);const n=d(new t.Value(0)).current;const a=d(new t.Value(0)).current;const s=d(new t.Value(0)).current;const l=d(new t.Value(1)).current;const h=d(new t.Value(.6)).current;W(()=>{if(i){t.timing(h,{toValue:1,duration:200,useNativeDriver:true}).start();t.loop(t.sequence([t.timing(n,{toValue:0,duration:2e3,useNativeDriver:true}),t.timing(n,{toValue:.8,duration:30,useNativeDriver:true}),t.timing(n,{toValue:0,duration:20,useNativeDriver:true}),t.timing(n,{toValue:.6,duration:40,useNativeDriver:true}),t.timing(n,{toValue:0,duration:30,useNativeDriver:true}),t.timing(n,{toValue:.4,duration:20,useNativeDriver:true}),t.timing(n,{toValue:0,duration:50,useNativeDriver:true})])).start();t.loop(t.sequence([t.timing(a,{toValue:0,duration:2500,useNativeDriver:true}),t.timing(a,{toValue:3,duration:20,useNativeDriver:true}),t.timing(a,{toValue:-3,duration:20,useNativeDriver:true}),t.timing(a,{toValue:2,duration:20,useNativeDriver:true}),t.timing(a,{toValue:0,duration:20,useNativeDriver:true})])).start();t.loop(t.sequence([t.timing(s,{toValue:0,duration:2200,useNativeDriver:true}),t.timing(s,{toValue:-2,duration:30,useNativeDriver:true}),t.timing(s,{toValue:1,duration:20,useNativeDriver:true}),t.timing(s,{toValue:0,duration:30,useNativeDriver:true})])).start();t.loop(t.sequence([t.timing(l,{toValue:1,duration:3e3,useNativeDriver:true}),t.timing(l,{toValue:1.01,duration:20,useNativeDriver:true}),t.timing(l,{toValue:.99,duration:20,useNativeDriver:true}),t.timing(l,{toValue:1,duration:20,useNativeDriver:true})])).start()}else{t.timing(h,{toValue:.6,duration:200,useNativeDriver:true}).start();t.timing(n,{toValue:0,duration:100,useNativeDriver:true}).start();t.timing(a,{toValue:0,duration:100,useNativeDriver:true}).start();t.timing(s,{toValue:0,duration:100,useNativeDriver:true}).start();t.timing(l,{toValue:1,duration:100,useNativeDriver:true}).start()}},[i,h,n,a,s,l]);const N=m=>{C(true);u.onFocus?.(m)};const F=m=>{C(false);u.onBlur?.(m)};const R={opacity:h,borderColor:i?r.primary:r.textMuted+"4D"};const B={opacity:n,transform:[{translateX:a},{translateY:s},{scale:l}]};return o(c,{style:[e.container,V],children:v(c,{style:e.rowContainer,children:[p&&o(z,{style:[e.label,i&&e.labelFocused],children:p.toUpperCase()}),v(t.View,{style:[e.inputContainer,R],children:[o(t.View,{style:[e.glitchOverlay,B],pointerEvents:"none"}),o(A,{...u,style:[e.input,u.style,y&&e.inputWithControls,f&&e.inputWithDelete],onFocus:N,onBlur:F,placeholderTextColor:r.textMuted+"99",autoComplete:"off",autoCorrect:false,autoCapitalize:"none",spellCheck:false}),y&&v(c,{style:e.numberControls,children:[o(g,{style:[e.controlButton,i&&e.controlButtonFocused],onPress:b,activeOpacity:.7,children:o(S,{size:14,strokeWidth:2.5,color:i?r.primary:r.textMuted})}),o(g,{style:[e.controlButton,i&&e.controlButtonFocused],onPress:w,activeOpacity:.7,children:o(T,{size:14,strokeWidth:2.5,color:i?r.primary:r.textMuted})})]}),f&&o(g,{style:[e.deleteButton,i&&e.deleteButtonFocused],onPress:x,activeOpacity:.7,testID:typeof u.testID==="string"&&u.testID.endsWith("-input")?`${u.testID.slice(0,-"-input".length)}-delete`:void 0,accessibilityLabel:"Delete item",children:o(k,{size:14,strokeWidth:2,color:i?r.error:r.error+"CC"})}),o(c,{style:[e.cornerAccent,e.cornerTL,i&&e.cornerAccentFocused]}),o(c,{style:[e.cornerAccent,e.cornerTR,i&&e.cornerAccentFocused]}),o(c,{style:[e.cornerAccent,e.cornerBL,i&&e.cornerAccentFocused]}),o(c,{style:[e.cornerAccent,e.cornerBR,i&&e.cornerAccentFocused]})]})]})})}const e=O.create({container:{width:"100%",marginVertical:3},rowContainer:{flexDirection:"row",alignItems:"center",gap:8},label:{fontSize:10,fontWeight:"600",fontFamily:D,color:r.textMuted,letterSpacing:.5,minWidth:60},labelFocused:{color:r.primary},inputContainer:{flex:1,borderWidth:1,borderRadius:6,position:"relative",minHeight:34,justifyContent:"center",flexDirection:"row",alignItems:"center"},glitchOverlay:{position:"absolute",top:-1,left:-1,right:-1,bottom:-1,borderRadius:6,borderWidth:1,borderColor:r.primary,zIndex:10},input:{flex:1,paddingHorizontal:10,paddingVertical:6,color:r.text,fontSize:12,fontFamily:D,backgroundColor:"transparent",zIndex:1},inputWithControls:{paddingRight:4},inputWithDelete:{paddingRight:4},numberControls:{flexDirection:"row",gap:2,paddingRight:4,zIndex:2},controlButton:{width:28,height:28,borderRadius:6,borderWidth:1,borderColor:r.textMuted+"33",alignItems:"center",justifyContent:"center",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2},controlButtonFocused:{borderColor:r.primary+"CC",shadowColor:r.primary,shadowOpacity:.3,shadowRadius:4},deleteButton:{width:28,height:28,borderRadius:6,borderWidth:1,borderColor:r.error+"4D",alignItems:"center",justifyContent:"center",shadowColor:r.error,shadowOffset:{width:0,height:0},shadowOpacity:.15,shadowRadius:3,marginRight:4,zIndex:2},deleteButtonFocused:{borderColor:r.error+"CC",shadowOpacity:.3,shadowRadius:5},cornerAccent:{position:"absolute",width:6,height:1.2,backgroundColor:r.textMuted+"CC",zIndex:0},cornerAccentFocused:{backgroundColor:r.primary},cornerTL:{top:-1,left:5},cornerTR:{top:-1,right:5},cornerBL:{bottom:-1,left:5},cornerBR:{bottom:-1,right:5}});