@tamagui/logo 1.20.4 → 1.20.6

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 (31) hide show
  1. package/dist/cjs/TamaguiLogo.js +4 -160
  2. package/dist/cjs/TamaguiLogo.js.map +1 -1
  3. package/dist/cjs/index.js +4 -0
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/TamaguiLogo.js +4 -158
  6. package/dist/esm/TamaguiLogo.js.map +1 -1
  7. package/dist/esm/TamaguiLogo.mjs +4 -158
  8. package/dist/esm/TamaguiLogo.mjs.map +1 -1
  9. package/dist/esm/index.js +2 -0
  10. package/dist/esm/index.js.map +1 -1
  11. package/dist/esm/index.mjs +2 -0
  12. package/dist/esm/index.mjs.map +1 -1
  13. package/dist/jsx/TamaguiLogo.js +4 -119
  14. package/dist/jsx/TamaguiLogo.js.map +1 -1
  15. package/dist/jsx/TamaguiLogo.mjs +4 -119
  16. package/dist/jsx/TamaguiLogo.mjs.map +1 -1
  17. package/dist/jsx/index.js +2 -0
  18. package/dist/jsx/index.js.map +1 -1
  19. package/dist/jsx/index.mjs +2 -0
  20. package/dist/jsx/index.mjs.map +1 -1
  21. package/package.json +3 -3
  22. package/src/LogoIcon.tsx +24 -0
  23. package/src/LogoWords.tsx +115 -0
  24. package/src/TamaguiLogo.tsx +4 -133
  25. package/src/index.tsx +2 -0
  26. package/types/LogoIcon.d.ts +3 -0
  27. package/types/LogoWords.d.ts +6 -0
  28. package/types/TamaguiLogo.d.ts +3 -8
  29. package/types/TamaguiLogo.d.ts.map +1 -1
  30. package/types/index.d.ts +2 -0
  31. package/types/index.d.ts.map +1 -1
