@tamagui/logo 1.0.1-rc.8 → 1.0.1

package/dist/cjs/TamaguiLogo.js

@@ -20,34 +20,15 @@ var TamaguiLogo_exports = {};
 __export(TamaguiLogo_exports, {
   LogoIcon: () => LogoIcon,
   LogoWords: () => LogoWords,
-  TamaguiLogo: () => TamaguiLogo,
-  logoColors: () => logoColors,
-  tints: () => tints
+  TamaguiLogo: () => TamaguiLogo
 });
 module.exports = __toCommonJS(TamaguiLogo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
-const tints = [
-  "orange",
-  "yellow",
-  "green",
-  "blue",
-  "purple",
-  "pink",
-  "red"
-];
-const logoColors = tints.map((t) => `var(--${t}9)`);
+var import_useTint = require("./useTint");
 const TamaguiLogo = (0, import_react.forwardRef)(
-  ({
-    showWords,
-    color,
-    downscale,
-    onHoverLetter,
-    pathPrefix,
-    animated,
-    ...props
-  }, ref) => {
+  ({ showWords, downscale, animated, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       tag: "span",
       ref,
@@ -57,135 +38,120 @@ const TamaguiLogo = (0, import_react.forwardRef)(
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoIcon, {
-          pathPrefix,
-          downscale: (downscale ?? 1) * (showWords ? 2 : 1.5),
-          color
+          downscale: (downscale ?? 1) * (showWords ? 2 : 1.5)
         }),
         showWords && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
           tag: "span",
           marginBottom: -4,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoWords, {
             animated,
-            onHoverLetter,
-            downscale: downscale ?? 2,
-            color
+            downscale: downscale ?? 2
           })
         })
       ]
     });
   }
 );
-const LogoWords = ({
-  color,
-  downscale = 1,
-  onHoverLetter,
-  animated
-}) => {
-  const [index, setIndex] = (0, import_react.useState)(3);
-  const [hovered, setHovered] = (0, import_react.useState)(false);
-  const [mounted, setMounted] = (0, import_react.useState)("start");
-  const updateHoveredLetter = (index2) => {
-    setIndex(index2);
-    setTimeout(() => {
-      onHoverLetter == null ? void 0 : onHoverLetter(index2);
-    });
-  };
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => {
-      setMounted("animate");
-    });
-    setTimeout(() => {
-      setMounted("done");
-    }, 1500);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    var _a;
-    return (_a = globalThis["onChangeTint"]) == null ? void 0 : _a.call(globalThis, (index2) => {
-      setIndex(index2);
+const LogoWords = (0, import_react.memo)(
+  ({ downscale = 1, animated }) => {
+    const Tint = (0, import_useTint.useTint)();
+    const { tintIndex: index, tint } = Tint;
+    const tints = Tint.tints.map((t) => `var(--${t}9)`);
+    const [hovered, setHovered] = (0, import_react.useState)(false);
+    const [mounted, setMounted] = (0, import_react.useState)("start");
+    (0, import_react.useEffect)(() => {
+      setTimeout(() => {
+        setMounted("animate");
+      });
+      setTimeout(() => {
+        setMounted("done");
+      }, 1500);
+    }, []);
+    const getColor = (i) => {
+      const isActive = mounted !== "start" && i === index;
+      if (mounted !== "done" || hovered) {
+        return isActive ? "var(--color)" : tints[index];
+      }
+      if (hovered && isActive) {
+        return "var(--color)";
+      }
+      return tints[i];
+    };
+    const x = Math.round(
+      index * 18.5 + 18 / 2 * (index / tints.length) + 3 + (index === 6 ? -3 : 0)
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      onHoverIn: () => setHovered(true),
+      onHoverOut: () => setHovered(false),
+      paddingVertical: "$2",
+      marginVertical: "$-2",
+      position: "relative",
+      children: [
+        animated && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
+          animation: "quick",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          y: mounted === "start" ? -30 : -3,
+          x,
+          size: 4,
+          backgroundColor: tint
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+          width: 373 * (1 / downscale) * 0.333333334,
+          height: 41 * (1 / downscale) * 0.333333334,
+          viewBox: "0 0 373 41",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
+              shapeRendering: "crispEdges",
+              fill: getColor(0),
+              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",
+              onMouseEnter: () => Tint.setTintIndex(0)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+              shapeRendering: "crispEdges",
+              fill: getColor(1),
+              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",
+              fillRule: "nonzero",
+              onMouseEnter: () => Tint.setTintIndex(1)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
+              shapeRendering: "crispEdges",
+              fill: getColor(2),
+              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",
+              onMouseEnter: () => Tint.setTintIndex(2)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+              fill: getColor(3),
+              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",
+              fillRule: "nonzero",
+              onMouseEnter: () => Tint.setTintIndex(3)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
+              shapeRendering: "crispEdges",
+              fill: getColor(4),
+              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",
+              onMouseEnter: () => Tint.setTintIndex(4)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
+              shapeRendering: "crispEdges",
+              fill: getColor(5),
+              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",
+              onMouseEnter: () => Tint.setTintIndex(5)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
+              shapeRendering: "crispEdges",
+              fill: getColor(6),
+              points: "372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903",
+              onMouseEnter: () => Tint.setTintIndex(6)
+            })
+          ]
+        })
+      ]
     });
