@tamagui/logo 3.0.0-beta.1161.1 → 3.0.0-beta.1173.1

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 (11) hide show
  1. package/dist/cjs/LogoWords.cjs +9 -9
  2. package/dist/cjs/LogoWords.native.cjs +9 -9
  3. package/dist/cjs/LogoWords.native.js +9 -9
  4. package/dist/cjs/LogoWords.native.js.map +1 -1
  5. package/dist/esm/LogoWords.mjs +9 -9
  6. package/dist/esm/LogoWords.mjs.map +1 -1
  7. package/dist/esm/LogoWords.native.js +9 -9
  8. package/dist/esm/LogoWords.native.js.map +1 -1
  9. package/package.json +5 -5
  10. package/src/LogoWords.tsx +17 -17
  11. package/types/LogoWords.d.ts.map +1 -1
package/dist/cjs/LogoWords.cjs CHANGED
@@ -32,13 +32,13 @@ var import_tamagui = require("tamagui");
32
32
  var import_useTint = require("./useTint.cjs");
33
33
  var import_jsx_runtime = require("react/jsx-runtime");
34
34
  const defaultColors = [
35
- "var(--color12)",
36
- "var(--color12)",
37
- "var(--color12)",
38
- "var(--color12)",
39
- "var(--red9)",
40
- "var(--green9)",
41
- "var(--blue9)"
35
+ "var(--color-12)",
36
+ "var(--color-12)",
37
+ "var(--color-12)",
38
+ "var(--color-12)",
39
+ "var(--red-9)",
40
+ "var(--green-9)",
41
+ "var(--blue-9)"
42
42
  ];
43
43
  const LogoWords = import_react.default.memo(({ downscale = 1, animated, ...props }) => {
44
44
  const Tint = (0, import_useTint.useTint)();
@@ -69,7 +69,7 @@ const LogoWords = import_react.default.memo(({ downscale = 1, animated, ...props
69
69
  };
70
70
  }, [Tint]);
71
71
  const getColor = (i) => {
72
- if (hovered) return `var(--${Tint.tints[i]}9)`;
72
+ if (hovered) return `var(--${Tint.tints[i]}-9)`;
73
73
  return defaultColors[i];
74
74
  };
75
75
  const x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));
@@ -100,7 +100,7 @@ const LogoWords = import_react.default.memo(({ downscale = 1, animated, ...props
100
100
  left: 0,
101
101
  y: mounted === "start" ? -30 : -4,
102
102
  x,
103
- backgroundColor: "color12",
103
+ backgroundColor: "color-12",
104
104
  style: {
105
105
  width: 4,
106
106
  height: 4
package/dist/cjs/LogoWords.native.cjs CHANGED
@@ -34,13 +34,13 @@ var import_react = __toESM(require("react"), 1);
34
34
  var import_tamagui = require("tamagui");
35
35
  var import_useTint = require("./useTint.native.js");
36
36
  var defaultColors = [
37
- "var(--color12)",
38
- "var(--color12)",
39
- "var(--color12)",
40
- "var(--color12)",
41
- "var(--red9)",
42
- "var(--green9)",
43
- "var(--blue9)"
37
+ "var(--color-12)",
38
+ "var(--color-12)",
39
+ "var(--color-12)",
40
+ "var(--color-12)",
41
+ "var(--red-9)",
42
+ "var(--green-9)",
43
+ "var(--blue-9)"
44
44
  ];
45
45
  var LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {
46
46
  var { downscale = 1, animated, ...props } = param;
@@ -72,7 +72,7 @@ var LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {
72
72
  };
73
73
  }, [Tint]);
74
74
  var getColor = function(i) {
75
- if (hovered) return `var(--${Tint.tints[i]}9)`;
75
+ if (hovered) return `var(--${Tint.tints[i]}-9)`;
76
76
  return defaultColors[i];
77
77
  };
78
78
  var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));
@@ -107,7 +107,7 @@ var LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {
107
107
  left: 0,
108
108
  y: mounted === "start" ? -30 : -4,
109
109
  x,
110
- backgroundColor: "color12",
110
+ backgroundColor: "color-12",
111
111
  style: {
112
112
  width: 4,
113
113
  height: 4
package/dist/cjs/LogoWords.native.js CHANGED
@@ -34,13 +34,13 @@ var import_react = __toESM(require("react"), 1);
34
34
  var import_tamagui = require("tamagui");
35
35
  var import_useTint = require("./useTint.native.js");
36
36
  var defaultColors = [
37
- "var(--color12)",
38
- "var(--color12)",
39
- "var(--color12)",
40
- "var(--color12)",
41
- "var(--red9)",
42
- "var(--green9)",
43
- "var(--blue9)"
37
+ "var(--color-12)",
38
+ "var(--color-12)",
39
+ "var(--color-12)",
40
+ "var(--color-12)",
41
+ "var(--red-9)",
42
+ "var(--green-9)",
43
+ "var(--blue-9)"
44
44
  ];
45
45
  var LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {
46
46
  var { downscale = 1, animated, ...props } = param;
@@ -72,7 +72,7 @@ var LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {
72
72
  };
73
73
  }, [Tint]);
74
74
  var getColor = function(i) {
75
- if (hovered) return `var(--${Tint.tints[i]}9)`;
75
+ if (hovered) return `var(--${Tint.tints[i]}-9)`;
76
76
  return defaultColors[i];
77
77
  };
78
78
  var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));
