@buoy-gg/shared-ui 1.7.2

package/lib/module/ui/console/CyberpunkIconContainer.js

@@ -0,0 +1,182 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CyberpunkIconContainer({
+  children,
+  color,
+  size = 42
+}) {
+  const borderWidth = 1.5;
+  const cornerSize = 4;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.mainFrame, {
+        width: size,
+        height: size,
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        borderColor: color,
+        borderWidth: borderWidth,
+        shadowColor: color,
+        shadowOffset: {
+          width: 0,
+          height: 0
+        },
+        shadowOpacity: 0.6,
+        shadowRadius: 4
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.innerFrame, {
+        top: 2,
+        left: 2,
+        right: 2,
+        bottom: 2,
+        borderColor: color,
+        borderWidth: 0.5,
+        opacity: 0.4
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        left: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        left: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        right: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        right: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        left: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        left: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        right: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        right: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.techDot, {
+        top: -1,
+        left: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.techDot, {
+        bottom: -1,
+        left: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.techDot, {
+        left: -1,
+        top: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.techDot, {
+        right: -1,
+        top: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: "center",
+        alignItems: "center",
+        shadowColor: color,
+        shadowOffset: {
+          width: 0,
+          height: 0
+        },
+        shadowOpacity: 0.8,
+        shadowRadius: 4
+      },
+      children: children
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  mainFrame: {
+    position: "absolute",
+    borderRadius: 2
+  },
+  innerFrame: {
+    position: "absolute",
+    borderRadius: 2
+  },
+  cornerAccent: {
+    position: "absolute"
+  },
+  techDot: {
+    position: "absolute",
+    width: 2,
+    height: 2,
+    borderRadius: 1
+  }
+});

package/lib/module/ui/console/CyberpunkSectionButton.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { ChevronRight } from "../../icons/index.js";
+import { CyberpunkButtonOutline } from "./CyberpunkButtonOutline.js";
+import { CyberpunkIconContainer } from "./CyberpunkIconContainer.js";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CyberpunkSectionButton({
+  id: _id,
+  title,
+  subtitle,
+  icon: Icon,
+  iconColor,
+  iconBackgroundColor,
+  onPress,
+  index = 0
+}) {
+  return /*#__PURE__*/_jsx(CyberpunkButtonOutline, {
+    onPress: onPress,
+    accentColor: iconColor,
+    index: index,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.iconWrapper,
+        children: /*#__PURE__*/_jsx(CyberpunkIconContainer, {
+          color: iconColor,
+          size: 36,
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: 20,
+            color: iconColor,
+            strokeWidth: 2.5
+          })
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.title, {
+            color: gameUIColors.text
+          }],
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx(Text, {
+          style: [styles.subtitle, {
+            color: iconColor
+          }],
+          children: subtitle
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.dataDots,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.dot, {
+            backgroundColor: iconColor,
+            opacity: 0.9
+          }]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.dot, {
+            backgroundColor: iconColor,
+            opacity: 0.6
+          }]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.dot, {
+            backgroundColor: iconColor,
+            opacity: 0.3
+          }]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.arrowContainer,
+        children: /*#__PURE__*/_jsx(ChevronRight, {
+          size: 20,
+          color: `${iconColor}CC`
+        })
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: "100%"
+  },
+  iconWrapper: {
+    marginRight: 12
+  },
+  textContainer: {
+    flex: 1,
+    marginRight: 10
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    fontFamily: "monospace"
+  },
+  subtitle: {
+    fontSize: 12,
+    fontWeight: "600",
+    marginTop: 1,
+    letterSpacing: 0.5,
+    fontFamily: "monospace",
+    opacity: 0.85
+  },
+  arrowContainer: {
+    marginLeft: 8
+  },
+  dataDots: {
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center",
+    marginRight: 12
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 2.5
+  }
+});

package/lib/module/ui/console/GalaxyButton.js

@@ -0,0 +1,95 @@
+"use strict";
+
+import { useEffect, useRef } from "react";
+import { View, StyleSheet, Animated, Pressable, Dimensions } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width: screenWidth
+} = Dimensions.get("window");
+export function GalaxyButton({
+  children,
+  onPress,
+  style
+}) {
+  const starsTranslateY = useRef(new Animated.Value(0)).current;
+  const starsRotate = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    // Star field animations
+    Animated.loop(Animated.timing(starsTranslateY, {
+      toValue: -135,
+      duration: 60000,
+      useNativeDriver: true
+    })).start();
+    Animated.loop(Animated.timing(starsRotate, {
+      toValue: 1,
+      duration: 90000,
+      useNativeDriver: true
+    })).start();
+  }, [starsTranslateY, starsRotate]);
+  const rotateInterpolate = starsRotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: onPress,
+    style: [styles.buttonContainer, style],
+    android_ripple: {
+      color: "rgba(255, 255, 255, 0.1)"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.starsContainer,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.starsLayer, {
+          transform: [{
+            translateY: starsTranslateY
+          }, {
+            rotate: rotateInterpolate
+          }]
+        }],
+        children: Array.from({
+          length: 30
+        }).map((_, i) => /*#__PURE__*/_jsx(View, {
+          style: [styles.star, {
+            left: Math.random() * screenWidth * 2,
+            top: Math.random() * 400,
+            width: Math.random() * 1.5 + 0.5,
+            height: Math.random() * 1.5 + 0.5,
+            opacity: Math.random() * 0.6 + 0.2
+          }]
+        }, `star-${i}`))
+      })
+    }), children]
+  });
+}
+const styles = StyleSheet.create({
+  buttonContainer: {
+    position: "relative",
+    backgroundColor: "rgba(31, 31, 31, 0.85)",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.12)",
+    overflow: "hidden"
+  },
+  starsContainer: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: "hidden"
+  },
+  starsLayer: {
+    position: "absolute",
+    width: screenWidth * 3,
+    height: 800
+  },
+  star: {
+    position: "absolute",
+    backgroundColor: "#ffffff",
+    borderRadius: 50,
+    shadowColor: "#ffffff",
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 1
+  }
+});