package/dist/jsx/TamaguiLogo.js CHANGED
@@ -1,7 +1,7 @@
1
- import { forwardRef, memo, useEffect, useState } from "react";
2
- import { Circle, XStack, YStack } from "tamagui";
3
- import { TamaguiIconSvg } from "./TamaguiLogoSvg";
4
- import { useTint } from "./useTint";
1
+ import { forwardRef } from "react";
2
+ import { XStack, YStack } from "tamagui";
3
+ import { LogoIcon } from "./LogoIcon";
4
+ import { LogoWords } from "./LogoWords";
5
5
  const TamaguiLogo = forwardRef(
6
6
  ({ showWords, downscale, animated, ...props }, ref) => {
7
7
  return <XStack
@@ -17,122 +17,7 @@ const TamaguiLogo = forwardRef(
17
17
  </XStack>;
18
18
  }
19
19
  );
20
- const LogoWords = memo(
21
- ({ downscale = 1, animated }) => {
22
- const Tint = useTint();
23
- const { tintIndex: index, tint } = Tint;
24
- const tints = Tint.tints.map((t) => `var(--${t}9)`);
25
- const [hovered, setHovered] = useState(false);
26
- const [mounted, setMounted] = useState("start");
27
- useEffect(() => {
28
- setTimeout(() => {
29
- setMounted("animate");
30
- });
31
- setTimeout(() => {
32
- setMounted("done");
33
- }, 1500);
34
- }, []);
35
- const getColor = (i) => {
36
- const isActive = mounted !== "start" && i === index;
37
- if (mounted !== "done" || hovered) {
38
- return isActive ? "var(--color)" : tints[index];
39
- }
40
- if (hovered && isActive) {
41
- return "var(--color)";
42
- }
43
- return tints[i];
44
- };
45
- const x = Math.round(
46
- index * 18.5 + 18 / 2 * (index / tints.length) + 3 + (index === 6 ? -3 : 0)
47
- );
48
- return <XStack
49
- onHoverIn={() => setHovered(true)}
50
- onHoverOut={() => setHovered(false)}
51
- paddingVertical="$2"
52
- marginVertical="$-2"
53
- position="relative"
54
- >
55
- {animated && <Circle
56
- animation="quick"
57
- position="absolute"
58
- top={0}
59
- left={0}
60
- y={mounted === "start" ? -30 : -3}
61
- x={x}
62
- size={4}
63
- backgroundColor="$color9"
64
- />}
65
- <svg
66
- width={373 * (1 / downscale) * 0.333333334}
67
- height={41 * (1 / downscale) * 0.333333334}
68
- viewBox="0 0 373 41"
69
- >
70
- <polygon
71
- shapeRendering="crispEdges"
72
- fill={getColor(0)}
73
- points="24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903"
74
- onMouseEnter={() => Tint.setTintIndex(0)}
75
- />
76
- <path
77
- shapeRendering="crispEdges"
78
- fill={getColor(1)}
79
- d="M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z"
80
- fillRule="nonzero"
81
- onMouseEnter={() => Tint.setTintIndex(1)}
82
- />
83
- <polygon
84
- shapeRendering="crispEdges"
85
- fill={getColor(2)}
86
- points="130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903"
87
- onMouseEnter={() => Tint.setTintIndex(2)}
88
- />
89
- <path
90
- fill={getColor(3)}
91
- d="M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z"
92
- fillRule="nonzero"
93
- onMouseEnter={() => Tint.setTintIndex(3)}
94
- />
95
- <polygon
96
- shapeRendering="crispEdges"
97
- fill={getColor(4)}
98
- points="264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903"
99
- onMouseEnter={() => Tint.setTintIndex(4)}
100
- />
101
- <polygon
102
- shapeRendering="crispEdges"
103
- fill={getColor(5)}
104
- points="323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903"
105
- onMouseEnter={() => Tint.setTintIndex(5)}
106
- />
107
- <polygon
108
- shapeRendering="crispEdges"
109
- fill={getColor(6)}
110
- points="372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903"
111
- onMouseEnter={() => Tint.setTintIndex(6)}
112
- />
113
- </svg>
114
- </XStack>;
115
- }
116
- );
117
- const LogoIcon = ({ downscale = 2 }) => {
118
- return <YStack
119
- tag="span"
120
- className="unselectable"
121
- alignSelf="center"
122
- marginVertical={-10}
123
- pressStyle={{
124
- opacity: 0.7,
125
- scaleX: -1
126
- }}
127
- ><TamaguiIconSvg
128
- className="tamagui-icon"
129
- width={450 / 8 / downscale}
130
- height={420 / 8 / downscale}
131
- /></YStack>;
132
- };
133
20
  export {
134
- LogoIcon,
135
- LogoWords,
136
21
  TamaguiLogo
137
22
  };
138
23
  //# sourceMappingURL=TamaguiLogo.js.map
package/dist/jsx/TamaguiLogo.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TamaguiLogo.tsx"],
4
- "mappings": "AAAA,SAAS,YAAY,MAAM,WAAW,gBAAgB;AACtD,SAAS,QAAQ,QAAqB,cAAc;AAEpD,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAQjB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,WAAW,UAAU,GAAG,MAAM,GAAc,QAAQ;AAChE,WACE,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAe;AAAA,MACf,MAAM;AAAA,UACF;AAAA;AAAA,MAEJ,CAAC,SAAS,YAAY,aAAa,MAAM,YAAY,IAAI,MAAM;AAAA,OAC9D,aACC,CAAC,OAAO,IAAI,OAAO,cAAc,IAC/B,CAAC,UAAU,UAAU,UAAU,WAAW,aAAa,GAAG,EAC5D,EAFC;AAAA,IAIL,EAdC;AAAA,EAgBL;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,CAAC,EAAE,YAAY,GAAG,SAAS,MAAkD;AAC3E,UAAM,OAAO,QAAQ;AACrB,UAAM,EAAE,WAAW,OAAO,KAAK,IAAI;AACnC,UAAM,QAAQ,KAAK,MAAM,IAAI,CAAC,MAAM,SAAS,KAAK;AAClD,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAuC,OAAO;AAE5E,cAAU,MAAM;AACd,iBAAW,MAAM;AACf,mBAAW,SAAS;AAAA,MACtB,CAAC;AAED,iBAAW,MAAM;AACf,mBAAW,MAAM;AAAA,MACnB,GAAG,IAAI;AAAA,IACT,GAAG,CAAC,CAAC;AAEL,UAAM,WAAW,CAAC,MAAc;AAC9B,YAAM,WAAW,YAAY,WAAW,MAAM;AAC9C,UAAI,YAAY,UAAU,SAAS;AACjC,eAAO,WAAW,iBAAiB,MAAM,KAAK;AAAA,MAChD;AACA,UAAI,WAAW,UAAU;AACvB,eAAO;AAAA,MACT;AACA,aAAO,MAAM,CAAC;AAAA,IAChB;AAEA,UAAM,IAAI,KAAK;AAAA,MACb,QAAQ,OAAQ,KAAK,KAAM,QAAQ,MAAM,UAAU,KAAK,UAAU,IAAI,KAAK;AAAA,IAC7E;AAEA,WACE,CAAC;AAAA,MACC,WAAW,MAAM,WAAW,IAAI;AAAA,MAChC,YAAY,MAAM,WAAW,KAAK;AAAA,MAClC,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,SAAS;AAAA;AAAA,OAER,YACC,CAAC;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG,YAAY,UAAU,MAAM;AAAA,QAE/B,GAAG;AAAA,QACH,MAAM;AAAA,QACN,gBAAgB;AAAA,MAClB;AAAA,MAEF,CAAC;AAAA,QACC,OAAO,OAAO,IAAI,aAAa;AAAA,QAC/B,QAAQ,MAAM,IAAI,aAAa;AAAA,QAC/B,QAAQ;AAAA;AAAA,QAER,CAAC;AAAA,UACC,eAAe;AAAA,UACf,MAAM,SAAS,CAAC;AAAA,UAChB,OAAO;AAAA,UACP,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,QACA,CAAC;AAAA,UACC,eAAe;AAAA,UACf,MAAM,SAAS,CAAC;AAAA,UAChB,EAAE;AAAA,UACF,SAAS;AAAA,UACT,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,QACA,CAAC;AAAA,UACC,eAAe;AAAA,UACf,MAAM,SAAS,CAAC;AAAA,UAChB,OAAO;AAAA,UACP,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,QACA,CAAC;AAAA,UACC,MAAM,SAAS,CAAC;AAAA,UAChB,EAAE;AAAA,UACF,SAAS;AAAA,UACT,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,QACA,CAAC;AAAA,UACC,eAAe;AAAA,UACf,MAAM,SAAS,CAAC;AAAA,UAChB,OAAO;AAAA,UACP,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,QACA,CAAC;AAAA,UACC,eAAe;AAAA,UACf,MAAM,SAAS,CAAC;AAAA,UAChB,OAAO;AAAA,UACP,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,QACA,CAAC;AAAA,UACC,eAAe;AAAA,UACf,MAAM,SAAS,CAAC;AAAA,UAChB,OAAO;AAAA,UACP,cAAc,MAAM,KAAK,aAAa,CAAC;AAAA,QACzC;AAAA,MACF,EAhDC;AAAA,IAiDH,EArEC;AAAA,EAuEL;AACF;AAEO,MAAM,WAAW,CAAC,EAAE,YAAY,EAAE,MAAW;AAClD,SACE,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,GAEA,CAAC;AAAA,IACC,UAAU;AAAA,IACV,OAAO,MAAM,IAAI;AAAA,IACjB,QAAQ,MAAM,IAAI;AAAA,EACpB,EACF,EAfC;AAiBL;",
4
+ "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,QAAqB,cAAc;AAE5C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAQnB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,WAAW,UAAU,GAAG,MAAM,GAAc,QAAQ;AAChE,WACE,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAe;AAAA,MACf,MAAM;AAAA,UACF;AAAA;AAAA,MAEJ,CAAC,SAAS,YAAY,aAAa,MAAM,YAAY,IAAI,MAAM;AAAA,OAC9D,aACC,CAAC,OAAO,IAAI,OAAO,cAAc,IAC/B,CAAC,UAAU,UAAU,UAAU,WAAW,aAAa,GAAG,EAC5D,EAFC;AAAA,IAIL,EAdC;AAAA,EAgBL;AACF;",
5
5
  "names": []
6
6
  }
