@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/icons/primitives/GlobeIcon.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkGlobeIcon = exports.NETWORK_ICON_COLOR = exports.GlobeIcon = void 0;
+var _iconPrimitives = require("./icon-primitives.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * GlobeIcon - Cross-Platform Implementation
+ *
+ * This icon uses the shared primitives and works on both mobile and web!
+ * The primitives handle the platform-specific rendering.
+ */
+
+// Single source of truth for network icon color
+const NETWORK_ICON_COLOR = exports.NETWORK_ICON_COLOR = '#4AFF9F'; // Green
+
+const colors = {
+  network: NETWORK_ICON_COLOR,
+  blackTint1: 'rgba(8, 12, 21, 0.95)'
+};
+const GlobeIcon = ({
+  size = 24,
+  color = colors.network
+}) => {
+  const scale = size / 24;
+  const globeSize = 18 * scale;
+  const r = globeSize / 2;
+  const center = size / 2;
+  const borderWidth = 2 * scale;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_iconPrimitives.IconContainer, {
+    size: size,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconCircle, {
+      cx: center,
+      cy: center,
+      r: r,
+      fill: colors.blackTint1,
+      borderColor: color,
+      borderWidth: borderWidth,
+      glowColor: color,
+      glowRadius: 4 * scale
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconCircle, {
+      cx: center,
+      cy: center,
+      r: r,
+      borderColor: color,
+      borderWidth: borderWidth,
+      scaleX: 0.45,
+      opacity: 0.6
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconCircle, {
+      cx: center,
+      cy: center,
+      r: r,
+      borderColor: color,
+      borderWidth: borderWidth,
+      scaleX: 1.33,
+      scaleY: 0.6,
+      opacity: 0.6
+    })]
+  });
+};
+
+// Alias for network tool
+exports.GlobeIcon = GlobeIcon;
+const NetworkGlobeIcon = exports.NetworkGlobeIcon = GlobeIcon;

package/lib/commonjs/icons/primitives/icon-primitives.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = void 0;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Cross-Platform Icon Primitives - Mobile (React Native)
+ *
+ * These primitives render using React Native View components.
+ * The API matches the web version exactly, so icons work on both platforms!
+ */
+
+// =============================
+// Types (Platform-Agnostic)
+// =============================
+
+// =============================
+// Mobile (React Native) Implementation
+// =============================
+
+/**
+ * Container for icon elements. Sets up the coordinate space.
+ */
+const IconContainer = ({
+  size,
+  children,
+  style
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      width: size,
+      height: size,
+      position: 'relative'
+    }, style],
+    children: children
+  });
+};
+
+/**
+ * Circle primitive. Supports borders, fills, transforms, and glow effects.
+ */
+exports.IconContainer = IconContainer;
+const IconCircle = ({
+  cx,
+  cy,
+  r,
+  fill = 'transparent',
+  borderColor,
+  borderWidth = 0,
+  opacity = 1,
+  scaleX = 1,
+  scaleY = 1,
+  glowColor,
+  glowRadius = 4
+}) => {
+  const diameter = r * 2;
+
+  // Build transform array for React Native
+  const transforms = [];
+  if (scaleX !== 1) transforms.push({
+    scaleX
+  });
+  if (scaleY !== 1) transforms.push({
+    scaleY
+  });
+  const style = {
+    position: 'absolute',
+    left: cx - r,
+    top: cy - r,
+    width: diameter,
+    height: diameter,
+    borderRadius: r,
+    backgroundColor: fill,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    opacity,
+    transform: transforms.length > 0 ? transforms : undefined,
+    // Shadow for glow effect (iOS)
+    ...(glowColor && {
+      shadowColor: glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: 0.6,
+      shadowRadius: glowRadius
+    })
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style
+  });
+};
+
+/**
+ * Rectangle primitive. Supports borders, fills, rotation.
+ */
+exports.IconCircle = IconCircle;
+const IconRect = ({
+  x,
+  y,
+  width,
+  height,
+  fill = 'transparent',
+  borderColor,
+  borderWidth = 0,
+  borderRadius = 0,
+  opacity = 1,
+  rotate
+}) => {
+  const transforms = [];
+  if (rotate !== undefined) transforms.push({
+    rotate: `${rotate}deg`
+  });
+  const style = {
+    position: 'absolute',
+    left: x,
+    top: y,
+    width,
+    height,
+    backgroundColor: fill,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderRadius,
+    opacity,
+    transform: transforms.length > 0 ? transforms : undefined
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style
+  });
+};
+
+/**
+ * Line primitive. Uses rotation to draw lines (same technique as web).
+ */
+exports.IconRect = IconRect;
+const IconLine = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  color,
+  strokeWidth = 2,
+  opacity = 1
+}) => {
+  // Calculate line length and angle
+  const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  const angle = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
+  const style = {
+    position: 'absolute',
+    left: x1,
+    top: y1 - strokeWidth / 2,
+    width: length,
+    height: strokeWidth,
+    backgroundColor: color,
+    transform: [{
+      rotate: `${angle}deg`
+    }],
+    transformOrigin: 'left center',
+    opacity,
+    borderRadius: strokeWidth / 2
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style
+  });
+};
+exports.IconLine = IconLine;

package/lib/commonjs/icons/primitives/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconCircle", {
+  enumerable: true,
+  get: function () {
+    return _iconPrimitives.IconCircle;
+  }
+});
+Object.defineProperty(exports, "IconContainer", {
+  enumerable: true,
+  get: function () {
+    return _iconPrimitives.IconContainer;
+  }
+});
+Object.defineProperty(exports, "IconLine", {
+  enumerable: true,
+  get: function () {
+    return _iconPrimitives.IconLine;
+  }
+});
+Object.defineProperty(exports, "IconRect", {
+  enumerable: true,
+  get: function () {
+    return _iconPrimitives.IconRect;
+  }
+});
+Object.defineProperty(exports, "NETWORK_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _GlobeIcon.NETWORK_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "NetworkGlobeIcon", {
+  enumerable: true,
+  get: function () {
+    return _GlobeIcon.NetworkGlobeIcon;
+  }
+});
+Object.defineProperty(exports, "PrimitiveGlobeIcon", {
+  enumerable: true,
+  get: function () {
+    return _GlobeIcon.GlobeIcon;
+  }
+});
+var _iconPrimitives = require("./icon-primitives.js");
+var _GlobeIcon = require("./GlobeIcon.js");