@principal-ai/logo-component 0.1.11 → 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 +3 -0
  4. package/dist/Logo.js +15 -14
  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 +15 -14
  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,7 +3,10 @@ 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;
8
11
  /** Color for horizontal latitude lines (defaults to color) */
9
12
  horizontalColor?: string;
package/dist/Logo.js CHANGED
@@ -5,8 +5,9 @@ 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, 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, }) => {
9
9
  const finalParticleColor = particleColor || color;
10
+ const finalLetterColor = letterColor || particleColor || color;
10
11
  const finalHorizontalColor = horizontalColor || color;
11
12
  const finalVerticalColor = verticalColor || color;
12
13
  const finalDiagonalColor = diagonalColor || color;
@@ -34,19 +35,19 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
34
35
  react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
35
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" }),
36
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" })),
37
- react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
38
- react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
- react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
40
- react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
41
- react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
42
- react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
- react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
44
- react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
45
- react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
46
- react_1.default.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
47
- react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
48
- react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
49
- react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
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" }),
50
51
  showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
51
52
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
52
53
  react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
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,7 @@
1
1
  import React from "react";
2
- export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, 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, }) => {
3
3
  const finalParticleColor = particleColor || color;
4
+ const finalLetterColor = letterColor || particleColor || color;
4
5
  const finalHorizontalColor = horizontalColor || color;
5
6
  const finalVerticalColor = verticalColor || color;
6
7
  const finalDiagonalColor = diagonalColor || color;
@@ -28,19 +29,19 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
28
29
  React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "167", opacity: "0" },
29
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" }),
30
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" })),
31
- React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
32
- React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
33
- React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
34
- React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
35
- React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
36
- React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
37
- React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
38
- React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
39
- React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
40
- React.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
41
- React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
42
- React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
43
- React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
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" }),
44
45
  showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
45
46
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
46
47
  React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
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.11",
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",