package/dist/jsx/TamaguiLogo.mjs CHANGED
@@ -1,7 +1,7 @@
1
- import { forwardRef, memo, useEffect, useState } from "react";
2
- import { Circle, XStack, YStack } from "tamagui";
3
- import { TamaguiIconSvg } from "./TamaguiLogoSvg";
4
- import { useTint } from "./useTint";
1
+ import { forwardRef } from "react";
2
+ import { XStack, YStack } from "tamagui";
3
+ import { LogoIcon } from "./LogoIcon";
4
+ import { LogoWords } from "./LogoWords";
5
5
  const TamaguiLogo = forwardRef(
6
6
  ({ showWords, downscale, animated, ...props }, ref) => {
7
7
  return <XStack
@@ -17,122 +17,7 @@ const TamaguiLogo = forwardRef(
17
17
  </XStack>;
18
18
  }
19
19
  );
20
- const LogoWords = memo(
21
- ({ downscale = 1, animated }) => {
22
- const Tint = useTint();
23
- const { tintIndex: index, tint } = Tint;
24
- const tints = Tint.tints.map((t) => `var(--${t}9)`);
25
- const [hovered, setHovered] = useState(false);
26
- const [mounted, setMounted] = useState("start");
27
- useEffect(() => {
28
- setTimeout(() => {
29
- setMounted("animate");
30
- });
31
- setTimeout(() => {
32
- setMounted("done");
33
- }, 1500);
34
- }, []);
35
- const getColor = (i) => {
36
- const isActive = mounted !== "start" && i === index;
37
- if (mounted !== "done" || hovered) {
38
- return isActive ? "var(--color)" : tints[index];
39
- }
40
- if (hovered && isActive) {
41
- return "var(--color)";
42
- }
43
- return tints[i];
44
- };
45
- const x = Math.round(
46
- index * 18.5 + 18 / 2 * (index / tints.length) + 3 + (index === 6 ? -3 : 0)
47
- );
48
- return <XStack
49
- onHoverIn={() => setHovered(true)}
50
- onHoverOut={() => setHovered(false)}
51
- paddingVertical="$2"
52
- marginVertical="$-2"
53
- position="relative"
54
- >
55
- {animated && <Circle
56
- animation="quick"
57
- position="absolute"
58
- top={0}
59
- left={0}
60
- y={mounted === "start" ? -30 : -3}
61
- x={x}
62
- size={4}
63
- backgroundColor="$color9"
64
- />}
65
- <svg
66
- width={373 * (1 / downscale) * 0.333333334}
67
- height={41 * (1 / downscale) * 0.333333334}
68
- viewBox="0 0 373 41"
69
- >
70
- <polygon
71
- shapeRendering="crispEdges"
72
- fill={getColor(0)}
73
- points="24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903"
74
- onMouseEnter={() => Tint.setTintIndex(0)}
75
- />
76
- <path
77
- shapeRendering="crispEdges"
78
- fill={getColor(1)}
79
- d="M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z"
80
- fillRule="nonzero"
81
- onMouseEnter={() => Tint.setTintIndex(1)}
82
- />
83
- <polygon
84
- shapeRendering="crispEdges"
85
- fill={getColor(2)}
86
- points="130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903"
87
- onMouseEnter={() => Tint.setTintIndex(2)}
88
- />
89
- <path
90
- fill={getColor(3)}
91
- d="M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z"
92
- fillRule="nonzero"
93
- onMouseEnter={() => Tint.setTintIndex(3)}
94
- />
95
- <polygon
96
- shapeRendering="crispEdges"
97
- fill={getColor(4)}
98
- points="264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903"
99
- onMouseEnter={() => Tint.setTintIndex(4)}
100
- />
101
- <polygon
102
- shapeRendering="crispEdges"
103
- fill={getColor(5)}
104
- points="323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903"
105
- onMouseEnter={() => Tint.setTintIndex(5)}
106
- />
107
- <polygon
108
- shapeRendering="crispEdges"
109
- fill={getColor(6)}
110
- points="372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903"
111
- onMouseEnter={() => Tint.setTintIndex(6)}
112
- />
113
- </svg>
114
- </XStack>;
115
- }
116
- );
117
- const LogoIcon = ({ downscale = 2 }) => {
118
- return <YStack
119
- tag="span"
120
- className="unselectable"
121
- alignSelf="center"
122
- marginVertical={-10}
123
- pressStyle={{
124
- opacity: 0.7,
125
- scaleX: -1
126
- }}
127
- ><TamaguiIconSvg
128
- className="tamagui-icon"
129
- width={450 / 8 / downscale}
130
- height={420 / 8 / downscale}
131
- /></YStack>;
132
- };
133
20
  export {
134
- LogoIcon,
135
- LogoWords,
136
21
  TamaguiLogo
137
22
  };
138
23
  //# sourceMappingURL=TamaguiLogo.mjs.map
package/dist/jsx/TamaguiLogo.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/TamaguiLogo.tsx"],
4
- "mappings": "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",
4
+ "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,QAAqB,cAAc;AAE5C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAQnB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,WAAW,UAAU,GAAG,MAAM,GAAc,QAAQ;AAChE,WACE,CAAC;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,eAAe;AAAA,MACf,MAAM;AAAA,UACF;AAAA;AAAA,MAEJ,CAAC,SAAS,YAAY,aAAa,MAAM,YAAY,IAAI,MAAM;AAAA,OAC9D,aACC,CAAC,OAAO,IAAI,OAAO,cAAc,IAC/B,CAAC,UAAU,UAAU,UAAU,WAAW,aAAa,GAAG,EAC5D,EAFC;AAAA,IAIL,EAdC;AAAA,EAgBL;AACF;",
5
5
  "names": []
6
6
  }
