@buoy-gg/shared-ui 1.7.2

package/lib/module/icons/RouteMapIcon.js

@@ -0,0 +1,245 @@
+"use strict";
+
+import { Fragment } from "react";
+import { View } from "react-native";
+import { IconBackground } from "./IconBackground.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPresets = {
+  orange: {
+    color: "#f59e0b",
+    glow: "#f59e0b"
+  },
+  cyan: {
+    color: "#00D4FF",
+    glow: "#00D4FF"
+  },
+  purple: {
+    color: "#a78bfa",
+    glow: "#a78bfa"
+  },
+  pink: {
+    color: "#FF45FF",
+    glow: "#FF45FF"
+  },
+  yellow: {
+    color: "#FFD700",
+    glow: "#FFD700"
+  },
+  green: {
+    color: "#00FF88",
+    glow: "#00FF88"
+  }
+};
+
+// Route nodes - representing different screens/routes in the app
+const ROUTE_NODES = [{
+  x: 0.5,
+  y: 0.2,
+  size: 1.2,
+  isActive: true
+},
+// Home/root
+{
+  x: 0.25,
+  y: 0.45,
+  size: 1,
+  isActive: false
+},
+// Route 1
+{
+  x: 0.75,
+  y: 0.45,
+  size: 1,
+  isActive: false
+},
+// Route 2
+{
+  x: 0.35,
+  y: 0.7,
+  size: 0.9,
+  isActive: false
+},
+// Route 3
+{
+  x: 0.65,
+  y: 0.7,
+  size: 0.9,
+  isActive: false
+} // Route 4
+];
+
+// Connections between routes - representing navigation paths
+const ROUTE_CONNECTIONS = [{
+  from: 0,
+  to: 1
+},
+// Home to Route 1
+{
+  from: 0,
+  to: 2
+},
+// Home to Route 2
+{
+  from: 1,
+  to: 3
+},
+// Route 1 to Route 3
+{
+  from: 2,
+  to: 4
+} // Route 2 to Route 4
+];
+export const RouteMapIcon = ({
+  size = 24,
+  color,
+  glowColor,
+  colorPreset = "orange",
+  variant = "nodes",
+  noBackground = true
+}) => {
+  const scale = noBackground ? size / 24 : size / 26;
+  const preset = ColorPresets[colorPreset] || ColorPresets.orange;
+  const activeColor = color || preset.color;
+  const activeGlow = glowColor || preset.glow;
+  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [ROUTE_CONNECTIONS.map((connection, index) => {
+      const fromNode = ROUTE_NODES[connection.from];
+      const toNode = ROUTE_NODES[connection.to];
+      const startX = fromNode.x * size;
+      const startY = fromNode.y * size;
+      const endX = toNode.x * size;
+      const endY = toNode.y * size;
+      const distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+      const angle = Math.atan2(endY - startY, endX - startX);
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: distance,
+            height: 1.5 * scale,
+            backgroundColor: activeGlow,
+            left: startX,
+            top: startY,
+            opacity: 0.15,
+            transform: [{
+              translateY: -0.75 * scale
+            }, {
+              rotate: `${angle}rad`
+            }]
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: distance,
+            height: 0.8 * scale,
+            backgroundColor: activeColor,
+            left: startX,
+            top: startY,
+            opacity: 0.5,
+            transform: [{
+              translateY: -0.4 * scale
+            }, {
+              rotate: `${angle}rad`
+            }]
+          }
+        }), [0.3, 0.6].map((position, dotIndex) => /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: 1 * scale,
+            height: 1 * scale,
+            borderRadius: 0.5 * scale,
+            backgroundColor: activeGlow,
+            left: startX + (endX - startX) * position,
+            top: startY + (endY - startY) * position,
+            opacity: 0.7
+          }
+        }, `dot-${index}-${dotIndex}`))]
+      }, `connection-${index}`);
+    }), ROUTE_NODES.map((node, index) => {
+      const nodeX = node.x * size - node.size * 1.5 * scale;
+      const nodeY = node.y * size - node.size * 1.5 * scale;
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: node.size * 4 * scale,
+            height: node.size * 4 * scale,
+            borderRadius: node.size * 2 * scale,
+            backgroundColor: activeGlow,
+            left: nodeX - node.size * 0.5 * scale,
+            top: nodeY - node.size * 0.5 * scale,
+            opacity: node.isActive ? 0.2 : 0.1
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: node.size * 3 * scale,
+            height: node.size * 3 * scale,
+            borderRadius: node.size * 1.5 * scale,
+            backgroundColor: activeColor,
+            left: nodeX,
+            top: nodeY,
+            opacity: node.isActive ? 0.95 : 0.75
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: node.size * 1.5 * scale,
+            height: node.size * 1.5 * scale,
+            borderRadius: node.size * 0.75 * scale,
+            backgroundColor: "#fff",
+            left: nodeX + node.size * 0.75 * scale,
+            top: nodeY + node.size * 0.75 * scale,
+            opacity: 0.2
+          }
+        }), node.isActive && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              width: node.size * 5 * scale,
+              height: node.size * 5 * scale,
+              borderRadius: node.size * 2.5 * scale,
+              borderWidth: 0.5 * scale,
+              borderColor: activeGlow,
+              backgroundColor: "transparent",
+              left: nodeX - node.size * 1 * scale,
+              top: nodeY - node.size * 1 * scale,
+              opacity: 0.4
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              width: node.size * 1 * scale,
+              height: node.size * 1 * scale,
+              borderRadius: node.size * 0.5 * scale,
+              backgroundColor: activeGlow,
+              left: nodeX + node.size * 1 * scale,
+              top: nodeY + node.size * 1 * scale,
+              opacity: 0.9
+            }
+          })]
+        })]
+      }, `node-${index}`);
+    })]
+  });
+  if (noBackground) {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: iconContent
+    });
+  }
+  return /*#__PURE__*/_jsx(IconBackground, {
+    size: size,
+    glowColor: activeGlow,
+    variant: variant,
+    children: iconContent
+  });
+};
+export const RouteIcon = RouteMapIcon;
+export const NavigationIcon = RouteMapIcon;

