@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/env/EnvironmentIndicator.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnvironmentIndicator = EnvironmentIndicator;
+var _reactNative = require("react-native");
+var _index = require("../icons/index.js");
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function getEnvironmentConfig(environment) {
+  switch (environment) {
+    case "local":
+      return {
+        label: "LOCAL",
+        backgroundColor: _gameUIColors.gameUIColors.info,
+        icon: _index.FlaskConical,
+        isLocal: true
+      };
+    case "dev":
+      return {
+        label: "DEV",
+        backgroundColor: _gameUIColors.gameUIColors.warning,
+        icon: _index.FlaskConical,
+        isLocal: false
+      };
+    case "qa":
+      return {
+        label: "QA",
+        backgroundColor: _gameUIColors.gameUIColors.optional,
+        icon: _index.Bug,
+        isLocal: false
+      };
+    case "staging":
+      return {
+        label: "STAGING",
+        backgroundColor: _gameUIColors.gameUIColors.success,
+        icon: _index.Zap,
+        isLocal: false
+      };
+    case "prod":
+      return {
+        label: "PROD",
+        backgroundColor: _gameUIColors.gameUIColors.error,
+        icon: _index.TestTube2,
+        isLocal: false
+      };
+    default:
+      return {
+        label: "LOCAL",
+        backgroundColor: _gameUIColors.gameUIColors.info,
+        icon: _index.FlaskConical,
+        isLocal: true
+      };
+  }
+}
+function EnvironmentIndicator({
+  environment,
+  onLayout,
+  interactive = false,
+  onPress
+}) {
+  const envConfig = getEnvironmentConfig(environment);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    onLayout: onLayout,
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: 6,
+      paddingLeft: 8,
+      paddingRight: interactive ? 4 : 8,
+      flexShrink: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: envConfig.backgroundColor,
+        marginRight: 6,
+        shadowColor: envConfig.backgroundColor,
+        shadowOffset: {
+          width: 0,
+          height: 0
+        },
+        shadowOpacity: 0.6,
+        shadowRadius: 4,
+        elevation: 2
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        fontSize: 11,
+        fontWeight: "600",
+        fontFamily: "Poppins-SemiBold",
+        color: _gameUIColors.gameUIColors.primaryLight,
+        letterSpacing: 0.5
+      },
+      children: envConfig.label
+    }), interactive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+      size: 12,
+      color: _gameUIColors.gameUIColors.muted,
+      style: {
+        marginLeft: 2
+      }
+    })]
+  });
+  if (interactive && onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => ({
+        opacity: pressed ? 0.7 : 1
+      }),
+      accessibilityRole: "button",
+      accessibilityLabel: `Current environment: ${envConfig.label}. Tap to switch environment.`,
+      children: content
+    });
+  }
+  return content;
+}