package/dist/jsx/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  export * from "./TamaguiLogo";
2
+ export * from "./LogoWords";
3
+ export * from "./LogoIcon";
2
4
  export * from "./tints";
3
5
  export * from "./useTint";
4
6
  //# sourceMappingURL=index.js.map
package/dist/jsx/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx"],
4
- "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
4
+ "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
5
5
  "names": []
6
6
  }
package/dist/jsx/index.mjs CHANGED
@@ -1,4 +1,6 @@
1
1
  export * from "./TamaguiLogo";
2
+ export * from "./LogoWords";
3
+ export * from "./LogoIcon";
2
4
  export * from "./tints";
3
5
  export * from "./useTint";
4
6
  //# sourceMappingURL=index.mjs.map
package/dist/jsx/index.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx"],
4
- "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
4
+ "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
5
5
  "names": []
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/logo",
3
- "version": "1.20.4",
3
+ "version": "1.20.6",
4
4
  "sideEffects": false,
5
5
  "source": "src/index.ts",
6
6
  "types": "./types/index.d.ts",
@@ -20,10 +20,10 @@
20
20
  "react": "*"
21
21
  },
22
22
  "dependencies": {
23
- "tamagui": "1.20.4"
23
+ "tamagui": "1.20.6"
24
24
  },