package/lib/module/icons/SentryBugIcon.js

@@ -0,0 +1,176 @@
+"use strict";
+
+import { Fragment } from "react";
+import { View } from "react-native";
+import { IconBackground } from "./IconBackground.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPresets = {
+  red: {
+    color: "#FF3366",
+    glow: "#FF3366"
+  },
+  purple: {
+    color: "#9945FF",
+    glow: "#9945FF"
+  },
+  orange: {
+    color: "#FF8800",
+    glow: "#FF8800"
+  },
+  pink: {
+    color: "#FF45FF",
+    glow: "#FF45FF"
+  },
+  cyan: {
+    color: "#00D4FF",
+    glow: "#00D4FF"
+  },
+  green: {
+    color: "#00FF88",
+    glow: "#00FF88"
+  }
+};
+
+// Leg positions simplified
+const LEGS = [{
+  y: 0.3,
+  side: "left",
+  rotation: -20
+}, {
+  y: 0.5,
+  side: "left",
+  rotation: -20
+}, {
+  y: 0.7,
+  side: "left",
+  rotation: -20
+}, {
+  y: 0.3,
+  side: "right",
+  rotation: 20
+}, {
+  y: 0.5,
+  side: "right",
+  rotation: 20
+}, {
+  y: 0.7,
+  side: "right",
+  rotation: 20
+}];
+export const SentryBugIcon = ({
+  size = 24,
+  color,
+  glowColor,
+  colorPreset = "red",
+  variant = "circuit",
+  noBackground = true
+}) => {
+  const scale = noBackground ? size / 24 : size / 60;
+  const preset = ColorPresets[colorPreset] || ColorPresets.red;
+  const activeColor = color || preset.color;
+  const activeGlow = glowColor || preset.glow;
+  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 12 * scale,
+        height: 14 * scale,
+        borderRadius: 6 * scale,
+        backgroundColor: activeColor,
+        left: size / 2 - 6 * scale,
+        top: size / 2 - 5 * scale,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 8 * scale,
+        height: 6 * scale,
+        borderRadius: 4 * scale,
+        backgroundColor: activeColor,
+        left: size / 2 - 4 * scale,
+        top: size / 2 - 9 * scale,
+        opacity: 0.95
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 14 * scale,
+        height: 16 * scale,
+        borderRadius: 7 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 7 * scale,
+        top: size / 2 - 6 * scale,
+        opacity: 0.15
+      }
+    }), LEGS.map((leg, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 4 * scale,
+        height: 0.8 * scale,
+        backgroundColor: activeColor,
+        [leg.side]: size / 2 - 10 * scale,
+        top: size / 2 - 4 * scale + leg.y * 10 * scale,
+        transform: [{
+          rotate: `${leg.rotation}deg`
+        }],
+        opacity: 0.8
+      }
+    }, `leg-${i}`)), [-15, 15].map((rotation, i) => /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 0.5 * scale,
+          height: 4 * scale,
+          backgroundColor: activeColor,
+          [i === 0 ? "left" : "right"]: size / 2 - 2 * scale,
+          top: size / 2 - 11 * scale,
+          transform: [{
+            rotate: `${rotation}deg`
+          }],
+          opacity: 0.7
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 1.5 * scale,
+          height: 1.5 * scale,
+          borderRadius: 0.75 * scale,
+          backgroundColor: activeGlow,
+          [i === 0 ? "left" : "right"]: size / 2 - 3 * scale,
+          top: size / 2 - 12 * scale,
+          opacity: 0.6
+        }
+      })]
+    }, `antenna-${i}`)), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 1 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: "#fff",
+        left: size / 2 - 0.5 * scale,
+        top: size / 2,
+        opacity: 0.3
+      }
+    })]
+  });
+  if (noBackground) {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: iconContent
+    });
+  }
+  return /*#__PURE__*/_jsx(IconBackground, {
+    size: size,
+    glowColor: activeGlow,
+    variant: variant,
+    children: iconContent
+  });
+};