-  }, []);
-  const getColor = (i) => {
-    const isActive = mounted !== "start" && i === index;
-    if (mounted !== "done" || hovered) {
-      return isActive ? "var(--color)" : logoColors[index];
-    }
-    if (hovered && isActive) {
-      return "var(--color)";
-    }
-    return logoColors[i];
-  };
-  const x = index * 18.5 + 18 / 2 * (index / logoColors.length) + 3 + (index === 6 ? -3 : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    onHoverIn: () => setHovered(true),
-    onHoverOut: () => setHovered(false),
-    paddingVertical: "$2",
-    marginVertical: "$-2",
-    position: "relative",
-    children: [
-      animated && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, {
-        animation: "quick",
-        position: "absolute",
-        top: 0,
-        left: 0,
-        y: mounted === "start" ? -30 : -3,
-        x,
-        size: 4,
-        backgroundColor: logoColors[index]
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-        width: 373 * (1 / downscale) * 0.333333334,
-        height: 41 * (1 / downscale) * 0.333333334,
-        viewBox: "0 0 373 41",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
-            shapeRendering: "crispEdges",
-            fill: color || getColor(0),
-            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",
-            onMouseEnter: () => updateHoveredLetter(0)
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-            shapeRendering: "crispEdges",
-            fill: color || getColor(1),
-            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",
-            fillRule: "nonzero",
-            onMouseEnter: () => updateHoveredLetter(1)
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
-            shapeRendering: "crispEdges",
-            fill: color || getColor(2),
-            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",
-            onMouseEnter: () => updateHoveredLetter(2)
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-            fill: color || getColor(3),
-            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",
-            fillRule: "nonzero",
-            onMouseEnter: () => updateHoveredLetter(3)
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
-            shapeRendering: "crispEdges",
-            fill: color || getColor(4),
-            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",
-            onMouseEnter: () => updateHoveredLetter(4)
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
-            shapeRendering: "crispEdges",
-            fill: color || getColor(5),
-            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",
-            onMouseEnter: () => updateHoveredLetter(5)
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", {
-            shapeRendering: "crispEdges",
-            fill: color || getColor(6),
-            points: "372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903",
-            onMouseEnter: () => updateHoveredLetter(6)
-          })
-        ]
-      })
-    ]
-  });
-};
-const LogoIcon = ({ downscale = 2, pathPrefix }) => {
+  }
+);
+const LogoIcon = ({ downscale = 2 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     tag: "span",
     className: "unselectable",
@@ -198,7 +164,7 @@ const LogoIcon = ({ downscale = 2, pathPrefix }) => {
       className: "tamagui-icon",
       width: 450 / 8 / downscale,
       height: 420 / 8 / downscale,
-      src: `${pathPrefix || ""}/tamagui-icon.svg`
+      src: `/tamagui-icon.svg`
     })
   });
 };