25
25
  "devDependencies": {
26
- "@tamagui/build": "1.20.4",
26
+ "@tamagui/build": "1.20.6",
27
27
  "react": "^18.2.0"
28
28
  },
29
29
  "publishConfig": {
package/src/LogoIcon.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import { YStack } from 'tamagui'
2
+
3
+ import { TamaguiIconSvg } from './TamaguiLogoSvg'
4
+
5
+ export const LogoIcon = ({ downscale = 2 }: any) => {
6
+ return (
7
+ <YStack
8
+ tag="span"
9
+ className="unselectable"
10
+ alignSelf="center"
11
+ marginVertical={-10}
12
+ pressStyle={{
13
+ opacity: 0.7,
14
+ scaleX: -1,
15
+ }}
16
+ >
17
+ <TamaguiIconSvg
18
+ className="tamagui-icon"
19
+ width={450 / 8 / downscale}
20
+ height={420 / 8 / downscale}
21
+ />
22
+ </YStack>
23
+ )
24
+ }
package/src/LogoWords.tsx ADDED
@@ -0,0 +1,115 @@
1
+ import { memo, useEffect, useState } from 'react'
2
+ import { Circle, XStack } from 'tamagui'
3
+
4
+ import { useTint } from './useTint'
5
+
6
+ export const LogoWords = memo(
7
+ ({ downscale = 1, animated }: { downscale?: number; animated?: boolean }) => {
8
+ const Tint = useTint()
9
+ const { tintIndex: index, tint } = Tint
10
+ const tints = Tint.tints.map((t) => `var(--${t}9)`)
11
+ const [hovered, setHovered] = useState(false)
12
+ const [mounted, setMounted] = useState<'start' | 'animate' | 'done'>('start')
13
+
14
+ useEffect(() => {
15
+ setTimeout(() => {
16
+ setMounted('animate')
17
+ })
18
+
19
+ setTimeout(() => {
20
+ setMounted('done')
21
+ }, 1500)
22
+ }, [])
23
+
24
+ const getColor = (i: number) => {
25
+ const isActive = mounted !== 'start' && i === index
26
+ if (mounted !== 'done' || hovered) {
27
+ return isActive ? 'var(--color)' : tints[index]
28
+ }
29
+ if (hovered && isActive) {
30
+ return 'var(--color)'
31
+ }
32
+ return tints[i]
33
+ }
34
+
35
+ const x = Math.round(
36
+ index * 18.5 + (18 / 2) * (index / tints.length) + 3 + (index === 6 ? -3 : 0)
37
+ )
38
+
39
+ return (
40
+ <XStack
41
+ onHoverIn={() => setHovered(true)}
42
+ onHoverOut={() => setHovered(false)}
43
+ paddingVertical="$2"
44
+ marginVertical="$-2"
45
+ position="relative"
46
+ >
47
+ {animated && (
48
+ <Circle
49
+ animation="quick"
50
+ position="absolute"
51
+ top={0}
52
+ left={0}
53
+ // enterStyle={{
54
+ // y: -30
55
+ // }}
56
+ y={mounted === 'start' ? -30 : -3}
57
+ // the last i is less wide
58
+ x={x}
59
+ size={4}
60
+ backgroundColor="$color9"
61
+ />
62
+ )}
63
+ <svg
64
+ width={373 * (1 / downscale) * 0.333333334}
65
+ height={41 * (1 / downscale) * 0.333333334}
66
+ viewBox="0 0 373 41"
67
+ >
68
+ <polygon
69
+ shapeRendering="crispEdges"
70
+ fill={getColor(0)}
71
+ points="24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903"
72
+ onMouseEnter={() => Tint.setTintIndex(0)}
73
+ />
74
+ <path
75
+ shapeRendering="crispEdges"
76
+ fill={getColor(1)}
77
+ d="M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z"
78
+ fillRule="nonzero"
79
+ onMouseEnter={() => Tint.setTintIndex(1)}
80
+ />
81
+ <polygon
82
+ shapeRendering="crispEdges"
83
+ fill={getColor(2)}
84
+ points="130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903"
85
+ onMouseEnter={() => Tint.setTintIndex(2)}
86
+ />
87
+ <path
88
+ fill={getColor(3)}
89
+ d="M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z"
90
+ fillRule="nonzero"
91
+ onMouseEnter={() => Tint.setTintIndex(3)}
92
+ />
93
+ <polygon
94
+ shapeRendering="crispEdges"
95
+ fill={getColor(4)}
96
+ points="264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903"
97
+ onMouseEnter={() => Tint.setTintIndex(4)}
98
+ />
99
+ <polygon
100
+ shapeRendering="crispEdges"
101
+ fill={getColor(5)}
102
+ points="323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903"
103
+ onMouseEnter={() => Tint.setTintIndex(5)}
104
+ />
105
+ <polygon
106
+ shapeRendering="crispEdges"
107
+ fill={getColor(6)}
108
+ points="372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903"
109
+ onMouseEnter={() => Tint.setTintIndex(6)}
110
+ />
111
+ </svg>
112
+ </XStack>
113
+ )
114
+ }
115
+ )
package/src/TamaguiLogo.tsx CHANGED
@@ -1,8 +1,8 @@
1
- import { forwardRef, memo, useEffect, useState } from 'react'
2
- import { Circle, XStack, XStackProps, YStack } from 'tamagui'
1
+ import { forwardRef } from 'react'
2
+ import { XStack, XStackProps, YStack } from 'tamagui'
3
3
 
4
- import { TamaguiIconSvg } from './TamaguiLogoSvg'
5
- import { useTint } from './useTint'
4
+ import { LogoIcon } from './LogoIcon'
5
+ import { LogoWords } from './LogoWords'
6
6
 
7
7
  type LogoProps = {
8
8
  showWords?: boolean
@@ -31,132 +31,3 @@ export const TamaguiLogo = forwardRef<any, LogoProps>(
31
31
  )
32
32
  }
33
33
  )