package/lib/module/icons/StackPulseIcon.js

@@ -0,0 +1,153 @@
+"use strict";
+
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const StackPulseIcon = ({
+  size = 24,
+  color = "#00D4FF",
+  glowColor
+}) => {
+  const scale = size / 24;
+  const activeColor = color;
+  const activeGlow = glowColor || color;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 20 * scale,
+        height: 20 * scale,
+        borderRadius: 3 * scale,
+        borderWidth: 1.5 * scale,
+        borderColor: activeGlow,
+        backgroundColor: "transparent",
+        left: size / 2 - 10 * scale,
+        top: size / 2 - 10 * scale,
+        opacity: 0.2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 15 * scale,
+        height: 15 * scale,
+        borderRadius: 2.5 * scale,
+        borderWidth: 1.5 * scale,
+        borderColor: activeGlow,
+        backgroundColor: "transparent",
+        left: size / 2 - 7.5 * scale,
+        top: size / 2 - 7.5 * scale,
+        opacity: 0.4
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 12 * scale,
+        height: 12 * scale,
+        borderRadius: 2 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 6 * scale,
+        top: size / 2 - 6 * scale,
+        opacity: 0.15
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 10 * scale,
+        height: 10 * scale,
+        borderRadius: 1.5 * scale,
+        backgroundColor: activeColor,
+        left: size / 2 - 5 * scale,
+        top: size / 2 - 5 * scale,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 7 * scale,
+        height: 7 * scale,
+        borderRadius: 1 * scale,
+        backgroundColor: "#000",
+        left: size / 2 - 3.5 * scale,
+        top: size / 2 - 3.5 * scale,
+        opacity: 0.4
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 4 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 2 * scale,
+        top: size / 2 - 2 * scale,
+        opacity: 0.7
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 3 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 2 * scale,
+        top: size / 2,
+        opacity: 0.5
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 2 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 2 * scale,
+        top: size / 2 + 2 * scale,
+        opacity: 0.4
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 6 * scale,
+        height: 1.5 * scale,
+        borderRadius: 0.75 * scale,
+        backgroundColor: "#fff",
+        left: size / 2 - 3 * scale,
+        top: size / 2 - 4.5 * scale,
+        opacity: 0.2
+      }
+    }), [{
+      x: 0.15,
+      y: 0.15
+    }, {
+      x: 0.85,
+      y: 0.15
+    }, {
+      x: 0.15,
+      y: 0.85
+    }, {
+      x: 0.85,
+      y: 0.85
+    }].map((pos, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 1.5 * scale,
+        height: 1.5 * scale,
+        borderRadius: 0.75 * scale,
+        backgroundColor: activeGlow,
+        left: pos.x * size - 0.75 * scale,
+        top: pos.y * size - 0.75 * scale,
+        opacity: 0.6
+      }
+    }, `corner-${i}`))]
+  });
+};
+
+// Aliases for flexibility
+export const RenderPulseIcon = StackPulseIcon;
+export const HighlightUpdatesIcon = StackPulseIcon;

