@buoy-gg/shared-ui 1.7.2

package/lib/module/icons/IconBackground.js

@@ -0,0 +1,274 @@
+"use strict";
+
+import { Fragment } from "react";
+import { View } from "react-native";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Consolidated star data
+const STARS = [{
+  x: 0.1,
+  y: 0.1,
+  size: 1,
+  opacity: 0.3
+}, {
+  x: 0.9,
+  y: 0.1,
+  size: 1.2,
+  opacity: 0.5
+}, {
+  x: 0.05,
+  y: 0.3,
+  size: 0.8,
+  opacity: 0.4
+}, {
+  x: 0.95,
+  y: 0.35,
+  size: 1,
+  opacity: 0.3
+}, {
+  x: 0.15,
+  y: 0.85,
+  size: 1,
+  opacity: 0.5
+}, {
+  x: 0.85,
+  y: 0.9,
+  size: 1.2,
+  opacity: 0.4
+}];
+const VARIANT_DATA = {
+  circuit: {
+    lines: [{
+      x: 0.5,
+      width: 0.5,
+      height: 0.9,
+      opacity: 0.15
+    }, {
+      x: 0.25,
+      width: 0.3,
+      height: 0.7,
+      opacity: 0.1
+    }, {
+      x: 0.75,
+      width: 0.3,
+      height: 0.7,
+      opacity: 0.1
+    }],
+    nodes: [{
+      x: 0.5,
+      y: 0.15
+    }, {
+      x: 0.25,
+      y: 0.25
+    }, {
+      x: 0.75,
+      y: 0.25
+    }, {
+      x: 0.5,
+      y: 0.5
+    }, {
+      x: 0.25,
+      y: 0.6
+    }, {
+      x: 0.75,
+      y: 0.6
+    }]
+  },
+  nodes: {
+    nodes: [{
+      x: 0.2,
+      y: 0.2
+    }, {
+      x: 0.8,
+      y: 0.2
+    }, {
+      x: 0.15,
+      y: 0.5
+    }, {
+      x: 0.85,
+      y: 0.5
+    }, {
+      x: 0.2,
+      y: 0.8
+    }, {
+      x: 0.8,
+      y: 0.8
+    }]
+  },
+  grid: {
+    lines: [0.2, 0.35, 0.5, 0.65, 0.8]
+  },
+  matrix: {
+    lines: [0.2, 0.35, 0.5, 0.65, 0.8],
+    rain: [0.25, 0.5, 0.75]
+  },
+  glitch: {
+    lines: [0.2, 0.35, 0.5, 0.65, 0.8],
+    scan: [0.3, 0.7]
+  }
+};
+export const IconBackground = ({
+  size,
+  glowColor,
+  variant = "circuit",
+  children
+}) => {
+  const scale = size / 24;
+  const renderStars = () => /*#__PURE__*/_jsx(_Fragment, {
+    children: STARS.map((star, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: star.size * scale,
+        height: star.size * scale,
+        borderRadius: star.size * scale / 2,
+        backgroundColor: glowColor,
+        left: star.x * size - star.size * scale / 2,
+        top: star.y * size - star.size * scale / 2,
+        opacity: star.opacity
+      }
+    }, `star-${i}`))
+  });
+  const renderVariant = () => {
+    const data = VARIANT_DATA[variant];
+    if (!data) return null;
+    if (variant === "circuit") {
+      const circuitData = data;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [circuitData.lines.map((line, i) => /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: line.width * scale,
+            height: size * line.height,
+            backgroundColor: glowColor,
+            left: line.x * size - line.width * scale / 2,
+            top: size * 0.05,
+            opacity: line.opacity
+          }
+        }, `line-${i}`)), circuitData.nodes.map((node, i) => /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: 2 * scale,
+            height: 2 * scale,
+            borderRadius: scale,
+            backgroundColor: glowColor,
+            left: node.x * size - scale,
+            top: node.y * size - scale,
+            opacity: 0.4
+          }
+        }, `node-${i}`))]
+      });
+    }
+    if (variant === "nodes") {
+      const nodesData = data;
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: nodesData.nodes.map((node, i) => /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              width: Math.abs(0.5 - node.x) * size,
+              height: 0.3 * scale,
+              backgroundColor: glowColor,
+              left: Math.min(node.x * size, size / 2),
+              top: node.y * size,
+              opacity: 0.1
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              width: 2 * scale,
+              height: 2 * scale,
+              borderRadius: scale,
+              backgroundColor: glowColor,
+              left: node.x * size - scale,
+              top: node.y * size - scale,
+              opacity: 0.5
+            }
+          })]
+        }, `node-${i}`))
+      });
+    }
+    if (variant === "grid" || variant === "matrix") {
+      const gridData = data;
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: gridData.lines.map((pos, i) => /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              width: 0.2 * scale,
+              height: size * 0.9,
+              backgroundColor: glowColor,
+              left: pos * size,
+              top: size * 0.05,
+              opacity: 0.05
+            }
+          }), /*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              width: size * 0.9,
+              height: 0.2 * scale,
+              backgroundColor: glowColor,
+              left: size * 0.05,
+              top: pos * size,
+              opacity: 0.05
+            }
+          })]
+        }, `grid-${i}`))
+      });
+    }
+    if (variant === "glitch") {
+      const glitchData = data;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [glitchData.lines.map((y, i) => /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: size * 0.4,
+            height: 0.5 * scale,
+            backgroundColor: glowColor,
+            left: size * (0.1 + i * 0.1),
+            top: y * size,
+            opacity: 0.2
+          }
+        }, `glitch-${i}`)), glitchData.scan.map((y, i) => /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: size,
+            height: scale,
+            backgroundColor: glowColor,
+            left: 0,
+            top: size * y,
+            opacity: 0.15
+          }
+        }, `scan-${i}`))]
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: glowColor,
+        opacity: 0.05
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: size * 0.9,
+        height: size * 0.9,
+        borderRadius: size * 0.9 / 2,
+        borderWidth: 0.5 * scale,
+        borderColor: glowColor,
+        opacity: 0.1,
+        left: size * 0.05,
+        top: size * 0.05
+      }
+    }), renderStars(), renderVariant(), children]
+  });
+};

package/lib/module/icons/ReactQueryIcon.js

@@ -0,0 +1,164 @@
+"use strict";
+
+import { View } from "react-native";
+import { IconBackground } from "./IconBackground.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ColorPresets = {
+  red: {
+    color: "#FF3366",
+    glow: "#FF3366"
+  },
+  orange: {
+    color: "#FF8800",
+    glow: "#FF8800"
+  },
+  yellow: {
+    color: "#FFD700",
+    glow: "#FFD700"
+  },
+  purple: {
+    color: "#9945FF",
+    glow: "#9945FF"
+  },
+  cyan: {
+    color: "#00D4FF",
+    glow: "#00D4FF"
+  },
+  pink: {
+    color: "#FF45FF",
+    glow: "#FF45FF"
+  }
+};
+
+// Simplified orbital dots
+const ORBITAL_DOTS = [{
+  x: 0.08,
+  y: 0.5
+}, {
+  x: 0.92,
+  y: 0.5
+}, {
+  x: 0.5,
+  y: 0.2
+}, {
+  x: 0.5,
+  y: 0.8
+}];
+export const ReactQueryIcon = ({
+  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;
+
+  // Simplified hexagon using loop
+  const renderHexagon = () => {
+    const hexWidth = 8 * scale;
+    const hexHeight = 2.5 * scale;
+    const hexLeft = size / 2 - hexWidth / 2;
+    const hexTop = size / 2 - hexHeight / 2;
+    const rotations = [0, 60, -60];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [rotations.map((rotation, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: hexWidth,
+          height: hexHeight,
+          backgroundColor: activeColor,
+          left: hexLeft,
+          top: hexTop,
+          transform: rotation !== 0 ? [{
+            rotate: `${rotation}deg`
+          }] : undefined,
+          opacity: 0.9
+        }
+      }, `hex-${i}`)), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 10 * scale,
+          height: 10 * scale,
+          borderRadius: 2 * scale,
+          backgroundColor: activeGlow,
+          left: size / 2 - 5 * scale,
+          top: size / 2 - 5 * scale,
+          opacity: 0.15
+        }
+      })]
+    });
+  };
+
+  // Simplified orbital lines using loop
+  const renderOrbitalLines = () => {
+    const lineLength = 18 * scale;
+    const lineThickness = 2 * scale;
+    const orbitRadius = lineThickness / 2;
+    const rotations = [0, 60, -60];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [rotations.map((rotation, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: lineLength,
+          height: lineThickness,
+          backgroundColor: activeColor,
+          borderRadius: orbitRadius,
+          left: size / 2 - lineLength / 2,
+          top: size / 2 - lineThickness / 2,
+          transform: rotation !== 0 ? [{
+            rotate: `${rotation}deg`
+          }] : undefined,
+          opacity: 0.7
+        }
+      }, `orbit-${i}`)), ORBITAL_DOTS.map((dot, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 2.5 * scale,
+          height: 2.5 * scale,
+          borderRadius: 1.25 * scale,
+          backgroundColor: activeGlow,
+          left: dot.x * size - 1.25 * scale,
+          top: dot.y * size - 1.25 * scale,
+          opacity: 0.5
+        }
+      }, `dot-${i}`))]
+    });
+  };
+  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderOrbitalLines(), renderHexagon(), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: size * 0.7,
+        height: size * 0.7,
+        borderRadius: size * 0.35,
+        borderWidth: 0.5 * scale,
+        borderColor: activeGlow,
+        left: size * 0.15,
+        top: size * 0.15,
+        opacity: 0.2
+      }
+    })]
+  });
+  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/RenderCountIcon.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RenderCountIcon - Icon for the RENDERS modal tool
+ * Shows stacked component layers with a counter indicator,
+ * representing render count tracking and component profiling.
+ */
+export const RenderCountIcon = ({
+  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: 14 * scale,
+        height: 10 * scale,
+        borderRadius: 2 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 7 * scale + 3 * scale,
+        top: size / 2 - 5 * scale + 3 * scale,
+        opacity: 0.2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 14 * scale,
+        height: 10 * scale,
+        borderRadius: 2 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 7 * scale + 1.5 * scale,
+        top: size / 2 - 5 * scale + 1.5 * scale,
+        opacity: 0.35
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 14 * scale,
+        height: 10 * scale,
+        borderRadius: 2 * scale,
+        borderWidth: 1.5 * scale,
+        borderColor: activeColor,
+        backgroundColor: "transparent",
+        left: size / 2 - 7 * scale,
+        top: size / 2 - 5 * scale,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 6 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeColor,
+        left: size / 2 - 5 * scale,
+        top: size / 2 - 2 * scale,
+        opacity: 0.7
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 4 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeColor,
+        left: size / 2 - 5 * scale,
+        top: size / 2,
+        opacity: 0.5
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 8 * scale,
+        height: 8 * scale,
+        borderRadius: 4 * scale,
+        backgroundColor: activeColor,
+        right: size * 0.1,
+        top: size * 0.08,
+        opacity: 0.9,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 3 * scale,
+          height: 4 * scale,
+          borderRadius: 0.5 * scale,
+          backgroundColor: "#000",
+          opacity: 0.6
+        }
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 6 * scale,
+        height: 6 * scale,
+        borderRadius: 3 * scale,
+        borderWidth: 1 * scale,
+        borderColor: activeGlow,
+        borderRightColor: "transparent",
+        borderBottomColor: "transparent",
+        left: size * 0.08,
+        bottom: size * 0.12,
+        opacity: 0.6,
+        transform: [{
+          rotate: "-45deg"
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 0,
+        height: 0,
+        borderLeftWidth: 2 * scale,
+        borderRightWidth: 2 * scale,
+        borderBottomWidth: 3 * scale,
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
+        borderBottomColor: activeGlow,
+        left: size * 0.18,
+        bottom: size * 0.22,
+        opacity: 0.6,
+        transform: [{
+          rotate: "45deg"
+        }]
+      }
+    })]
+  });
+};