@@ -206,8 +172,6 @@ const LogoIcon = ({ downscale = 2, pathPrefix }) => {
 0 && (module.exports = {
   LogoIcon,
   LogoWords,
-  TamaguiLogo,
-  logoColors,
-  tints
+  TamaguiLogo
 });
 //# sourceMappingURL=TamaguiLogo.js.map

package/dist/cjs/TamaguiLogo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/TamaguiLogo.tsx"],
-  "sourcesContent": ["import { forwardRef, useEffect, useState } from 'react'\nimport { Circle, ThemeName, XStack, XStackProps, YStack } from 'tamagui'\n\nexport const tints: ThemeName[] = [\n  'orange',\n  'yellow',\n  'green',\n  'blue',\n  'purple',\n  'pink',\n  'red',\n]\n\nexport const logoColors = tints.map((t) => `var(--${t}9)`)\n\ntype LogoProps = {\n  onHoverLetter?: (i: number) => void\n  showWords?: boolean\n  color?: string\n  downscale?: number\n  pathPrefix?: string\n  animated?: boolean\n} & XStackProps\n\nexport const TamaguiLogo = forwardRef<any, LogoProps>(\n  (\n    {\n      showWords,\n      color,\n      downscale,\n      onHoverLetter,\n      pathPrefix,\n      animated,\n      ...props\n    }: LogoProps,\n    ref,\n  ) => {\n    return (\n      <XStack\n        tag=\"span\"\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        space=\"$5\"\n        {...props}\n      >\n        <LogoIcon\n          pathPrefix={pathPrefix}\n          downscale={(downscale ?? 1) * (showWords ? 2 : 1.5)}\n          color={color}\n        />\n        {showWords && (\n          <YStack tag=\"span\" marginBottom={-4}>\n            <LogoWords\n              animated={animated}\n              onHoverLetter={onHoverLetter}\n              downscale={downscale ?? 2}\n              color={color}\n            />\n          </YStack>\n        )}\n      </XStack>\n    )\n  },\n)\n\nexport const LogoWords = ({\n  color,\n  downscale = 1,\n  onHoverLetter,\n  animated,\n}: {\n  color?: string\n  downscale?: number\n  onHoverLetter?: any\n  animated?: boolean\n}) => {\n  const [index, setIndex] = useState(3)\n  const [hovered, setHovered] = useState(false)\n  const [mounted, setMounted] = useState<'start' | 'animate' | 'done'>('start')\n\n  const updateHoveredLetter = (index: number) => {\n    setIndex(index)\n    setTimeout(() => {\n      onHoverLetter?.(index)\n    })\n  }\n\n  useEffect(() => {\n    setTimeout(() => {\n      setMounted('animate')\n    })\n\n    setTimeout(() => {\n      setMounted('done')\n    }, 1500)\n  }, [])\n\n  useEffect(() => {\n    // temp hack\n    return globalThis['onChangeTint']?.((index) => {\n      setIndex(index)\n    })\n  }, [])\n\n  const getColor = (i: number) => {\n    const isActive = mounted !== 'start' && i === index\n    if (mounted !== 'done' || hovered) {\n      return isActive ? 'var(--color)' : logoColors[index]\n    }\n    if (hovered && isActive) {\n      return 'var(--color)'\n    }\n    return logoColors[i]\n  }\n\n  const x =\n    index * 18.5 +\n    (18 / 2) * (index / logoColors.length) +\n    3 +\n    (index === 6 ? -3 : 0)\n\n  return (\n    <XStack\n      onHoverIn={() => setHovered(true)}\n      onHoverOut={() => setHovered(false)}\n      paddingVertical=\"$2\"\n      marginVertical=\"$-2\"\n      position=\"relative\"\n    >\n      {animated && (\n        <Circle\n          animation=\"quick\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          y={mounted === 'start' ? -30 : -3}\n          // the last i is less wide\n          x={x}\n          size={4}\n          backgroundColor={logoColors[index]}\n        />\n      )}\n      <svg\n        width={373 * (1 / downscale) * 0.333333334}\n        height={41 * (1 / downscale) * 0.333333334}\n        viewBox=\"0 0 373 41\"\n      >\n        <polygon\n          shapeRendering=\"crispEdges\"\n          fill={color || 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={() => updateHoveredLetter(0)}\n        />\n        <path\n          shapeRendering=\"crispEdges\"\n          fill={color || 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={() => updateHoveredLetter(1)}\n        />\n        <polygon\n          shapeRendering=\"crispEdges\"\n          fill={color || 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={() => updateHoveredLetter(2)}\n        />\n        <path\n          fill={color || 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={() => updateHoveredLetter(3)}\n        />\n        <polygon\n          shapeRendering=\"crispEdges\"\n          fill={color || 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={() => updateHoveredLetter(4)}\n        />\n        <polygon\n          shapeRendering=\"crispEdges\"\n          fill={color || 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={() => updateHoveredLetter(5)}\n        />\n        <polygon\n          shapeRendering=\"crispEdges\"\n          fill={color || getColor(6)}\n          points=\"372.677419 40.1612903 372.677419 0.806451613 356.935484 0.806451613 356.935484 40.1612903\"\n          onMouseEnter={() => updateHoveredLetter(6)}\n        />\n      </svg>\n    </XStack>\n  )\n}\n\nexport const LogoIcon = ({ downscale = 2, pathPrefix }: any) => {\n  return (\n    <YStack\n      tag=\"span\"\n      className=\"unselectable\"\n      alignSelf=\"center\"\n      marginVertical={-10}\n      pressStyle={{\n        opacity: 0.7,\n      }}\n    >\n      <img\n        className=\"tamagui-icon\"\n        width={450 / 8 / downscale}\n        height={420 / 8 / downscale}\n        src={`${pathPrefix || ''}/tamagui-icon.svg`}\n      />\n    </YStack>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["index"]
+  "sourcesContent": ["import { forwardRef, memo, useEffect, useState } from 'react'\nimport { Circle, XStack, XStackProps, YStack } from 'tamagui'\n\nimport { useTint } from './useTint'\n\ntype LogoProps = {\n  showWords?: boolean\n  downscale?: number\n  animated?: boolean\n} & XStackProps\n\nexport const TamaguiLogo = forwardRef<any, LogoProps>(\n  ({ showWords, downscale, animated, ...props }: LogoProps, ref) => {\n    return (\n      <XStack\n        tag=\"span\"\n        ref={ref}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        space=\"$5\"\n        {...props}\n      >\n        <LogoIcon downscale={(downscale ?? 1) * (showWords ? 2 : 1.5)} />\n        {showWords && (\n          <YStack tag=\"span\" marginBottom={-4}>\n            <LogoWords animated={animated} downscale={downscale ?? 2} />\n          </YStack>\n        )}\n      </XStack>\n    )\n  }\n)\n\nexport const LogoWords = memo(\n  ({ downscale = 1, animated }: { downscale?: number; animated?: boolean }) => {\n    const Tint = useTint()\n    const { tintIndex: index, tint } = Tint\n    const tints = Tint.tints.map((t) => `var(--${t}9)`)\n    const [hovered, setHovered] = useState(false)\n    const [mounted, setMounted] = useState<'start' | 'animate' | 'done'>('start')\n\n    useEffect(() => {\n      setTimeout(() => {\n        setMounted('animate')\n      })\n\n      setTimeout(() => {\n        setMounted('done')\n      }, 1500)\n    }, [])\n\n    const getColor = (i: number) => {\n      const isActive = mounted !== 'start' && i === index\n      if (mounted !== 'done' || hovered) {\n        return isActive ? 'var(--color)' : tints[index]\n      }\n      if (hovered && isActive) {\n        return 'var(--color)'\n      }\n      return tints[i]\n    }\n\n    const x = Math.round(\n      index * 18.5 + (18 / 2) * (index / tints.length) + 3 + (index === 6 ? -3 : 0)\n    )\n\n    return (\n      <XStack\n        onHoverIn={() => setHovered(true)}\n        onHoverOut={() => setHovered(false)}\n        paddingVertical=\"$2\"\n        marginVertical=\"$-2\"\n        position=\"relative\"\n      >\n        {animated && (\n          <Circle\n            animation=\"quick\"\n            position=\"absolute\"\n            top={0}\n            left={0}\n            y={mounted === 'start' ? -30 : -3}\n            // the last i is less wide\n            x={x}\n            size={4}\n            backgroundColor={tint}\n          />\n        )}\n        <svg\n          width={373 * (1 / downscale) * 0.333333334}\n          height={41 * (1 / downscale) * 0.333333334}\n          viewBox=\"0 0 373 41\"\n        >\n          <polygon\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          <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          <polygon\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          <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          <polygon\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          <polygon\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          <polygon\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)\n\nexport const LogoIcon = ({ downscale = 2 }: any) => {\n  return (\n    <YStack\n      tag=\"span\"\n      className=\"unselectable\"\n      alignSelf=\"center\"\n      marginVertical={-10}\n      pressStyle={{\n        opacity: 0.7,\n      }}\n    >\n      <img\n        className=\"tamagui-icon\"\n        width={450 / 8 / downscale}\n        height={420 / 8 / downscale}\n        src={`/tamagui-icon.svg`}\n      />\n    </YStack>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/dist/cjs/index.js

@@ -16,4 +16,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./TamaguiLogo"), module.exports);
+__reExport(src_exports, require("./tints"), module.exports);
+__reExport(src_exports, require("./useTint"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from './TamaguiLogo'\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;",
+  "sourcesContent": ["export * from './TamaguiLogo'\nexport * from './tints'\nexport * from './useTint'\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;AACA,wBAAc,oBADd;AAEA,wBAAc,sBAFd;",
   "names": []
 }

package/dist/cjs/tints.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tints_exports = {};
+__export(tints_exports, {
+  getTints: () => getTints,
+  onTintFamilyChange: () => onTintFamilyChange,
+  setNextTintFamily: () => setNextTintFamily,
+  setTintFamily: () => setTintFamily,
+  useTints: () => useTints
+});
+module.exports = __toCommonJS(tints_exports);
+var import_react = require("react");
+const families = Object.freeze({
+  tamagui: ["orange", "yellow", "green", "blue", "purple", "pink", "red"],
+  xmas: ["red", "green", "red", "green", "red", "green", "red"]
+});
+let fam = "tamagui";
+function getTints() {
+  return {
+    name: fam || "tamagui",
+    tints: families[fam] || families.tamagui,
+    families
+  };
+}
+function useTints() {
+  const [val, setVal] = (0, import_react.useState)(getTints());
+  (0, import_react.useEffect)(() => {
+    return onTintFamilyChange(() => {
+      setVal(getTints());
+    });
+  }, []);
+  return val;
+}
+const setTintFamily = (next) => {
+  if (!families[next])
+    throw `impossible`;
+  fam = next;
+  listeners.forEach((l) => l(next));
+};
+const setNextTintFamily = () => {
+  setTintFamily(fam === "tamagui" ? "xmas" : "tamagui");
+};
+const listeners = /* @__PURE__ */ new Set();
+const onTintFamilyChange = (cb) => {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getTints,
+  onTintFamilyChange,
+  setNextTintFamily,
+  setTintFamily,
+  useTints
+});
+//# sourceMappingURL=tints.js.map

package/dist/cjs/tints.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tints.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport { ThemeName } from 'tamagui'\n\nconst families = Object.freeze({\n  tamagui: ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'],\n  xmas: ['red', 'green', 'red', 'green', 'red', 'green', 'red'],\n}) as {\n  [key in 'tamagui' | 'xmas']: ThemeName[]\n}\n\ntype TintFamily = keyof typeof families\n\nlet fam: TintFamily = 'tamagui'\n\nexport function getTints() {\n  return {\n    name: fam || 'tamagui',\n    tints: families[fam] || families.tamagui,\n    families,\n  }\n}\n\nexport function useTints() {\n  const [val, setVal] = useState(getTints())\n\n  useEffect(() => {\n    return onTintFamilyChange(() => {\n      setVal(getTints())\n    })\n  }, [])\n\n  return val\n}\n\nexport const setTintFamily = (next: TintFamily) => {\n  if (!families[next]) throw `impossible`\n  fam = next\n  listeners.forEach((l) => l(next))\n}\n\nexport const setNextTintFamily = () => {\n  setTintFamily(fam === 'tamagui' ? 'xmas' : 'tamagui')\n}\n\ntype ChangeHandler = (next: TintFamily) => void\n\nconst listeners = new Set<ChangeHandler>()\n\nexport const onTintFamilyChange = (cb: ChangeHandler) => {\n  listeners.add(cb)\n  return () => {\n    listeners.delete(cb)\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC;AAGpC,MAAM,WAAW,OAAO,OAAO;AAAA,EAC7B,SAAS,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAAA,EACtE,MAAM,CAAC,OAAO,SAAS,OAAO,SAAS,OAAO,SAAS,KAAK;AAC9D,CAAC;AAMD,IAAI,MAAkB;AAEf,SAAS,WAAW;AACzB,SAAO;AAAA,IACL,MAAM,OAAO;AAAA,IACb,OAAO,SAAS,QAAQ,SAAS;AAAA,IACjC;AAAA,EACF;AACF;AAEO,SAAS,WAAW;AACzB,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,SAAS,CAAC;AAEzC,8BAAU,MAAM;AACd,WAAO,mBAAmB,MAAM;AAC9B,aAAO,SAAS,CAAC;AAAA,IACnB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;AAEO,MAAM,gBAAgB,CAAC,SAAqB;AACjD,MAAI,CAAC,SAAS;AAAO,UAAM;AAC3B,QAAM;AACN,YAAU,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC;AAClC;AAEO,MAAM,oBAAoB,MAAM;AACrC,gBAAc,QAAQ,YAAY,SAAS,SAAS;AACtD;AAIA,MAAM,YAAY,oBAAI,IAAmB;AAElC,MAAM,qBAAqB,CAAC,OAAsB;AACvD,YAAU,IAAI,EAAE;AAChB,SAAO,MAAM;AACX,cAAU,OAAO,EAAE;AAAA,EACrB;AACF;",
+  "names": []
+}

package/dist/cjs/useTint.js

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTint_exports = {};
+__export(useTint_exports, {
+  ThemeTint: () => ThemeTint,
+  initialTint: () => initialTint,
+  onTintChange: () => onTintChange,
+  setTintIndex: () => setTintIndex,
+  useTint: () => useTint
+});
+module.exports = __toCommonJS(useTint_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_tints = require("./tints");
+const initialTint = 3;
+let current = initialTint;
+const listeners = /* @__PURE__ */ new Set();
+const onTintChange = (listener) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const numTints = (0, import_tints.getTints)().tints.length;
+const setTintIndex = (next) => {
+  const val = next % numTints;
+  if (val === current)
+    return;
+  current = val;
+  listeners.forEach((x) => x(val));
+};
+const useTint = () => {
+  const index = (0, import_react.useSyncExternalStore)(
+    onTintChange,
+    () => current,
+    () => initialTint
+  );
+  const tintsContext = (0, import_tints.useTints)();
+  const { tints } = tintsContext;
+  return {
+    ...tintsContext,
+    tints: tintsContext.tints,
+    tintIndex: index,
+    tint: tints[index],
+    setTintIndex,
+    setNextTintFamily: import_tints.setNextTintFamily,
+    setNextTint: () => {
+      setTintIndex(index + 1);
+    }
+  };
+};
+const ThemeTint = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+    name: useTint().tint,
+    children: (0, import_react.useMemo)(() => props.children, [props.children])
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeTint,
+  initialTint,
+  onTintChange,
+  setTintIndex,
+  useTint
+});
+//# sourceMappingURL=useTint.js.map

package/dist/cjs/useTint.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useTint.tsx"],
+  "sourcesContent": ["import { useMemo, useSyncExternalStore } from 'react'\nimport { Theme, ThemeName } from 'tamagui'\n\nimport { getTints, setNextTintFamily, useTints } from './tints'\n\n// TODO useSyncExternalStore\n\n// no localstorage because its not important to remember and causes a flicker\n// const tintVal = typeof localStorage !== 'undefined' ? localStorage.getItem('tint') : 0\n// const tint = tintVal ? +tintVal 0\nexport const initialTint = 3\n\nlet current = initialTint\n\nconst listeners = new Set<Function>()\n\nexport const onTintChange = (listener: (cur: number) => void) => {\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\nconst numTints = getTints().tints.length\n\nexport const setTintIndex = (next: number) => {\n  const val = next % numTints\n  if (val === current) return\n  current = val\n  listeners.forEach((x) => x(val))\n}\n\nexport const useTint = () => {\n  const index = useSyncExternalStore(\n    onTintChange,\n    () => current,\n    () => initialTint\n  )\n  const tintsContext = useTints()\n  const { tints } = tintsContext\n\n  return {\n    ...tintsContext,\n    tints: tintsContext.tints as ThemeName[],\n    tintIndex: index,\n    tint: tints[index] as ThemeName,\n    setTintIndex,\n    setNextTintFamily,\n    setNextTint: () => {\n      setTintIndex(index + 1)\n    },\n  } as const\n}\n\nexport const ThemeTint = (props: { children: any }) => {\n  return (\n    <Theme name={useTint().tint}>\n      {/*  */}\n      {useMemo(() => props.children, [props.children])}\n    </Theme>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAxDJ,mBAA8C;AAC9C,qBAAiC;AAEjC,mBAAsD;AAO/C,MAAM,cAAc;AAE3B,IAAI,UAAU;AAEd,MAAM,YAAY,oBAAI,IAAc;AAE7B,MAAM,eAAe,CAAC,aAAoC;AAC/D,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAEA,MAAM,eAAW,uBAAS,EAAE,MAAM;AAE3B,MAAM,eAAe,CAAC,SAAiB;AAC5C,QAAM,MAAM,OAAO;AACnB,MAAI,QAAQ;AAAS;AACrB,YAAU;AACV,YAAU,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC;AACjC;AAEO,MAAM,UAAU,MAAM;AAC3B,QAAM,YAAQ;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACA,QAAM,mBAAe,uBAAS;AAC9B,QAAM,EAAE,MAAM,IAAI;AAElB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO,aAAa;AAAA,IACpB,WAAW;AAAA,IACX,MAAM,MAAM;AAAA,IACZ;AAAA,IACA;AAAA,IACA,aAAa,MAAM;AACjB,mBAAa,QAAQ,CAAC;AAAA,IACxB;AAAA,EACF;AACF;AAEO,MAAM,YAAY,CAAC,UAA6B;AACrD,SACE,4CAAC;AAAA,IAAM,MAAM,QAAQ,EAAE;AAAA,IAEpB,oCAAQ,MAAM,MAAM,UAAU,CAAC,MAAM,QAAQ,CAAC;AAAA,GACjD;AAEJ;",
+  "names": []
+}