@@ -107,7 +107,7 @@ var LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {
107
107
  left: 0,
108
108
  y: mounted === "start" ? -30 : -4,
109
109
  x,
110
- backgroundColor: "color12",
110
+ backgroundColor: "color-12",
111
111
  style: {
112
112
  width: 4,
113
113
  height: 4
package/dist/cjs/LogoWords.native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LogoWords.native.js","names":[],"sources":["cjs/LogoWords.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar LogoWords_exports = {};\n__export(LogoWords_exports, {\n LogoWords: () => LogoWords\n});\nmodule.exports = __toCommonJS(LogoWords_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_react = __toESM(require(\"react\"), 1);\nvar import_tamagui = require(\"tamagui\");\nvar import_useTint = require(\"./useTint\");\nvar defaultColors = [\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--red9)\",\n \"var(--green9)\",\n \"var(--blue9)\"\n];\nvar LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {\n var { downscale = 1, animated, ...props } = param;\n var Tint = (0, import_useTint.useTint)();\n var [hovered, setHovered] = import_react.default.useState(false);\n var [mounted, setMounted] = import_react.default.useState(\"start\");\n var { tintIndex: index } = Tint;\n (0, import_react.useEffect)(function() {\n var idle = window.requestIdleCallback || setTimeout;\n idle(function() {\n setTimeout(function() {\n setMounted(\"animate\");\n }, 50);\n setTimeout(function() {\n setMounted(\"done\");\n }, 1500);\n });\n }, []);\n (0, import_react.useEffect)(function() {\n var handleKeyDown = function(event) {\n var index2 = Number.parseInt(event.key, 10) - 1;\n if (!Number.isNaN(index2) && index2 >= 0 && index2 < Tint.tints.length) {\n Tint.setTintIndex(index2);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return function() {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n Tint\n ]);\n var getColor = function(i) {\n if (hovered) return `var(--${Tint.tints[i]}9)`;\n return defaultColors[i];\n };\n var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));\n var [layout, setLayout] = (0, import_react.useState)();\n return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {\n onMouseEnter: function() {\n return setHovered(true);\n },\n onMouseLeave: function() {\n return setHovered(false);\n },\n paddingVertical: \"2\",\n marginVertical: \"-2\",\n position: \"relative\",\n ...props,\n \"data-tauri-drag-region\": true,\n className: \"logo-words\",\n onLayout: function(e) {\n setLayout(e.nativeEvent.layout);\n },\n onMouseMove: function(e) {\n if (!layout) return;\n var x2 = e.clientX - layout.pageX;\n var sectionWidth = layout.width / 7;\n var section = Math.min(6, Math.floor(x2 / sectionWidth));\n Tint.setTintIndex(section);\n },\n children: [\n animated && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {\n transition: \"medium\",\n position: \"absolute\",\n top: 0,\n left: 0,\n y: mounted === \"start\" ? -30 : -4,\n x,\n backgroundColor: \"color12\",\n style: {\n width: 4,\n height: 4\n }\n }),\n /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(\"svg\", {\n \"data-tauri-drag-region\": true,\n width: 373 * (1 / downscale) * 0.3333333,\n height: 41 * (1 / downscale) * 0.3333333,\n viewBox: \"0 0 373 41\",\n children: [\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(0),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(0)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"path\", {\n shapeRendering: \"crispEdges\",\n fill: getColor(1),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(1)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(2),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(2)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"path\", {\n fill: getColor(3),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(3)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(4),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(4)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(5),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(5)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(6),\n points: \"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n })\n ]\n })\n ]\n });\n});\n//# sourceMappingURL=LogoWords.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"LogoWords.native.js","names":[],"sources":["cjs/LogoWords.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar LogoWords_exports = {};\n__export(LogoWords_exports, {\n LogoWords: () => LogoWords\n});\nmodule.exports = __toCommonJS(LogoWords_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_react = __toESM(require(\"react\"), 1);\nvar import_tamagui = require(\"tamagui\");\nvar import_useTint = require(\"./useTint\");\nvar defaultColors = [\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--red-9)\",\n \"var(--green-9)\",\n \"var(--blue-9)\"\n];\nvar LogoWords = /* @__PURE__ */ import_react.default.memo(function(param) {\n var { downscale = 1, animated, ...props } = param;\n var Tint = (0, import_useTint.useTint)();\n var [hovered, setHovered] = import_react.default.useState(false);\n var [mounted, setMounted] = import_react.default.useState(\"start\");\n var { tintIndex: index } = Tint;\n (0, import_react.useEffect)(function() {\n var idle = window.requestIdleCallback || setTimeout;\n idle(function() {\n setTimeout(function() {\n setMounted(\"animate\");\n }, 50);\n setTimeout(function() {\n setMounted(\"done\");\n }, 1500);\n });\n }, []);\n (0, import_react.useEffect)(function() {\n var handleKeyDown = function(event) {\n var index2 = Number.parseInt(event.key, 10) - 1;\n if (!Number.isNaN(index2) && index2 >= 0 && index2 < Tint.tints.length) {\n Tint.setTintIndex(index2);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return function() {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n Tint\n ]);\n var getColor = function(i) {\n if (hovered) return `var(--${Tint.tints[i]}-9)`;\n return defaultColors[i];\n };\n var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));\n var [layout, setLayout] = (0, import_react.useState)();\n return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {\n onMouseEnter: function() {\n return setHovered(true);\n },\n onMouseLeave: function() {\n return setHovered(false);\n },\n paddingVertical: \"2\",\n marginVertical: \"-2\",\n position: \"relative\",\n ...props,\n \"data-tauri-drag-region\": true,\n className: \"logo-words\",\n onLayout: function(e) {\n setLayout(e.nativeEvent.layout);\n },\n onMouseMove: function(e) {\n if (!layout) return;\n var x2 = e.clientX - layout.pageX;\n var sectionWidth = layout.width / 7;\n var section = Math.min(6, Math.floor(x2 / sectionWidth));\n Tint.setTintIndex(section);\n },\n children: [\n animated && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {\n transition: \"medium\",\n position: \"absolute\",\n top: 0,\n left: 0,\n y: mounted === \"start\" ? -30 : -4,\n x,\n backgroundColor: \"color-12\",\n style: {\n width: 4,\n height: 4\n }\n }),\n /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(\"svg\", {\n \"data-tauri-drag-region\": true,\n width: 373 * (1 / downscale) * 0.3333333,\n height: 41 * (1 / downscale) * 0.3333333,\n viewBox: \"0 0 373 41\",\n children: [\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(0),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(0)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"path\", {\n shapeRendering: \"crispEdges\",\n fill: getColor(1),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(1)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(2),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(2)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"path\", {\n fill: getColor(3),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(3)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(4),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(4)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(5),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(5)}\n /* @__PURE__ */ (0, import_jsx_runtime.jsx)(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(6),\n points: \"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n })\n ]\n })\n ]\n });\n});\n//# sourceMappingURL=LogoWords.js.map\n"],"mappings":"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"}
package/dist/esm/LogoWords.mjs CHANGED
@@ -4,13 +4,13 @@ import { useTint } from "./useTint.mjs";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
 
6
6
  const defaultColors = [
7
- "var(--color12)",
8
- "var(--color12)",
9
- "var(--color12)",
10
- "var(--color12)",
11
- "var(--red9)",
12
- "var(--green9)",
13
- "var(--blue9)"
7
+ "var(--color-12)",
8
+ "var(--color-12)",
9
+ "var(--color-12)",
10
+ "var(--color-12)",
11
+ "var(--red-9)",
12
+ "var(--green-9)",
13
+ "var(--blue-9)"
14
14
  ];
15
15
  const LogoWords = React.memo(({ downscale = 1, animated, ...props }) => {
16
16
  const Tint = useTint();
@@ -41,7 +41,7 @@ const LogoWords = React.memo(({ downscale = 1, animated, ...props }) => {
41
41
  };
42
42
  }, [Tint]);
43
43
  const getColor = (i) => {
44
- if (hovered) return `var(--${Tint.tints[i]}9)`;
44
+ if (hovered) return `var(--${Tint.tints[i]}-9)`;
45
45
  return defaultColors[i];
46
46
  };
47
47
  const x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));
@@ -72,7 +72,7 @@ const LogoWords = React.memo(({ downscale = 1, animated, ...props }) => {
72
72
  left: 0,
73
73
  y: mounted === "start" ? -30 : -4,
74
74
  x,
75
- backgroundColor: "color12",
75
+ backgroundColor: "color-12",
76
76
  style: {
77
77
  width: 4,
78
78
  height: 4
package/dist/esm/LogoWords.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LogoWords.js","names":[],"sources":["esm/LogoWords.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Circle, XStack } from \"tamagui\";\nimport { useTint } from \"./useTint\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst defaultColors = [\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--red9)\",\n \"var(--green9)\",\n \"var(--blue9)\"\n];\nconst LogoWords = React.memo(({ downscale = 1, animated, ...props }) => {\n const Tint = useTint();\n const [hovered, setHovered] = React.useState(false);\n const [mounted, setMounted] = React.useState(\"start\");\n const { tintIndex: index } = Tint;\n useEffect(() => {\n const idle = window.requestIdleCallback || setTimeout;\n idle(() => {\n setTimeout(() => {\n setMounted(\"animate\");\n }, 50);\n setTimeout(() => {\n setMounted(\"done\");\n }, 1500);\n });\n }, []);\n useEffect(() => {\n const handleKeyDown = (event) => {\n const index2 = Number.parseInt(event.key, 10) - 1;\n if (!Number.isNaN(index2) && index2 >= 0 && index2 < Tint.tints.length) {\n Tint.setTintIndex(index2);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [Tint]);\n const getColor = (i) => {\n if (hovered) return `var(--${Tint.tints[i]}9)`;\n return defaultColors[i];\n };\n const x = Math.round(\n index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0)\n );\n const [layout, setLayout] = useState();\n return /* @__PURE__ */ jsxs(\n XStack,\n {\n onMouseEnter: () => setHovered(true),\n onMouseLeave: () => setHovered(false),\n paddingVertical: \"2\",\n marginVertical: \"-2\",\n position: \"relative\",\n ...props,\n \"data-tauri-drag-region\": true,\n className: \"logo-words\",\n onLayout: (e) => {\n setLayout(e.nativeEvent.layout);\n },\n onMouseMove: (e) => {\n if (!layout) return;\n const x2 = e.clientX - layout.pageX;\n const sectionWidth = layout.width / 7;\n const section = Math.min(6, Math.floor(x2 / sectionWidth));\n Tint.setTintIndex(section);\n },\n children: [\n animated && /* @__PURE__ */ jsx(\n Circle,\n {\n transition: \"medium\",\n position: \"absolute\",\n top: 0,\n left: 0,\n y: mounted === \"start\" ? -30 : -4,\n x,\n backgroundColor: \"color12\",\n style: { width: 4, height: 4 }\n }\n ),\n /* @__PURE__ */ jsxs(\n \"svg\",\n {\n \"data-tauri-drag-region\": true,\n width: 373 * (1 / downscale) * 0.3333333,\n height: 41 * (1 / downscale) * 0.3333333,\n viewBox: \"0 0 373 41\",\n children: [\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(0),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"path\",\n {\n shapeRendering: \"crispEdges\",\n fill: getColor(1),\n 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\",\n fillRule: \"nonzero\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(2),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: getColor(3),\n 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\",\n fillRule: \"nonzero\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(4),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(5),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(6),\n points: \"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n }\n )\n ]\n }\n )\n ]\n }\n );\n});\nexport {\n LogoWords\n};\n//# sourceMappingURL=LogoWords.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"LogoWords.js","names":[],"sources":["esm/LogoWords.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Circle, XStack } from \"tamagui\";\nimport { useTint } from \"./useTint\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst defaultColors = [\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--red-9)\",\n \"var(--green-9)\",\n \"var(--blue-9)\"\n];\nconst LogoWords = React.memo(({ downscale = 1, animated, ...props }) => {\n const Tint = useTint();\n const [hovered, setHovered] = React.useState(false);\n const [mounted, setMounted] = React.useState(\"start\");\n const { tintIndex: index } = Tint;\n useEffect(() => {\n const idle = window.requestIdleCallback || setTimeout;\n idle(() => {\n setTimeout(() => {\n setMounted(\"animate\");\n }, 50);\n setTimeout(() => {\n setMounted(\"done\");\n }, 1500);\n });\n }, []);\n useEffect(() => {\n const handleKeyDown = (event) => {\n const index2 = Number.parseInt(event.key, 10) - 1;\n if (!Number.isNaN(index2) && index2 >= 0 && index2 < Tint.tints.length) {\n Tint.setTintIndex(index2);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [Tint]);\n const getColor = (i) => {\n if (hovered) return `var(--${Tint.tints[i]}-9)`;\n return defaultColors[i];\n };\n const x = Math.round(\n index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0)\n );\n const [layout, setLayout] = useState();\n return /* @__PURE__ */ jsxs(\n XStack,\n {\n onMouseEnter: () => setHovered(true),\n onMouseLeave: () => setHovered(false),\n paddingVertical: \"2\",\n marginVertical: \"-2\",\n position: \"relative\",\n ...props,\n \"data-tauri-drag-region\": true,\n className: \"logo-words\",\n onLayout: (e) => {\n setLayout(e.nativeEvent.layout);\n },\n onMouseMove: (e) => {\n if (!layout) return;\n const x2 = e.clientX - layout.pageX;\n const sectionWidth = layout.width / 7;\n const section = Math.min(6, Math.floor(x2 / sectionWidth));\n Tint.setTintIndex(section);\n },\n children: [\n animated && /* @__PURE__ */ jsx(\n Circle,\n {\n transition: \"medium\",\n position: \"absolute\",\n top: 0,\n left: 0,\n y: mounted === \"start\" ? -30 : -4,\n x,\n backgroundColor: \"color-12\",\n style: { width: 4, height: 4 }\n }\n ),\n /* @__PURE__ */ jsxs(\n \"svg\",\n {\n \"data-tauri-drag-region\": true,\n width: 373 * (1 / downscale) * 0.3333333,\n height: 41 * (1 / downscale) * 0.3333333,\n viewBox: \"0 0 373 41\",\n children: [\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(0),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"path\",\n {\n shapeRendering: \"crispEdges\",\n fill: getColor(1),\n 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\",\n fillRule: \"nonzero\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(2),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: getColor(3),\n 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\",\n fillRule: \"nonzero\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(4),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(5),\n 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\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"polygon\",\n {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(6),\n points: \"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n }\n )\n ]\n }\n )\n ]\n }\n );\n});\nexport {\n LogoWords\n};\n//# sourceMappingURL=LogoWords.js.map\n"],"mappings":"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"}
package/dist/esm/LogoWords.native.js CHANGED
@@ -4,13 +4,13 @@ import { Circle, XStack } from "tamagui";
4
4
  import { useTint } from "./useTint.native.js";
5
5
 
6
6
  var defaultColors = [
7
- "var(--color12)",
8
- "var(--color12)",
9
- "var(--color12)",
10
- "var(--color12)",
11
- "var(--red9)",
12
- "var(--green9)",
13
- "var(--blue9)"
7
+ "var(--color-12)",
8
+ "var(--color-12)",
9
+ "var(--color-12)",
10
+ "var(--color-12)",
11
+ "var(--red-9)",
12
+ "var(--green-9)",
13
+ "var(--blue-9)"
14
14
  ];
15
15
  var LogoWords = /* @__PURE__ */ React.memo(function(param) {
16
16
  var { downscale = 1, animated, ...props } = param;
@@ -42,7 +42,7 @@ var LogoWords = /* @__PURE__ */ React.memo(function(param) {
42
42
  };
43
43
  }, [Tint]);
44
44
  var getColor = function(i) {
45
- if (hovered) return `var(--${Tint.tints[i]}9)`;
45
+ if (hovered) return `var(--${Tint.tints[i]}-9)`;
46
46
  return defaultColors[i];
47
47
  };
48
48
  var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));
@@ -77,7 +77,7 @@ var LogoWords = /* @__PURE__ */ React.memo(function(param) {
77
77
  left: 0,
78
78
  y: mounted === "start" ? -30 : -4,
79
79
  x,
80
- backgroundColor: "color12",
80
+ backgroundColor: "color-12",
81
81
  style: {
82
82
  width: 4,
83
83
  height: 4
package/dist/esm/LogoWords.native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LogoWords.native.js","names":[],"sources":["esm/LogoWords.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useEffect, useState } from \"react\";\nimport { Circle, XStack } from \"tamagui\";\nimport { useTint } from \"./useTint\";\nvar defaultColors = [\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--color12)\",\n \"var(--red9)\",\n \"var(--green9)\",\n \"var(--blue9)\"\n];\nvar LogoWords = /* @__PURE__ */ React.memo(function(param) {\n var { downscale = 1, animated, ...props } = param;\n var Tint = useTint();\n var [hovered, setHovered] = React.useState(false);\n var [mounted, setMounted] = React.useState(\"start\");\n var { tintIndex: index } = Tint;\n useEffect(function() {\n var idle = window.requestIdleCallback || setTimeout;\n idle(function() {\n setTimeout(function() {\n setMounted(\"animate\");\n }, 50);\n setTimeout(function() {\n setMounted(\"done\");\n }, 1500);\n });\n }, []);\n useEffect(function() {\n var handleKeyDown = function(event) {\n var index2 = Number.parseInt(event.key, 10) - 1;\n if (!Number.isNaN(index2) && index2 >= 0 && index2 < Tint.tints.length) {\n Tint.setTintIndex(index2);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return function() {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n Tint\n ]);\n var getColor = function(i) {\n if (hovered) return `var(--${Tint.tints[i]}9)`;\n return defaultColors[i];\n };\n var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));\n var [layout, setLayout] = useState();\n return /* @__PURE__ */ _jsxs(XStack, {\n onMouseEnter: function() {\n return setHovered(true);\n },\n onMouseLeave: function() {\n return setHovered(false);\n },\n paddingVertical: \"2\",\n marginVertical: \"-2\",\n position: \"relative\",\n ...props,\n \"data-tauri-drag-region\": true,\n className: \"logo-words\",\n onLayout: function(e) {\n setLayout(e.nativeEvent.layout);\n },\n onMouseMove: function(e) {\n if (!layout) return;\n var x2 = e.clientX - layout.pageX;\n var sectionWidth = layout.width / 7;\n var section = Math.min(6, Math.floor(x2 / sectionWidth));\n Tint.setTintIndex(section);\n },\n children: [\n animated && /* @__PURE__ */ _jsx(Circle, {\n transition: \"medium\",\n position: \"absolute\",\n top: 0,\n left: 0,\n y: mounted === \"start\" ? -30 : -4,\n x,\n backgroundColor: \"color12\",\n style: {\n width: 4,\n height: 4\n }\n }),\n /* @__PURE__ */ _jsxs(\"svg\", {\n \"data-tauri-drag-region\": true,\n width: 373 * (1 / downscale) * 0.3333333,\n height: 41 * (1 / downscale) * 0.3333333,\n viewBox: \"0 0 373 41\",\n children: [\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(0),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(0)}\n /* @__PURE__ */ _jsx(\"path\", {\n shapeRendering: \"crispEdges\",\n fill: getColor(1),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(1)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(2),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(2)}\n /* @__PURE__ */ _jsx(\"path\", {\n fill: getColor(3),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(3)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(4),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(4)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(5),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(5)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(6),\n points: \"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n })\n ]\n })\n ]\n });\n});\nexport {\n LogoWords\n};\n//# sourceMappingURL=LogoWords.js.map\n"],"mappings":"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"}
1
+ {"version":3,"file":"LogoWords.native.js","names":[],"sources":["esm/LogoWords.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport React, { useEffect, useState } from \"react\";\nimport { Circle, XStack } from \"tamagui\";\nimport { useTint } from \"./useTint\";\nvar defaultColors = [\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--color-12)\",\n \"var(--red-9)\",\n \"var(--green-9)\",\n \"var(--blue-9)\"\n];\nvar LogoWords = /* @__PURE__ */ React.memo(function(param) {\n var { downscale = 1, animated, ...props } = param;\n var Tint = useTint();\n var [hovered, setHovered] = React.useState(false);\n var [mounted, setMounted] = React.useState(\"start\");\n var { tintIndex: index } = Tint;\n useEffect(function() {\n var idle = window.requestIdleCallback || setTimeout;\n idle(function() {\n setTimeout(function() {\n setMounted(\"animate\");\n }, 50);\n setTimeout(function() {\n setMounted(\"done\");\n }, 1500);\n });\n }, []);\n useEffect(function() {\n var handleKeyDown = function(event) {\n var index2 = Number.parseInt(event.key, 10) - 1;\n if (!Number.isNaN(index2) && index2 >= 0 && index2 < Tint.tints.length) {\n Tint.setTintIndex(index2);\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return function() {\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [\n Tint\n ]);\n var getColor = function(i) {\n if (hovered) return `var(--${Tint.tints[i]}-9)`;\n return defaultColors[i];\n };\n var x = Math.round(index * 18.5 + 18 / 2 * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0));\n var [layout, setLayout] = useState();\n return /* @__PURE__ */ _jsxs(XStack, {\n onMouseEnter: function() {\n return setHovered(true);\n },\n onMouseLeave: function() {\n return setHovered(false);\n },\n paddingVertical: \"2\",\n marginVertical: \"-2\",\n position: \"relative\",\n ...props,\n \"data-tauri-drag-region\": true,\n className: \"logo-words\",\n onLayout: function(e) {\n setLayout(e.nativeEvent.layout);\n },\n onMouseMove: function(e) {\n if (!layout) return;\n var x2 = e.clientX - layout.pageX;\n var sectionWidth = layout.width / 7;\n var section = Math.min(6, Math.floor(x2 / sectionWidth));\n Tint.setTintIndex(section);\n },\n children: [\n animated && /* @__PURE__ */ _jsx(Circle, {\n transition: \"medium\",\n position: \"absolute\",\n top: 0,\n left: 0,\n y: mounted === \"start\" ? -30 : -4,\n x,\n backgroundColor: \"color-12\",\n style: {\n width: 4,\n height: 4\n }\n }),\n /* @__PURE__ */ _jsxs(\"svg\", {\n \"data-tauri-drag-region\": true,\n width: 373 * (1 / downscale) * 0.3333333,\n height: 41 * (1 / downscale) * 0.3333333,\n viewBox: \"0 0 373 41\",\n children: [\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(0),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(0)}\n /* @__PURE__ */ _jsx(\"path\", {\n shapeRendering: \"crispEdges\",\n fill: getColor(1),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(1)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(2),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(2)}\n /* @__PURE__ */ _jsx(\"path\", {\n fill: getColor(3),\n 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\",\n fillRule: \"nonzero\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(3)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(4),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(4)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(5),\n 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\"\n }),\n // onMouseEnter={() => Tint.setTintIndex(5)}\n /* @__PURE__ */ _jsx(\"polygon\", {\n \"data-tauri-drag-region\": true,\n shapeRendering: \"crispEdges\",\n fill: getColor(6),\n points: \"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n })\n ]\n })\n ]\n });\n});\nexport {\n LogoWords\n};\n//# sourceMappingURL=LogoWords.js.map\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/logo",
3
- "version": "3.0.0-beta.1161.1",
3
+ "version": "3.0.0-beta.1173.1",
4
4
  "license": "MIT",
5
5
  "source": "src/index.tsx",
6
6
  "files": [
@@ -45,12 +45,12 @@
45
45
  "clean:build": "tamagui-build clean:build"
46
46
  },
47
47
  "dependencies": {
48
- "@tamagui/use-element-layout": "3.0.0-beta.1161.1",
49
- "@tamagui/web": "3.0.0-beta.1161.1",
50
- "tamagui": "3.0.0-beta.1161.1"
48
+ "@tamagui/use-element-layout": "3.0.0-beta.1173.1",
49
+ "@tamagui/web": "3.0.0-beta.1173.1",
50
+ "tamagui": "3.0.0-beta.1173.1"
51
51
  },
52
52
  "devDependencies": {
53
- "@tamagui/build": "3.0.0-beta.1161.1",
53
+ "@tamagui/build": "3.0.0-beta.1173.1",
54
54
  "react": "19.2.3"
55
55
  },
56
56
  "peerDependencies": {
package/src/LogoWords.tsx CHANGED
@@ -6,25 +6,25 @@ import { useTint } from './useTint'
6
6
 
7
7
  // T A M A G U I
8
8
  // default: white white white white red green blue
9
- // hover: yellow yellow yellow color12 red green blue
9
+ // hover: yellow yellow yellow color-12 red green blue
10
10
  const defaultColors = [
11
- 'var(--color12)',
12
- 'var(--color12)',
13
- 'var(--color12)',
14
- 'var(--color12)',
15
- 'var(--red9)',
16
- 'var(--green9)',
17
- 'var(--blue9)',
11
+ 'var(--color-12)',
12
+ 'var(--color-12)',
13
+ 'var(--color-12)',
14
+ 'var(--color-12)',
15
+ 'var(--red-9)',
16
+ 'var(--green-9)',
17
+ 'var(--blue-9)',
18
18
  ]
19
19
 
20
20
  const hoveredColors = [
21
- 'var(--yellow9)',
22
- 'var(--yellow9)',
23
- 'var(--yellow9)',
24
- 'var(--color12)',
25
- 'var(--red9)',
26
- 'var(--green9)',
27
- 'var(--blue9)',
21
+ 'var(--yellow-9)',
22
+ 'var(--yellow-9)',
23
+ 'var(--yellow-9)',
24
+ 'var(--color-12)',
25
+ 'var(--red-9)',
26
+ 'var(--green-9)',
27
+ 'var(--blue-9)',
28
28
  ]
29
29
 
30
30
  export const LogoWords: React.MemoExoticComponent<
@@ -72,7 +72,7 @@ export const LogoWords: React.MemoExoticComponent<
72
72
  }, [Tint])
73
73
 
74
74
  const getColor = (i: number) => {
75
- if (hovered) return `var(--${Tint.tints[i]}9)`
75
+ if (hovered) return `var(--${Tint.tints[i]}-9)`
76
76
  return defaultColors[i]
77
77
  }
78
78
 
@@ -113,7 +113,7 @@ export const LogoWords: React.MemoExoticComponent<
113
113
  left={0}
114
114
  y={mounted === 'start' ? -30 : -4}
115
115
  x={x}
116
- backgroundColor="color12"
116
+ backgroundColor="color-12"
117
117
  style={{ width: 4, height: 4 }}
118
118
  />
119
119
  )}
package/types/LogoWords.d.ts.map CHANGED
@@ -6,6 +6,6 @@
6
6
  ],
7
7
  "version": 3,
8
8
  "sourcesContent": [
9
- "import type { LayoutValue } from '@tamagui/use-element-layout'\nimport React, { useEffect, useState } from 'react'\nimport type { XStackProps } from 'tamagui'\nimport { Circle, XStack } from 'tamagui'\nimport { useTint } from './useTint'\n\n// T A M A G U I\n// default: white white white white red green blue\n// hover: yellow yellow yellow color12 red green blue\nconst defaultColors = [\n 'var(--color12)',\n 'var(--color12)',\n 'var(--color12)',\n 'var(--color12)',\n 'var(--red9)',\n 'var(--green9)',\n 'var(--blue9)',\n]\n\nconst hoveredColors = [\n 'var(--yellow9)',\n 'var(--yellow9)',\n 'var(--yellow9)',\n 'var(--color12)',\n 'var(--red9)',\n 'var(--green9)',\n 'var(--blue9)',\n]\n\nexport const LogoWords: React.MemoExoticComponent<\n ({\n downscale,\n animated,\n ...props\n }: XStackProps & {\n downscale?: number\n animated?: boolean\n }) => import('react/jsx-runtime').JSX.Element\n> = React.memo(({ downscale = 1, animated, ...props }) => {\n const Tint = useTint()\n const [hovered, setHovered] = React.useState(false)\n const [mounted, setMounted] = React.useState<'start' | 'animate' | 'done'>('start')\n\n const { tintIndex: index } = Tint\n\n useEffect(() => {\n const idle = window.requestIdleCallback || setTimeout\n idle(() => {\n setTimeout(() => {\n setMounted('animate')\n }, 50)\n\n setTimeout(() => {\n setMounted('done')\n }, 1500)\n })\n }, [])\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const index = Number.parseInt(event.key, 10) - 1 // Convert key to index (0-based)\n if (!Number.isNaN(index) && index >= 0 && index < Tint.tints.length) {\n Tint.setTintIndex(index)\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [Tint])\n\n const getColor = (i: number) => {\n if (hovered) return `var(--${Tint.tints[i]}9)`\n return defaultColors[i]\n }\n\n const x = Math.round(\n index * 18.5 + (18 / 2) * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0)\n )\n\n const [layout, setLayout] = useState<LayoutValue>()\n\n return (\n <XStack\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n paddingVertical=\"2\"\n marginVertical=\"-2\"\n position=\"relative\"\n {...props}\n data-tauri-drag-region\n className=\"logo-words\"\n onLayout={(e) => {\n setLayout(e.nativeEvent.layout as any)\n }}\n onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {\n if (!layout) return\n const x = e.clientX - layout.pageX\n // Total width divided into 7 sections (one for each letter)\n const sectionWidth = layout.width / 7\n // Calculate which section we're in (0-6)\n const section = Math.min(6, Math.floor(x / sectionWidth))\n Tint.setTintIndex(section)\n }}\n >\n {animated && (\n <Circle\n transition=\"medium\"\n position=\"absolute\"\n top={0}\n left={0}\n y={mounted === 'start' ? -30 : -4}\n x={x}\n backgroundColor=\"color12\"\n style={{ width: 4, height: 4 }}\n />\n )}\n\n <svg\n data-tauri-drag-region\n width={373 * (1 / downscale) * 0.3333333}\n height={41 * (1 / downscale) * 0.3333333}\n viewBox=\"0 0 373 41\"\n >\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(0)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(0)}\n />\n\n <path\n shapeRendering=\"crispEdges\"\n fill={getColor(1)}\n 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\"\n fillRule=\"nonzero\"\n // onMouseEnter={() => Tint.setTintIndex(1)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(2)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(2)}\n />\n\n <path\n fill={getColor(3)}\n 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\"\n fillRule=\"nonzero\"\n // onMouseEnter={() => Tint.setTintIndex(3)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(4)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(4)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(5)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(5)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(6)}\n points=\"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n // onMouseEnter={() => Tint.setTintIndex(6)}\n />\n </svg>\n </XStack>\n )\n})\n"
9
+ "import type { LayoutValue } from '@tamagui/use-element-layout'\nimport React, { useEffect, useState } from 'react'\nimport type { XStackProps } from 'tamagui'\nimport { Circle, XStack } from 'tamagui'\nimport { useTint } from './useTint'\n\n// T A M A G U I\n// default: white white white white red green blue\n// hover: yellow yellow yellow color-12 red green blue\nconst defaultColors = [\n 'var(--color-12)',\n 'var(--color-12)',\n 'var(--color-12)',\n 'var(--color-12)',\n 'var(--red-9)',\n 'var(--green-9)',\n 'var(--blue-9)',\n]\n\nconst hoveredColors = [\n 'var(--yellow-9)',\n 'var(--yellow-9)',\n 'var(--yellow-9)',\n 'var(--color-12)',\n 'var(--red-9)',\n 'var(--green-9)',\n 'var(--blue-9)',\n]\n\nexport const LogoWords: React.MemoExoticComponent<\n ({\n downscale,\n animated,\n ...props\n }: XStackProps & {\n downscale?: number\n animated?: boolean\n }) => import('react/jsx-runtime').JSX.Element\n> = React.memo(({ downscale = 1, animated, ...props }) => {\n const Tint = useTint()\n const [hovered, setHovered] = React.useState(false)\n const [mounted, setMounted] = React.useState<'start' | 'animate' | 'done'>('start')\n\n const { tintIndex: index } = Tint\n\n useEffect(() => {\n const idle = window.requestIdleCallback || setTimeout\n idle(() => {\n setTimeout(() => {\n setMounted('animate')\n }, 50)\n\n setTimeout(() => {\n setMounted('done')\n }, 1500)\n })\n }, [])\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const index = Number.parseInt(event.key, 10) - 1 // Convert key to index (0-based)\n if (!Number.isNaN(index) && index >= 0 && index < Tint.tints.length) {\n Tint.setTintIndex(index)\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [Tint])\n\n const getColor = (i: number) => {\n if (hovered) return `var(--${Tint.tints[i]}-9)`\n return defaultColors[i]\n }\n\n const x = Math.round(\n index * 18.5 + (18 / 2) * (index / defaultColors.length) + 3 + (index === 6 ? -3 : 0)\n )\n\n const [layout, setLayout] = useState<LayoutValue>()\n\n return (\n <XStack\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n paddingVertical=\"2\"\n marginVertical=\"-2\"\n position=\"relative\"\n {...props}\n data-tauri-drag-region\n className=\"logo-words\"\n onLayout={(e) => {\n setLayout(e.nativeEvent.layout as any)\n }}\n onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {\n if (!layout) return\n const x = e.clientX - layout.pageX\n // Total width divided into 7 sections (one for each letter)\n const sectionWidth = layout.width / 7\n // Calculate which section we're in (0-6)\n const section = Math.min(6, Math.floor(x / sectionWidth))\n Tint.setTintIndex(section)\n }}\n >\n {animated && (\n <Circle\n transition=\"medium\"\n position=\"absolute\"\n top={0}\n left={0}\n y={mounted === 'start' ? -30 : -4}\n x={x}\n backgroundColor=\"color-12\"\n style={{ width: 4, height: 4 }}\n />\n )}\n\n <svg\n data-tauri-drag-region\n width={373 * (1 / downscale) * 0.3333333}\n height={41 * (1 / downscale) * 0.3333333}\n viewBox=\"0 0 373 41\"\n >\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(0)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(0)}\n />\n\n <path\n shapeRendering=\"crispEdges\"\n fill={getColor(1)}\n 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\"\n fillRule=\"nonzero\"\n // onMouseEnter={() => Tint.setTintIndex(1)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(2)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(2)}\n />\n\n <path\n fill={getColor(3)}\n 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\"\n fillRule=\"nonzero\"\n // onMouseEnter={() => Tint.setTintIndex(3)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(4)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(4)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(5)}\n 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\"\n // onMouseEnter={() => Tint.setTintIndex(5)}\n />\n\n <polygon\n data-tauri-drag-region\n shapeRendering=\"crispEdges\"\n fill={getColor(6)}\n points=\"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n // onMouseEnter={() => Tint.setTintIndex(6)}\n />\n </svg>\n </XStack>\n )\n})\n"
10
10
  ]
11
11
  }