npm - @principal-ai/logo-component - Versions diffs - 0.1.13 → 0.1.14 - Mend

@principal-ai/logo-component 0.1.13 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/Logo.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ interface LogoProps {
     verticalColor?: string;
     /** Color for diagonal grid lines (defaults to color) */
     diagonalColor?: string;
-    /** Color for the main sphere outline (defaults to color) */
+    /** Color for the main sphere outline (defaults to accentColor, then color) */
     outlineColor?: string;
     /** Whether to show the main sphere outline */
     showOutline?: boolean;
@@ -22,6 +22,8 @@ interface LogoProps {
     axisColor?: string;
     /** Whether to show the background glow effect */
     showGlow?: boolean;
+    /** Accent color for the outer sphere outline (defaults to color) */
+    accentColor?: string;
 }
 export declare const Logo: React.FC<LogoProps>;
 export {};

package/dist/Logo.js CHANGED Viewed

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Logo = void 0;
 const react_1 = __importDefault(require("react"));
-const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, }) => {
+const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, accentColor, }) => {
     const finalParticleColor = particleColor || color;
     const finalLetterColor = letterColor || particleColor || color;
     const finalHorizontalColor = horizontalColor || color;
     const finalVerticalColor = verticalColor || color;
     const finalDiagonalColor = diagonalColor || color;
-    const finalOutlineColor = outlineColor || color;
+    const finalOutlineColor = outlineColor || accentColor || color;
     const finalAxisColor = axisColor || color;
     return (react_1.default.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
         react_1.default.createElement("defs", null,
@@ -23,18 +23,6 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
                     react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
                 react_1.default.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
         showGlow && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 0,0 A 67,27 0 1,0 -134,0 A 67,27 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 0,0 A 67,53 0 1,0 -134,0 A 67,53 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 0,0 A 27,67 0 1,0 0,-134 A 27,67 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 0,0 A 53,67 0 1,0 0,-134 A 53,67 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" })),
         react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
@@ -48,26 +36,17 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
         react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
-        showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
         react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
-        react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
         react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
-        react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
         react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(30 100 100)" }),
         react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(60 100 100)" }),
         react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(120 100 100)" }),
         react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(150 100 100)" }),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 0,0 A 67,27 0 1,0 -134,0 A 67,27 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 0,0 A 67,53 0 1,0 -134,0 A 67,53 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 0,0 A 27,67 0 1,0 0,-134 A 27,67 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
-        react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 0,0 A 53,67 0 1,0 0,-134 A 53,67 0 1,0 0,0" }),
-            react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" }))));
+        showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
+        react_1.default.createElement("g", { transform: "translate(100, 100)" },
+            react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
+                react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 67,0 A 67,27 0 1,1 -67,0 A 67,27 0 1,1 67,0" })),
+            react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
+                react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 0,-67 A 27,67 0 1,1 0,67 A 27,67 0 1,1 0,-67" })))));
 };
 exports.Logo = Logo;

package/dist/esm/Logo.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import React from "react";
-export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, }) => {
+export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, accentColor, }) => {
     const finalParticleColor = particleColor || color;
     const finalLetterColor = letterColor || particleColor || color;
     const finalHorizontalColor = horizontalColor || color;
     const finalVerticalColor = verticalColor || color;
     const finalDiagonalColor = diagonalColor || color;
-    const finalOutlineColor = outlineColor || color;
+    const finalOutlineColor = outlineColor || accentColor || color;
     const finalAxisColor = axisColor || color;
     return (React.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
         React.createElement("defs", null,
@@ -17,18 +17,6 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
                     React.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
                 React.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
         showGlow && (React.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 0,0 A 67,27 0 1,0 -134,0 A 67,27 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 0,0 A 67,53 0 1,0 -134,0 A 67,53 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 0,0 A 27,67 0 1,0 0,-134 A 27,67 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 0,0 A 53,67 0 1,0 0,-134 A 53,67 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" })),
         React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
@@ -42,25 +30,16 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
         React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
         React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
-        showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
         React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
-        React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
         React.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
-        React.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
         React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(30 100 100)" }),
         React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(60 100 100)" }),
         React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(120 100 100)" }),
         React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "35", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(150 100 100)" }),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 0,0 A 67,27 0 1,0 -134,0 A 67,27 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 0,0 A 67,53 0 1,0 -134,0 A 67,53 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 0,0 A 27,67 0 1,0 0,-134 A 27,67 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
-        React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
-            React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 0,0 A 53,67 0 1,0 0,-134 A 53,67 0 1,0 0,0" }),
-            React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" }))));
+        showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
+        React.createElement("g", { transform: "translate(100, 100)" },
+            React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
+                React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 67,0 A 67,27 0 1,1 -67,0 A 67,27 0 1,1 67,0" })),
+            React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
+                React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 0,-67 A 27,67 0 1,1 0,67 A 27,67 0 1,1 0,-67" })))));
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/logo-component",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Animated wireframe sphere logo component",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -26,6 +26,7 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@principal-ade/industry-theme": "^0.1.18",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "^8.6.14",
     "@storybook/react": "^8.6.14",