34
-
35
- export const LogoWords = memo(
36
- ({ downscale = 1, animated }: { downscale?: number; animated?: boolean }) => {
37
- const Tint = useTint()
38
- const { tintIndex: index, tint } = Tint
39
- const tints = Tint.tints.map((t) => `var(--${t}9)`)
40
- const [hovered, setHovered] = useState(false)
41
- const [mounted, setMounted] = useState<'start' | 'animate' | 'done'>('start')
42
-
43
- useEffect(() => {
44
- setTimeout(() => {
45
- setMounted('animate')
46
- })
47
-
48
- setTimeout(() => {
49
- setMounted('done')
50
- }, 1500)
51
- }, [])
52
-
53
- const getColor = (i: number) => {
54
- const isActive = mounted !== 'start' && i === index
55
- if (mounted !== 'done' || hovered) {
56
- return isActive ? 'var(--color)' : tints[index]
57
- }
58
- if (hovered && isActive) {
59
- return 'var(--color)'
60
- }
61
- return tints[i]
62
- }
63
-
64
- const x = Math.round(
65
- index * 18.5 + (18 / 2) * (index / tints.length) + 3 + (index === 6 ? -3 : 0)
66
- )
67
-
68
- return (
69
- <XStack
70
- onHoverIn={() => setHovered(true)}
71
- onHoverOut={() => setHovered(false)}
72
- paddingVertical="$2"
73
- marginVertical="$-2"
74
- position="relative"
75
- >
76
- {animated && (
77
- <Circle
78
- animation="quick"
79
- position="absolute"
80
- top={0}
81
- left={0}
82
- y={mounted === 'start' ? -30 : -3}
83
- // the last i is less wide
84
- x={x}
85
- size={4}
86
- backgroundColor="$color9"
87
- />
88
- )}
89
- <svg
90
- width={373 * (1 / downscale) * 0.333333334}
91
- height={41 * (1 / downscale) * 0.333333334}
92
- viewBox="0 0 373 41"
93
- >
94
- <polygon
95
- shapeRendering="crispEdges"
96
- fill={getColor(0)}
97
- points="24.3870968 40.1612903 24.3870968 8.67741935 32.2580645 8.67741935 32.2580645 0.806451613 0.774193548 0.806451613 0.774193548 8.67741935 8.64516129 8.67741935 8.64516129 40.1612903"
98
- onMouseEnter={() => Tint.setTintIndex(0)}
99
- />
100
- <path
101
- shapeRendering="crispEdges"
102
- fill={getColor(1)}
103
- d="M87.3548387,0.806451613 L87.3548387,8.67741935 L95.2258065,8.67741935 L95.2258065,40.1612903 L79.483871,40.1612903 L79.483871,24.4193548 L71.6129032,24.4193548 L71.6129032,40.1612903 L55.8709677,40.1612903 L55.8709677,8.67741935 L63.7419355,8.67741935 L63.7419355,0.806451613 L87.3548387,0.806451613 Z M79.483871,8.67741935 L71.6129032,8.67741935 L71.6129032,16.5483871 L79.483871,16.5483871 L79.483871,8.67741935 Z"
104
- fillRule="nonzero"
105
- onMouseEnter={() => Tint.setTintIndex(1)}
106
- />
107
- <polygon
108
- shapeRendering="crispEdges"
109
- fill={getColor(2)}
110
- points="130.645161 40.1612903 130.645161 22.4516129 138.516129 22.4516129 138.516129 40.1612903 154.258065 40.1612903 154.258065 0.806451613 142.451613 0.806451613 142.451613 8.67741935 126.709677 8.67741935 126.709677 0.806451613 114.903226 0.806451613 114.903226 40.1612903"
111
- onMouseEnter={() => Tint.setTintIndex(2)}
112
- />
113
- <path
114
- fill={getColor(3)}
115
- d="M205.419355,0.806451613 L205.419355,8.67741935 L213.290323,8.67741935 L213.290323,40.1612903 L197.548387,40.1612903 L197.548387,24.4193548 L189.677419,24.4193548 L189.677419,40.1612903 L173.935484,40.1612903 L173.935484,8.67741935 L181.806452,8.67741935 L181.806452,0.806451613 L205.419355,0.806451613 Z M197.548387,8.67741935 L189.677419,8.67741935 L189.677419,16.5483871 L197.548387,16.5483871 L197.548387,8.67741935 Z"
116
- fillRule="nonzero"
117
- onMouseEnter={() => Tint.setTintIndex(3)}
118
- />
119
- <polygon
120
- shapeRendering="crispEdges"
121
- fill={getColor(4)}
122
- points="264.451613 40.1612903 264.451613 32.2903226 272.322581 32.2903226 272.322581 16.5483871 256.580645 16.5483871 256.580645 32.2903226 248.709677 32.2903226 248.709677 8.67741935 272.322581 8.67741935 272.322581 0.806451613 240.83871 0.806451613 240.83871 8.67741935 232.967742 8.67741935 232.967742 32.2903226 240.83871 32.2903226 240.83871 40.1612903"
123
- onMouseEnter={() => Tint.setTintIndex(4)}
124
- />
125
- <polygon
126
- shapeRendering="crispEdges"
127
- fill={getColor(5)}
128
- points="323.483871 40.1612903 323.483871 32.2903226 331.354839 32.2903226 331.354839 0.806451613 315.612903 0.806451613 315.612903 32.2903226 307.741935 32.2903226 307.741935 0.806451613 292 0.806451613 292 32.2903226 299.870968 32.2903226 299.870968 40.1612903"
129
- onMouseEnter={() => Tint.setTintIndex(5)}
130
- />
131
- <polygon
132
- shapeRendering="crispEdges"
133
- fill={getColor(6)}
134
- points="372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903"
135
- onMouseEnter={() => Tint.setTintIndex(6)}
136
- />
137
- </svg>
138
- </XStack>
139
- )
140
- }
141
- )
142
-
143
- export const LogoIcon = ({ downscale = 2 }: any) => {
144
- return (
145
- <YStack
146
- tag="span"
147
- className="unselectable"
148
- alignSelf="center"
149
- marginVertical={-10}
150
- pressStyle={{
151
- opacity: 0.7,
152
- scaleX: -1,
153
- }}
154
- >
155
- <TamaguiIconSvg
156
- className="tamagui-icon"
157
- width={450 / 8 / downscale}
158
- height={420 / 8 / downscale}
159
- />
160
- </YStack>
161
- )
162
- }
package/src/index.tsx CHANGED
@@ -1,3 +1,5 @@
1
1
  export * from './TamaguiLogo'
2
+ export * from './LogoWords'
3
+ export * from './LogoIcon'
2
4
  export * from './tints'
3
5
  export * from './useTint'
package/types/LogoIcon.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const LogoIcon: ({ downscale }: any) => JSX.Element;
3
+ //# sourceMappingURL=LogoIcon.d.ts.map
package/types/LogoWords.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ export declare const LogoWords: import("react").MemoExoticComponent<({ downscale, animated }: {
3
+ downscale?: number | undefined;
4
+ animated?: boolean | undefined;
5
+ }) => JSX.Element>;
6
+ //# sourceMappingURL=LogoWords.d.ts.map