package/lib/commonjs/env/EnvironmentSelector.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnvironmentSelector = EnvironmentSelector;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../icons/index.js");
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _ExpandablePopover = require("../ui/components/ExpandablePopover.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// ============================================================================
+// Constants
+// ============================================================================
+
+const ENV_SELECTOR_WIDTH = 140; // Wider than minimized tools stack
+const PEEK_HEIGHT = 28;
+const OPTION_HEIGHT = 44;
+const PADDING_VERTICAL = 8;
+const COLLAPSE_BUTTON_HEIGHT = 24;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Environment Config Helper
+// ============================================================================
+
+function getEnvironmentConfig(environment) {
+  switch (environment) {
+    case "local":
+      return {
+        label: "LOCAL",
+        backgroundColor: _gameUIColors.gameUIColors.info
+      };
+    case "dev":
+      return {
+        label: "DEV",
+        backgroundColor: _gameUIColors.gameUIColors.warning
+      };
+    case "qa":
+      return {
+        label: "QA",
+        backgroundColor: _gameUIColors.gameUIColors.optional
+      };
+    case "staging":
+      return {
+        label: "STAGING",
+        backgroundColor: _gameUIColors.gameUIColors.success
+      };
+    case "prod":
+      return {
+        label: "PROD",
+        backgroundColor: _gameUIColors.gameUIColors.error
+      };
+    default:
+      return {
+        label: "LOCAL",
+        backgroundColor: _gameUIColors.gameUIColors.info
+      };
+  }
+}
+
+// ============================================================================
+// Environment Option Component
+// ============================================================================
+
+function EnvironmentOption({
+  environment,
+  isSelected,
+  onPress
+}) {
+  const config = getEnvironmentConfig(environment);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.optionContainer, isSelected && styles.optionContainerSelected, pressed && styles.optionContainerPressed],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.optionLeft,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.optionDot, {
+          backgroundColor: config.backgroundColor
+        }, {
+          shadowColor: config.backgroundColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 4,
+          elevation: 2
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.optionLabel,
+        children: config.label
+      })]
+    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Check, {
+      size: 14,
+      color: _gameUIColors.gameUIColors.success,
+      strokeWidth: 3
+    })]
+  });
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+function EnvironmentSelector({
+  hasItems,
+  currentEnvironment,
+  availableEnvironments,
+  onSelect,
+  width = ENV_SELECTOR_WIDTH,
+  collapsedContent
+}) {
+  // Calculate expanded height based on number of environments
+  const expandedHeight = PADDING_VERTICAL + availableEnvironments.length * OPTION_HEIGHT + COLLAPSE_BUTTON_HEIGHT + 4;
+
+  // Default collapsed content shows current environment
+  const defaultCollapsedContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.collapsedEnvBadge,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.collapsedDot, {
+        backgroundColor: getEnvironmentConfig(currentEnvironment).backgroundColor
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.collapsedLabel,
+      children: getEnvironmentConfig(currentEnvironment).label
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandablePopover.ExpandablePopover, {
+    hasItems: hasItems,
+    width: width,
+    expandedHeight: expandedHeight,
+    peekHeight: PEEK_HEIGHT,
+    showCount: false,
+    collapsedContent: collapsedContent || defaultCollapsedContent,
+    collapsedLabel: `Switch environment from ${currentEnvironment}`,
+    children: availableEnvironments.map(env => /*#__PURE__*/(0, _jsxRuntime.jsx)(EnvironmentOption, {
+      environment: env,
+      isSelected: env === currentEnvironment,
+      onPress: () => onSelect(env)
+    }, env))
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = _reactNative.StyleSheet.create({
+  collapsedEnvBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  collapsedDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  collapsedLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  },
+  optionContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    height: OPTION_HEIGHT,
+    width: "100%"
+  },
+  optionContainerSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  optionContainerPressed: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  optionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  optionDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 10
+  },
+  optionLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  }
+});

package/lib/commonjs/env/EnvironmentSelectorInline.js

@@ -0,0 +1,298 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnvironmentSelectorInline = EnvironmentSelectorInline;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../icons/index.js");
+var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ============================================================================
+// Constants
+// ============================================================================
+
+const OPTION_HEIGHT = 36;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Environment Config Helper
+// ============================================================================
+
+function getEnvironmentConfig(environment) {
+  switch (environment) {
+    case "local":
+      return {
+        label: "LOCAL",
+        backgroundColor: _gameUIColors.gameUIColors.info
+      };
+    case "dev":
+      return {
+        label: "DEV",
+        backgroundColor: _gameUIColors.gameUIColors.warning
+      };
+    case "qa":
+      return {
+        label: "QA",
+        backgroundColor: _gameUIColors.gameUIColors.optional
+      };
+    case "staging":
+      return {
+        label: "STAGING",
+        backgroundColor: _gameUIColors.gameUIColors.success
+      };
+    case "prod":
+      return {
+        label: "PROD",
+        backgroundColor: _gameUIColors.gameUIColors.error
+      };
+    default:
+      return {
+        label: "LOCAL",
+        backgroundColor: _gameUIColors.gameUIColors.info
+      };
+  }
+}
+
+// ============================================================================
+// Environment Option Component
+// ============================================================================
+
+function EnvironmentOption({
+  environment,
+  isSelected,
+  onPress
+}) {
+  const config = getEnvironmentConfig(environment);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: onPress,
+    style: ({
+      pressed
+    }) => [styles.optionContainer, isSelected && styles.optionContainerSelected, pressed && styles.optionContainerPressed],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.optionLeft,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.optionDot, {
+          backgroundColor: config.backgroundColor
+        }, {
+          shadowColor: config.backgroundColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 3,
+          elevation: 2
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.optionLabel,
+        numberOfLines: 1,
+        children: config.label
+      })]
+    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Check, {
+      size: 12,
+      color: _gameUIColors.gameUIColors.success,
+      strokeWidth: 3
+    })]
+  });
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+function EnvironmentSelectorInline({
+  currentEnvironment,
+  availableEnvironments,
+  onSelect
+}) {
+  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
+  const heightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const rotateAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const config = getEnvironmentConfig(currentEnvironment);
+
+  // Calculate expanded height based on number of environments
+  const expandedHeight = availableEnvironments.length * OPTION_HEIGHT;
+
+  // Animate height and chevron rotation
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(heightAnim, {
+      toValue: isExpanded ? expandedHeight : 0,
+      duration: 200,
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(rotateAnim, {
+      toValue: isExpanded ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    })]).start();
+  }, [isExpanded, expandedHeight, heightAnim, rotateAnim]);
+  const handleToggle = (0, _react.useCallback)(() => {
+    setIsExpanded(prev => !prev);
+  }, []);
+  const handleSelect = (0, _react.useCallback)(env => {
+    setIsExpanded(false);
+    onSelect(env);
+  }, [onSelect]);
+  const chevronRotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.wrapper,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.optionsDropup, {
+        height: heightAnim,
+        opacity: heightAnim.interpolate({
+          inputRange: [0, expandedHeight * 0.5, expandedHeight],
+          outputRange: [0, 0.8, 1]
+        })
+      }],
+      pointerEvents: isExpanded ? "auto" : "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          height: expandedHeight
+        },
+        children: availableEnvironments.map(env => /*#__PURE__*/(0, _jsxRuntime.jsx)(EnvironmentOption, {
+          environment: env,
+          isSelected: env === currentEnvironment,
+          onPress: () => handleSelect(env)
+        }, env))
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: handleToggle,
+      style: ({
+        pressed
+      }) => [styles.badge, isExpanded && styles.badgeExpanded, pressed && styles.badgePressed],
+      accessibilityRole: "button",
+      accessibilityLabel: `Current environment: ${config.label}. Tap to switch.`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.dot, {
+          backgroundColor: config.backgroundColor
+        }, {
+          shadowColor: config.backgroundColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 4,
+          elevation: 2
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        children: config.label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: {
+          transform: [{
+            rotate: chevronRotation
+          }]
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
+          size: 10,
+          color: _gameUIColors.gameUIColors.muted
+        })
+      })]
+    })]
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = _reactNative.StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    zIndex: 1000
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 6,
+    paddingLeft: 8,
+    paddingRight: 6,
+    gap: 6,
+    backgroundColor: "transparent",
+    borderRadius: 6
+  },
+  badgeExpanded: {
+    backgroundColor: _gameUIColors.gameUIColors.blackTint1,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  },
+  badgePressed: {
+    opacity: 0.7
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  },
+  optionsDropup: {
+    position: "absolute",
+    bottom: "100%",
+    left: 0,
+    right: 0,
+    backgroundColor: _gameUIColors.gameUIColors.blackTint1,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: _gameUIColors.gameUIColors.border,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10
+  },
+  optionContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 10,
+    height: OPTION_HEIGHT
+  },
+  optionContainerSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  optionContainerPressed: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  optionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  optionDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 8
+  },
+  optionLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _gameUIColors.gameUIColors.primaryLight,
+    letterSpacing: 0.5
+  }
+});

