@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CyberpunkIconContainer = CyberpunkIconContainer;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function CyberpunkIconContainer({
+  children,
+  color,
+  size = 42
+}) {
+  const borderWidth = 1.5;
+  const cornerSize = 4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.innerFrame, {
+        top: 2,
+        left: 2,
+        right: 2,
+        bottom: 2,
+        borderColor: color,
+        borderWidth: 0.5,
+        opacity: 0.4
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        left: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        left: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        right: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        top: 0,
+        right: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        left: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        left: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        right: 0,
+        width: cornerSize,
+        height: borderWidth,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.cornerAccent, {
+        bottom: 0,
+        right: 0,
+        width: borderWidth,
+        height: cornerSize,
+        backgroundColor: color,
+        opacity: 0.8
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.techDot, {
+        top: -1,
+        left: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.techDot, {
+        bottom: -1,
+        left: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.techDot, {
+        left: -1,
+        top: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.techDot, {
+        right: -1,
+        top: size / 2 - 1,
+        backgroundColor: color,
+        opacity: 0.6
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = _reactNative.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/commonjs/ui/console/CyberpunkSectionButton.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CyberpunkSectionButton = CyberpunkSectionButton;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _CyberpunkButtonOutline = require("./CyberpunkButtonOutline.js");
+var _CyberpunkIconContainer = require("./CyberpunkIconContainer.js");
+var _index2 = require("../gameUI/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function CyberpunkSectionButton({
+  id: _id,
+  title,
+  subtitle,
+  icon: Icon,
+  iconColor,
+  iconBackgroundColor,
+  onPress,
+  index = 0
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CyberpunkButtonOutline.CyberpunkButtonOutline, {
+    onPress: onPress,
+    accentColor: iconColor,
+    index: index,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.content,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconWrapper,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CyberpunkIconContainer.CyberpunkIconContainer, {
+          color: iconColor,
+          size: 36,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+            size: 20,
+            color: iconColor,
+            strokeWidth: 2.5
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.title, {
+            color: _index2.gameUIColors.text
+          }],
+          children: title
+        }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.subtitle, {
+            color: iconColor
+          }],
+          children: subtitle
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.dataDots,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.dot, {
+            backgroundColor: iconColor,
+            opacity: 0.9
+          }]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.dot, {
+            backgroundColor: iconColor,
+            opacity: 0.6
+          }]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.dot, {
+            backgroundColor: iconColor,
+            opacity: 0.3
+          }]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.arrowContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
+          size: 20,
+          color: `${iconColor}CC`
+        })
+      })]
+    })
+  });
+}
+const styles = _reactNative.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/commonjs/ui/console/GalaxyButton.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GalaxyButton = GalaxyButton;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+const {
+  width: screenWidth
+} = _reactNative.Dimensions.get("window");
+function GalaxyButton({
+  children,
+  onPress,
+  style
+}) {
+  const starsTranslateY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const starsRotate = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    // Star field animations
+    _reactNative.Animated.loop(_reactNative.Animated.timing(starsTranslateY, {
+      toValue: -135,
+      duration: 60000,
+      useNativeDriver: true
+    })).start();
+    _reactNative.Animated.loop(_reactNative.Animated.timing(starsRotate, {
+      toValue: 1,
+      duration: 90000,
+      useNativeDriver: true
+    })).start();
+  }, [starsTranslateY, starsRotate]);
+  const rotateInterpolate = starsRotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: onPress,
+    style: [styles.buttonContainer, style],
+    android_ripple: {
+      color: "rgba(255, 255, 255, 0.1)"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.starsContainer,
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.starsLayer, {
+          transform: [{
+            translateY: starsTranslateY
+          }, {
+            rotate: rotateInterpolate
+          }]
+        }],
+        children: Array.from({
+          length: 30
+        }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = _reactNative.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: {
+    ..._reactNative.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/commonjs/ui/console/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConsoleSection", {
+  enumerable: true,
+  get: function () {
+    return _ConsoleSection.ConsoleSection;
+  }
+});
+var _ConsoleSection = require("./ConsoleSection.js");

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GameUICollapsibleSection = GameUICollapsibleSection;
+var _reactNative = require("react-native");
+var _index = require("../../../icons/index.js");
+var _gameUIColors = require("../constants/gameUIColors.js");
+var _jsxRuntime = require("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
+ */
+function GameUICollapsibleSection({
+  icon: Icon,
+  iconColor,
+  title,
+  count,
+  subtitle,
+  expanded,
+  onToggle,
+  children,
+  style,
+  titleStyle
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      onPress: onToggle,
+      activeOpacity: 0.7,
+      style: styles.headerTouchable,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.header,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerLeft,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+            size: 14,
+            color: iconColor
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.title, titleStyle],
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.badge, {
+              backgroundColor: iconColor + "20"
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.badgeText, {
+                color: iconColor
+              }],
+              children: count
+            })
+          })]
+        }), expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+          size: 14,
+          color: _gameUIColors.gameUIColors.muted
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+          size: 14,
+          color: _gameUIColors.gameUIColors.muted
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.subtitle,
+        children: subtitle
+      })]
+    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        opacity: 1
+      },
+      children: children
+    })]
+  });
+}
+const styles = _reactNative.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.gameUIColors.primary,
+    fontFamily: "monospace",
+    fontWeight: "700",
+    letterSpacing: 2,
+    opacity: 0.9
+  },
+  subtitle: {
+    fontSize: 9,
+    color: _gameUIColors.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"
+  }
+});