@principal-ai/logo-component 0.1.10 → 0.1.12

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 (10) hide show
  1. package/dist/ForksLogo.d.ts +3 -0
  2. package/dist/ForksLogo.js +14 -13
  3. package/dist/Logo.d.ts +15 -0
  4. package/dist/Logo.js +29 -49
  5. package/dist/LogoSmall.d.ts +3 -0
  6. package/dist/LogoSmall.js +14 -13
  7. package/dist/esm/ForksLogo.js +14 -13
  8. package/dist/esm/Logo.js +29 -49
  9. package/dist/esm/LogoSmall.js +14 -13
  10. package/package.json +1 -1
package/dist/ForksLogo.d.ts CHANGED
@@ -3,7 +3,10 @@ interface ForksLogoProps {
3
3
  width?: number;
4
4
  height?: number;
5
5
  color?: string;
6
+ /** Color for orbiting particles (defaults to color) */
6
7
  particleColor?: string;
8
+ /** Color for the "F" letter dots in the center (defaults to particleColor, then color) */
9
+ letterColor?: string;
7
10
  opacity?: number;
8
11
  }
9
12
  export declare const ForksLogo: React.FC<ForksLogoProps>;
package/dist/ForksLogo.js CHANGED
@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ForksLogo = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
- const ForksLogo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, }) => {
8
+ const ForksLogo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, }) => {
9
9
  const finalParticleColor = particleColor || color;
10
+ const finalLetterColor = letterColor || particleColor || color;
10
11
  return (react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 200 200", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
11
12
  react_1.default.createElement("defs", null,
12
13
  react_1.default.createElement("radialGradient", { id: "sphereGlowForks", cx: "50%", cy: "50%", r: "50%" },
@@ -35,18 +36,18 @@ const ForksLogo = ({ width = 150, height = 150, color = "currentColor", particle
35
36
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
36
37
  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
38
  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" })),
38
- react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
- react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
40
- react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
41
- react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
42
- react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
- react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
44
- react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
45
- react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
46
- react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
47
- react_1.default.createElement("circle", { cx: "108", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
48
- react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
49
- react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
+ react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
40
+ react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
41
+ react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
42
+ react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
43
+ react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalLetterColor, opacity: "0.9" }),
44
+ react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalLetterColor, opacity: "0.9" }),
45
+ react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalLetterColor, opacity: "0.9" }),
46
+ react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
47
+ react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
48
+ react_1.default.createElement("circle", { cx: "108", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
49
+ react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
50
+ react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
50
51
  react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }),
51
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" }),
52
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" }),
package/dist/Logo.d.ts CHANGED
@@ -3,8 +3,23 @@ interface LogoProps {
3
3
  width?: number;
4
4
  height?: number;
5
5
  color?: string;
6
+ /** Color for orbiting particles (defaults to color) */
6
7
  particleColor?: string;
8
+ /** Color for the "P" letter dots in the center (defaults to particleColor, then color) */
9
+ letterColor?: string;
7
10
  opacity?: number;
11
+ /** Color for horizontal latitude lines (defaults to color) */
12
+ horizontalColor?: string;
13
+ /** Color for vertical longitude lines (defaults to color) */
14
+ verticalColor?: string;
15
+ /** Color for diagonal grid lines (defaults to color) */
16
+ diagonalColor?: string;
17
+ /** Color for the main sphere outline (defaults to color) */
18
+ outlineColor?: string;
19
+ /** Whether to show the main sphere outline */
20
+ showOutline?: boolean;
21
+ /** Color for center axis lines (defaults to color) */
22
+ axisColor?: string;
8
23
  }
9
24
  export declare const Logo: React.FC<LogoProps>;
10
25
  export {};
package/dist/Logo.js CHANGED
@@ -5,8 +5,14 @@ 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, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, }) => {
9
9
  const finalParticleColor = particleColor || color;
10
+ const finalLetterColor = letterColor || particleColor || color;
11
+ const finalHorizontalColor = horizontalColor || color;
12
+ const finalVerticalColor = verticalColor || color;
13
+ const finalDiagonalColor = diagonalColor || color;
14
+ const finalOutlineColor = outlineColor || color;
15
+ const finalAxisColor = axisColor || color;
10
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 } },
11
17
  react_1.default.createElement("defs", null,
12
18
  react_1.default.createElement("radialGradient", { id: "sphereGlow", cx: "50%", cy: "50%", r: "50%" },
@@ -20,72 +26,46 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
20
26
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
21
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" }),
22
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" })),
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
29
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
27
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" }),
28
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" })),
29
32
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
30
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" }),
31
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" })),
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
35
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
36
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
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" })),
38
- react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
- react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
40
- react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
41
- react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
42
- react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
- react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
44
- react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
45
- react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
46
- react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
47
- react_1.default.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
48
- react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
49
- react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
50
- 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" }),
38
+ react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
39
+ react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
40
+ react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
41
+ react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
42
+ react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalLetterColor, opacity: "0.9" }),
43
+ react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalLetterColor, opacity: "0.9" }),
44
+ react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalLetterColor, opacity: "0.9" }),
45
+ react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
46
+ react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
47
+ react_1.default.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
48
+ react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
49
+ react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
50
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
60
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
75
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" }),
76
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" })),
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
63
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
81
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" }),
82
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" })),
83
66
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
84
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" }),
85
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" })),
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
69
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
90
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" }),
91
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" }))));
package/dist/LogoSmall.d.ts CHANGED
@@ -3,7 +3,10 @@ interface LogoSmallProps {
3
3
  width?: number;
4
4
  height?: number;
5
5
  color?: string;
6
+ /** Color for orbiting particles (defaults to color) */
6
7
  particleColor?: string;
8
+ /** Color for the "P" letter dots in the center (defaults to particleColor, then color) */
9
+ letterColor?: string;
7
10
  opacity?: number;
8
11
  }
