@principal-ai/logo-component 0.1.12 → 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
  1. package/dist/Logo.d.ts +5 -1
  2. package/dist/Logo.js +9 -30
  3. package/dist/esm/Logo.js +9 -30
  4. package/package.json +2 -1
package/dist/Logo.d.ts CHANGED
@@ -14,12 +14,16 @@ interface LogoProps {
14
14
  verticalColor?: string;
15
15
  /** Color for diagonal grid lines (defaults to color) */
16
16
  diagonalColor?: string;
17
- /** Color for the main sphere outline (defaults to color) */
17
+ /** Color for the main sphere outline (defaults to accentColor, then color) */
18
18
  outlineColor?: string;
19
19
  /** Whether to show the main sphere outline */
20
20
  showOutline?: boolean;
21
21
  /** Color for center axis lines (defaults to color) */
22
22
  axisColor?: string;
23
+ /** Whether to show the background glow effect */
24
+ showGlow?: boolean;
25
+ /** Accent color for the outer sphere outline (defaults to color) */
26
+ accentColor?: string;
23
27
  }
24
28
  export declare const Logo: React.FC<LogoProps>;
25
29
  export {};
package/dist/Logo.js CHANGED
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Logo = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
- const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, }) => {
8
+ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, accentColor, }) => {
9
9
  const finalParticleColor = particleColor || color;
10
10
  const finalLetterColor = letterColor || particleColor || color;
11
11
  const finalHorizontalColor = horizontalColor || color;
12
12
  const finalVerticalColor = verticalColor || color;
13
13
  const finalDiagonalColor = diagonalColor || color;
14
- const finalOutlineColor = outlineColor || color;
14
+ const finalOutlineColor = outlineColor || accentColor || color;
15
15
  const finalAxisColor = axisColor || color;
16
16
  return (react_1.default.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
17
17
  react_1.default.createElement("defs", null,
@@ -22,19 +22,7 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
22
22
  react_1.default.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.8 } },
23
23
  react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
24
24
  react_1.default.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
25
- react_1.default.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" }),
26
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
27
- 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" }),
28
- 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" })),
29
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
30
- 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" }),
31
- 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" })),
32
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
33
- 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" }),
34
- 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" })),
35
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
36
- 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" }),
37
- 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" })),
25
+ showGlow && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" })),
38
26
  react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
39
27
  react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
40
28
  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
48
36
  react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
49
37
  react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
50
38
  react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
51
- showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
52
39
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
53
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
54
40
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
55
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
56
41
  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)" }),
57
42
  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)" }),
58
43
  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)" }),
59
44
  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)" }),
60
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
61
- 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" }),
62
- 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" })),
63
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
64
- 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" }),
65
- 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" })),
66
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
67
- 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" }),
68
- 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" })),
69
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
70
- 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" }),
71
- 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" }))));
45
+ showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
46
+ react_1.default.createElement("g", { transform: "translate(100, 100)" },
47
+ react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
48
+ 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" })),
49
+ react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
50
+ 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" })))));
72
51
  };
73
52
  exports.Logo = Logo;
package/dist/esm/Logo.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from "react";
2
- export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, }) => {
2
+ export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, accentColor, }) => {
3
3
  const finalParticleColor = particleColor || color;
4
4
  const finalLetterColor = letterColor || particleColor || color;
5
5
  const finalHorizontalColor = horizontalColor || color;
6
6
  const finalVerticalColor = verticalColor || color;
7
7
  const finalDiagonalColor = diagonalColor || color;
8
- const finalOutlineColor = outlineColor || color;
8
+ const finalOutlineColor = outlineColor || accentColor || color;
9
9
  const finalAxisColor = axisColor || color;
10
10
  return (React.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
11
11
  React.createElement("defs", null,
@@ -16,19 +16,7 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
16
16
  React.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.8 } },
17
17
  React.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
18
18
  React.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
19
- React.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" }),
20
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
21
- 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" }),
22
- 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" })),
23
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
24
- 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" }),
25
- 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" })),
26
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
27
- 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" }),
28
- 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" })),
29
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
30
- 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" }),
31
- 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" })),
19
+ showGlow && (React.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" })),
32
20
  React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
33
21
  React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
34
22
  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
42
30
  React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
43
31
  React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
44
32
  React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
45
- showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
46
33
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
47
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
48
34
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
49
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
50
35
  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)" }),
51
36
  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)" }),
52
37
  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)" }),
53
38
  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)" }),
54
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
55
- 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" }),
56
- 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" })),
57
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
58
- 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" }),
59
- 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" })),
60
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
61
- 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" }),
62
- 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" })),
63
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
64
- 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" }),
65
- 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" }))));
39
+ showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
40
+ React.createElement("g", { transform: "translate(100, 100)" },
41
+ React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
42
+ 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" })),
43
+ React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
44
+ 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" })))));
66
45
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ai/logo-component",
3
- "version": "0.1.12",
3
+ "version": "0.1.14",
4
4
  "description": "Animated wireframe sphere logo component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -26,6 +26,7 @@
26
26
  "react": "^18.0.0 || ^19.0.0"
27
27
  },
28
28
  "devDependencies": {
29
+ "@principal-ade/industry-theme": "^0.1.18",
29
30
  "@storybook/addon-essentials": "^8.6.14",
30
31
  "@storybook/blocks": "^8.6.14",
31
32
  "@storybook/react": "^8.6.14",