@principal-ai/logo-component 0.1.10 → 0.1.11

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 +12 -0
  2. package/dist/Logo.js +15 -36
  3. package/dist/esm/Logo.js +15 -36
  4. package/package.json +1 -1
package/dist/Logo.d.ts CHANGED
@@ -5,6 +5,18 @@ interface LogoProps {
5
5
  color?: string;
6
6
  particleColor?: string;
7
7
  opacity?: number;
8
+ /** Color for horizontal latitude lines (defaults to color) */
9
+ horizontalColor?: string;
10
+ /** Color for vertical longitude lines (defaults to color) */
11
+ verticalColor?: string;
12
+ /** Color for diagonal grid lines (defaults to color) */
13
+ diagonalColor?: string;
14
+ /** Color for the main sphere outline (defaults to color) */
15
+ outlineColor?: string;
16
+ /** Whether to show the main sphere outline */
17
+ showOutline?: boolean;
18
+ /** Color for center axis lines (defaults to color) */
19
+ axisColor?: string;
8
20
  }
9
21
  export declare const Logo: React.FC<LogoProps>;
10
22
  export {};
package/dist/Logo.js CHANGED
@@ -5,8 +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, opacity = 0.9, }) => {
8
+ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, }) => {
9
9
  const finalParticleColor = particleColor || color;
10
+ const finalHorizontalColor = horizontalColor || color;
11
+ const finalVerticalColor = verticalColor || color;
12
+ const finalDiagonalColor = diagonalColor || color;
13
+ const finalOutlineColor = outlineColor || color;
14
+ const finalAxisColor = axisColor || color;
10
15
  return (react_1.default.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
11
16
  react_1.default.createElement("defs", null,
12
17
  react_1.default.createElement("radialGradient", { id: "sphereGlow", cx: "50%", cy: "50%", r: "50%" },
@@ -20,18 +25,12 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
20
25
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
21
26
  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" }),
22
27
  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" })),
23
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
24
- react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 0,0 A 67,40 0 1,0 -134,0 A 67,40 0 1,0 0,0" }),
25
- 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: "2s", repeatCount: "indefinite" })),
26
28
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
27
29
  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" }),
28
30
  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" })),
29
31
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
30
32
  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" }),
31
33
  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" })),
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: "2.5s", path: "M 0,0 A 40,67 0 1,0 0,-134 A 40,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: "2.5s", repeatCount: "indefinite" })),
35
34
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
36
35
  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
36
  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" })),
@@ -48,44 +47,24 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
48
47
  react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
49
48
  react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
50
49
  react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
51
- react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }),
52
- react_1.default.createElement("path", { d: "M 33,100 A 67,13 0 0,1 73,88.1", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
53
- react_1.default.createElement("path", { d: "M 127,88.1 A 67,13 0 0,1 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
54
- react_1.default.createElement("path", { d: "M 33,100 A 67,13 0 0,0 73,111.9", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
55
- react_1.default.createElement("path", { d: "M 127,111.9 A 67,13 0 0,0 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
56
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
57
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
58
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
59
- react_1.default.createElement("path", { d: "M 100,33 A 13,67 0 0,0 87,73", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
60
- react_1.default.createElement("path", { d: "M 113,73 A 13,67 0 0,0 100,33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
61
- react_1.default.createElement("path", { d: "M 100,167 A 13,67 0 0,1 87,127", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
62
- react_1.default.createElement("path", { d: "M 113,127 A 13,67 0 0,1 100,167", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
63
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
64
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "40", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
65
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
66
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(30 100 100)" }),
67
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(60 100 100)" }),
68
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(120 100 100)" }),
69
- react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(150 100 100)" }),
70
- react_1.default.createElement("line", { x1: "33", y1: "100", x2: "73", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
71
- react_1.default.createElement("line", { x1: "127", y1: "100", x2: "167", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
72
- react_1.default.createElement("line", { x1: "100", y1: "33", x2: "100", y2: "73", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
73
- react_1.default.createElement("line", { x1: "100", y1: "127", x2: "100", y2: "167", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
50
+ showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
51
+ react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
52
+ react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
53
+ react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
54
+ react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
55
+ 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)" }),
56
+ 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)" }),
57
+ 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)" }),
58
+ 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)" }),
74
59
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
75
60
  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" }),
76
61
  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" })),
77
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
78
- react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 0,0 A 67,40 0 1,0 -134,0 A 67,40 0 1,0 0,0" }),
79
- 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: "2s", repeatCount: "indefinite" })),
80
62
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
81
63
  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" }),
82
64
  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" })),
83
65
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
84
66
  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" }),
85
67
  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" })),
86
- react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
87
- react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 0,0 A 40,67 0 1,0 0,-134 A 40,67 0 1,0 0,0" }),
88
- 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: "2.5s", repeatCount: "indefinite" })),
89
68
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
90
69
  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" }),
91
70
  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" }))));
package/dist/esm/Logo.js CHANGED
@@ -1,6 +1,11 @@
1
1
  import React from "react";
2
- export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, }) => {
2
+ export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, }) => {
3
3
  const finalParticleColor = particleColor || color;
4
+ const finalHorizontalColor = horizontalColor || color;
5
+ const finalVerticalColor = verticalColor || color;
6
+ const finalDiagonalColor = diagonalColor || color;
7
+ const finalOutlineColor = outlineColor || color;
8
+ const finalAxisColor = axisColor || color;
4
9
  return (React.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
5
10
  React.createElement("defs", null,
6
11
  React.createElement("radialGradient", { id: "sphereGlow", cx: "50%", cy: "50%", r: "50%" },
@@ -14,18 +19,12 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
14
19
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
15
20
  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" }),
16
21
  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" })),
17
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
18
- React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 0,0 A 67,40 0 1,0 -134,0 A 67,40 0 1,0 0,0" }),
19
- React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "2s", repeatCount: "indefinite" })),
20
22
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
21
23
  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" }),
22
24
  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" })),
23
25
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
24
26
  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" }),
25
27
  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" })),
26
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
27
- React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 0,0 A 40,67 0 1,0 0,-134 A 40,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: "2.5s", repeatCount: "indefinite" })),
29
28
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
30
29
  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
30
  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" })),
@@ -42,44 +41,24 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
42
41
  React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
42
  React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
44
43
  React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
45
- React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }),
46
- React.createElement("path", { d: "M 33,100 A 67,13 0 0,1 73,88.1", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
47
- React.createElement("path", { d: "M 127,88.1 A 67,13 0 0,1 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
48
- React.createElement("path", { d: "M 33,100 A 67,13 0 0,0 73,111.9", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
49
- React.createElement("path", { d: "M 127,111.9 A 67,13 0 0,0 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
50
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
51
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
52
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
53
- React.createElement("path", { d: "M 100,33 A 13,67 0 0,0 87,73", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
54
- React.createElement("path", { d: "M 113,73 A 13,67 0 0,0 100,33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
55
- React.createElement("path", { d: "M 100,167 A 13,67 0 0,1 87,127", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
56
- React.createElement("path", { d: "M 113,127 A 13,67 0 0,1 100,167", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
57
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
58
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "40", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
59
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
60
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(30 100 100)" }),
61
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(60 100 100)" }),
62
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(120 100 100)" }),
63
- React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(150 100 100)" }),
64
- React.createElement("line", { x1: "33", y1: "100", x2: "73", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
65
- React.createElement("line", { x1: "127", y1: "100", x2: "167", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
66
- React.createElement("line", { x1: "100", y1: "33", x2: "100", y2: "73", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
67
- React.createElement("line", { x1: "100", y1: "127", x2: "100", y2: "167", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
44
+ showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
45
+ React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
46
+ React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
47
+ React.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
48
+ React.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
49
+ 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)" }),
50
+ 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)" }),
51
+ 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)" }),
52
+ 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)" }),
68
53
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
69
54
  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" }),
70
55
  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" })),
71
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
72
- React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 0,0 A 67,40 0 1,0 -134,0 A 67,40 0 1,0 0,0" }),
73
- 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: "2s", repeatCount: "indefinite" })),
74
56
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
75
57
  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" }),
76
58
  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" })),
77
59
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
78
60
  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" }),
79
61
  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" })),
80
- React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
81
- React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 0,0 A 40,67 0 1,0 0,-134 A 40,67 0 1,0 0,0" }),
82
- 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: "2.5s", repeatCount: "indefinite" })),
83
62
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
84
63
  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" }),
85
64
  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" }))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ai/logo-component",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "description": "Animated wireframe sphere logo component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",