package/lib/commonjs/hooks/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getDeviceInfo", {
+  enumerable: true,
+  get: function () {
+    return _useDeviceInfo.getDeviceInfo;
+  }
+});
+Object.defineProperty(exports, "getSafeAreaInsets", {
+  enumerable: true,
+  get: function () {
+    return _useSafeAreaInsets.getSafeAreaInsets;
+  }
+});
+Object.defineProperty(exports, "logDeviceInfo", {
+  enumerable: true,
+  get: function () {
+    return _useDeviceInfo.logDeviceInfo;
+  }
+});
+Object.defineProperty(exports, "useDeviceInfo", {
+  enumerable: true,
+  get: function () {
+    return _useDeviceInfo.useDeviceInfo;
+  }
+});
+Object.defineProperty(exports, "useFilterManager", {
+  enumerable: true,
+  get: function () {
+    return _useFilterManager.useFilterManager;
+  }
+});
+Object.defineProperty(exports, "useSafeAreaInsets", {
+  enumerable: true,
+  get: function () {
+    return _useSafeAreaInsets.useSafeAreaInsets;
+  }
+});
+var _useFilterManager = require("./useFilterManager.js");
+var _useSafeAreaInsets = require("./useSafeAreaInsets.js");
+var _useDeviceInfo = require("./useDeviceInfo.js");

package/lib/commonjs/hooks/safe-area-impl.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPackage = void 0;
+/**
+ * Auto-generated safe area implementation
+ * Detected: none
+ * Generated at: 2026-01-03T16:08:00.629Z
+ *
+ * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
+ *
+ * No react-native-safe-area-context found. Using pure JS fallback only.
+ * Install react-native-safe-area-context for more accurate safe area values.
+ */
+
+const safeAreaType = exports.safeAreaType = "pure-js";
+const hasSafeAreaPackage = exports.hasSafeAreaPackage = false;
+
+/**
+ * Hook that returns null since react-native-safe-area-context is not installed.
+ * The main useSafeAreaInsets hook will use pure JS fallback.
+ */
+const useNativeSafeAreaInsets = () => {
+  return null;
+};
+exports.useNativeSafeAreaInsets = useNativeSafeAreaInsets;