package/lib/module/icons/StorageStackIcon.js

@@ -0,0 +1,151 @@
+"use strict";
+
+import { Fragment } from "react";
+import { View } from "react-native";
+import { IconBackground } from "./IconBackground.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPresets = {
+  yellow: {
+    color: "#FFD700",
+    glow: "#FFD700"
+  },
+  cyan: {
+    color: "#00D4FF",
+    glow: "#00D4FF"
+  },
+  green: {
+    color: "#00FF88",
+    glow: "#00FF88"
+  },
+  purple: {
+    color: "#9945FF",
+    glow: "#9945FF"
+  },
+  pink: {
+    color: "#FF45FF",
+    glow: "#FF45FF"
+  },
+  orange: {
+    color: "#FF8800",
+    glow: "#FF8800"
+  }
+};
+
+// Simplified cylinder data
+const CYLINDERS = [{
+  y: 0.25,
+  opacity: 0.9
+}, {
+  y: 0.45,
+  opacity: 0.8
+}, {
+  y: 0.65,
+  opacity: 0.7
+}];
+export const StorageStackIcon = ({
+  size = 24,
+  color,
+  glowColor,
+  colorPreset = "yellow",
+  variant = "nodes",
+  noBackground = true
+}) => {
+  const scale = noBackground ? size / 24 : size / 26;
+  const preset = ColorPresets[colorPreset] || ColorPresets.yellow;
+  const activeColor = color || preset.color;
+  const activeGlow = glowColor || preset.glow;
+  const renderCylinder = (y, opacity, index) => /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 18 * scale,
+        height: 8 * scale,
+        borderRadius: 4 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 9 * scale,
+        top: y * size - scale,
+        opacity: 0.1
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 16 * scale,
+        height: 6 * scale,
+        borderRadius: 3 * scale,
+        backgroundColor: activeColor,
+        left: size / 2 - 8 * scale,
+        top: y * size,
+        opacity
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 14 * scale,
+        height: 2 * scale,
+        borderRadius: 1 * scale,
+        backgroundColor: "#fff",
+        left: size / 2 - 7 * scale,
+        top: y * size + 0.5 * scale,
+        opacity: 0.15
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 16 * scale,
+        height: 6 * scale,
+        borderRadius: 3 * scale,
+        borderWidth: 0.5 * scale,
+        borderColor: activeGlow,
+        backgroundColor: "transparent",
+        left: size / 2 - 8 * scale,
+        top: y * size,
+        opacity: 0.3
+      }
+    })]
+  }, `cylinder-${index}`);
+  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [CYLINDERS.map(({
+      y,
+      opacity
+    }, index) => renderCylinder(y, opacity, index)), [0.35, 0.55].map((y, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 0.5 * scale,
+        height: 6 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 0.25 * scale,
+        top: y * size,
+        opacity: 0.3
+      }
+    }, `connection-${i}`)), [0.25, 0.45, 0.65].map((y, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 1 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 0.5 * scale,
+        top: y * size + 2.5 * scale,
+        opacity: 0.6
+      }
+    }, `dot-${i}`))]
+  });
+  if (noBackground) {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: iconContent
+    });
+  }
+  return /*#__PURE__*/_jsx(IconBackground, {
+    size: size,
+    glowColor: activeGlow,
+    variant: variant,
+    children: iconContent
+  });
+};