package/lib/module/ui/console/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { ConsoleSection } from "./ConsoleSection.js";
+
+// Sections export removed; dial menu flow doesn't use section list

package/lib/module/ui/gameUI/components/GameUICollapsibleSection.js

@@ -0,0 +1,116 @@
+"use strict";
+
+import { StyleSheet, Text, View, TouchableOpacity, Animated } from "react-native";
+import { ChevronDown, ChevronUp } from "../../../icons/index.js";
+import { gameUIColors } from "../constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reusable collapsible section component for Game UI
+ * Follows the established design pattern with icon, title, count badge, and subtitle
+ * Used across ENV, Storage, and other game-style interfaces
+ */
+export function GameUICollapsibleSection({
+  icon: Icon,
+  iconColor,
+  title,
+  count,
+  subtitle,
+  expanded,
+  onToggle,
+  children,
+  style,
+  titleStyle
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      onPress: onToggle,
+      activeOpacity: 0.7,
+      style: styles.headerTouchable,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.headerLeft,
+          children: [/*#__PURE__*/_jsx(Icon, {
+            size: 14,
+            color: iconColor
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.title, titleStyle],
+            children: title
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.badge, {
+              backgroundColor: iconColor + "20"
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.badgeText, {
+                color: iconColor
+              }],
+              children: count
+            })
+          })]
+        }), expanded ? /*#__PURE__*/_jsx(ChevronUp, {
+          size: 14,
+          color: gameUIColors.muted
+        }) : /*#__PURE__*/_jsx(ChevronDown, {
+          size: 14,
+          color: gameUIColors.muted
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.subtitle,
+        children: subtitle
+      })]
+    }), expanded && /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        opacity: 1
+      },
+      children: children
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20
+  },
+  headerTouchable: {
+    marginBottom: 12
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4,
+    paddingHorizontal: 4
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  title: {
+    fontSize: 11,
+    color: gameUIColors.primary,
+    fontFamily: "monospace",
+    fontWeight: "700",
+    letterSpacing: 2,
+    opacity: 0.9
+  },
+  subtitle: {
+    fontSize: 9,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    paddingHorizontal: 4,
+    marginTop: 2,
+    opacity: 0.7
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  badgeText: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: "700"
+  }
+});