9
12
  export declare const LogoSmall: React.FC<LogoSmallProps>;
package/dist/LogoSmall.js CHANGED
@@ -5,25 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.LogoSmall = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
- const LogoSmall = ({ width = 32, height = 32, color = "currentColor", particleColor, opacity = 0.9, }) => {
8
+ const LogoSmall = ({ width = 32, height = 32, color = "currentColor", particleColor, letterColor, opacity = 0.9, }) => {
9
9
  const finalParticleColor = particleColor || color;
10
+ const finalLetterColor = letterColor || particleColor || color;
10
11
  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
12
  react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "2", opacity: "0.9" }),
12
13
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6" }),
13
14
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "40", ry: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6" }),
14
15
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6", transform: "rotate(45 100 100)" }),
15
16
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6", transform: "rotate(-45 100 100)" }),
16
- react_1.default.createElement("circle", { cx: "90", cy: "80", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
17
- react_1.default.createElement("circle", { cx: "90", cy: "88", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
18
- react_1.default.createElement("circle", { cx: "90", cy: "96", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
19
- react_1.default.createElement("circle", { cx: "90", cy: "104", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
20
- react_1.default.createElement("circle", { cx: "90", cy: "112", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
21
- react_1.default.createElement("circle", { cx: "90", cy: "120", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
22
- react_1.default.createElement("circle", { cx: "98", cy: "80", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
23
- react_1.default.createElement("circle", { cx: "106", cy: "80", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
24
- react_1.default.createElement("circle", { cx: "114", cy: "88", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
25
- react_1.default.createElement("circle", { cx: "114", cy: "96", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
26
- react_1.default.createElement("circle", { cx: "106", cy: "104", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
27
- react_1.default.createElement("circle", { cx: "98", cy: "104", r: "3.5", fill: finalParticleColor, opacity: "0.95" })));
17
+ react_1.default.createElement("circle", { cx: "90", cy: "80", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
18
+ react_1.default.createElement("circle", { cx: "90", cy: "88", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
19
+ react_1.default.createElement("circle", { cx: "90", cy: "96", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
20
+ react_1.default.createElement("circle", { cx: "90", cy: "104", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
21
+ react_1.default.createElement("circle", { cx: "90", cy: "112", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
22
+ react_1.default.createElement("circle", { cx: "90", cy: "120", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
23
+ react_1.default.createElement("circle", { cx: "98", cy: "80", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
24
+ react_1.default.createElement("circle", { cx: "106", cy: "80", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
25
+ react_1.default.createElement("circle", { cx: "114", cy: "88", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
26
+ react_1.default.createElement("circle", { cx: "114", cy: "96", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
27
+ react_1.default.createElement("circle", { cx: "106", cy: "104", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
28
+ react_1.default.createElement("circle", { cx: "98", cy: "104", r: "3.5", fill: finalLetterColor, opacity: "0.95" })));
28
29
  };
29
30
  exports.LogoSmall = LogoSmall;
package/dist/esm/ForksLogo.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
- export const ForksLogo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, }) => {
2
+ export const ForksLogo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, }) => {
3
3
  const finalParticleColor = particleColor || color;
4
+ const finalLetterColor = letterColor || particleColor || color;
4
5
  return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 200 200", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
5
6
  React.createElement("defs", null,
6
7
  React.createElement("radialGradient", { id: "sphereGlowForks", cx: "50%", cy: "50%", r: "50%" },
@@ -29,18 +30,18 @@ export const ForksLogo = ({ width = 150, height = 150, color = "currentColor", p
29
30
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
30
31
  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
32
  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" })),
32
- React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
33
- React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
34
- React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
35
- React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
36
- React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
37
- React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
38
- React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
- React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
40
- React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
41
- React.createElement("circle", { cx: "108", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
42
- React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
- React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
33
+ React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
34
+ React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
35
+ React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
36
+ React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
37
+ React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalLetterColor, opacity: "0.9" }),
38
+ React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalLetterColor, opacity: "0.9" }),
39
+ React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalLetterColor, opacity: "0.9" }),
40
+ React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
41
+ React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
42
+ React.createElement("circle", { cx: "108", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
43
+ React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
44
+ React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
44
45
  React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }),
45
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" }),
46
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" }),
package/dist/esm/Logo.js CHANGED
@@ -1,6 +1,12 @@
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, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, }) => {
3
3
  const finalParticleColor = particleColor || color;
4
+ const finalLetterColor = letterColor || particleColor || color;
5
+ const finalHorizontalColor = horizontalColor || color;
6
+ const finalVerticalColor = verticalColor || color;
7
+ const finalDiagonalColor = diagonalColor || color;
8
+ const finalOutlineColor = outlineColor || color;
9
+ const finalAxisColor = axisColor || color;
4
10
  return (React.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
5
11
  React.createElement("defs", null,
6
12
  React.createElement("radialGradient", { id: "sphereGlow", cx: "50%", cy: "50%", r: "50%" },
@@ -14,72 +20,46 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
14
20
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
15
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" }),
16
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" })),
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
23
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
21
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" }),
22
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" })),
23
26
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
24
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" }),
25
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" })),
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
29
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
30
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
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" })),
32
- React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
33
- React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
34
- React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
35
- React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
36
- React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
37
- React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
38
- React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
- React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
40
- React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
41
- React.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
42
- React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
- React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
44
- 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" }),
32
+ React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
33
+ React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
34
+ React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
35
+ React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
36
+ React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalLetterColor, opacity: "0.9" }),
37
+ React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalLetterColor, opacity: "0.9" }),
38
+ React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalLetterColor, opacity: "0.9" }),
39
+ React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
40
+ React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
41
+ React.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
42
+ React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
43
+ React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
44
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
54
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
69
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" }),
70
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" })),
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
57
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "167", cy: "100", opacity: "0" },
75
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" }),
76
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" })),
77
60
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
78
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" }),
79
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" })),
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
63
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
84
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" }),
85
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" }))));
package/dist/esm/LogoSmall.js CHANGED
@@ -1,22 +1,23 @@
1
1
  import React from "react";
2
- export const LogoSmall = ({ width = 32, height = 32, color = "currentColor", particleColor, opacity = 0.9, }) => {
2
+ export const LogoSmall = ({ width = 32, height = 32, color = "currentColor", particleColor, letterColor, opacity = 0.9, }) => {
3
3
  const finalParticleColor = particleColor || color;
4
+ const finalLetterColor = letterColor || particleColor || color;
4
5
  return (React.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
5
6
  React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "2", opacity: "0.9" }),
6
7
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6" }),
7
8
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "40", ry: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6" }),
8
9
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6", transform: "rotate(45 100 100)" }),
9
10
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.6", transform: "rotate(-45 100 100)" }),
10
- React.createElement("circle", { cx: "90", cy: "80", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
11
- React.createElement("circle", { cx: "90", cy: "88", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
12
- React.createElement("circle", { cx: "90", cy: "96", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
13
- React.createElement("circle", { cx: "90", cy: "104", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
14
- React.createElement("circle", { cx: "90", cy: "112", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
15
- React.createElement("circle", { cx: "90", cy: "120", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
16
- React.createElement("circle", { cx: "98", cy: "80", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
17
- React.createElement("circle", { cx: "106", cy: "80", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
18
- React.createElement("circle", { cx: "114", cy: "88", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
19
- React.createElement("circle", { cx: "114", cy: "96", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
20
- React.createElement("circle", { cx: "106", cy: "104", r: "3.5", fill: finalParticleColor, opacity: "0.95" }),
21
- React.createElement("circle", { cx: "98", cy: "104", r: "3.5", fill: finalParticleColor, opacity: "0.95" })));
11
+ React.createElement("circle", { cx: "90", cy: "80", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
12
+ React.createElement("circle", { cx: "90", cy: "88", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
13
+ React.createElement("circle", { cx: "90", cy: "96", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
14
+ React.createElement("circle", { cx: "90", cy: "104", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
15
+ React.createElement("circle", { cx: "90", cy: "112", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
16
+ React.createElement("circle", { cx: "90", cy: "120", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
17
+ React.createElement("circle", { cx: "98", cy: "80", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
18
+ React.createElement("circle", { cx: "106", cy: "80", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
19
+ React.createElement("circle", { cx: "114", cy: "88", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
20
+ React.createElement("circle", { cx: "114", cy: "96", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
21
+ React.createElement("circle", { cx: "106", cy: "104", r: "3.5", fill: finalLetterColor, opacity: "0.95" }),
22
+ React.createElement("circle", { cx: "98", cy: "104", r: "3.5", fill: finalLetterColor, opacity: "0.95" })));
22
23
  };
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.12",
4
4
  "description": "Animated wireframe sphere logo component",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",