@tamagui/core 1.66.0 → 1.68.0

package/dist/native.js

@@ -1154,6 +1154,7 @@ var require_config_native = __commonJS({
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), config_exports = {};
     __export2(config_exports, {
       configListeners: () => configListeners,
+      devConfig: () => devConfig,
       getConfig: () => getConfig2,
       getFont: () => getFont,
       getThemes: () => getThemes2,
@@ -1165,6 +1166,7 @@ var require_config_native = __commonJS({
       setConfig: () => setConfig,
       setConfigFont: () => setConfigFont,
       setTokens: () => setTokens,
+      setupDev: () => setupDev2,
       updateConfig: () => updateConfig2,
       useTokens: () => useTokens
     });
@@ -1211,7 +1213,10 @@ var require_config_native = __commonJS({
           return ((_b = (_a2 = conf2.fontsParsed[k]) == null ? void 0 : _a2.family) == null ? void 0 : _b.val) === name;
         }
       )) == null ? void 0 : _a[1]);
-    };
+    }, devConfig;
+    function setupDev2(conf2) {
+      process.env.NODE_ENV === "development" && (devConfig = conf2);
+    }
   }
 });
 
@@ -4597,12 +4602,32 @@ var require_createComponent_native = __commonJS({
       spacedChildren: () => spacedChildren
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_compose_refs = require_index_native6(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native7(), import_react = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, mouseUps = /* @__PURE__ */ new Set();
+    var import_compose_refs = require_index_native6(), import_constants2 = require_index_native2(), import_helpers = require_index_native4(), import_use_did_finish_ssr = require_index_native7(), import_react = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime = require("react/jsx-runtime"), tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, debugKeyListeners, startVisualizer, mouseUps = /* @__PURE__ */ new Set();
     if (typeof document < "u") {
       let cancelTouches = () => {
         mouseUps.forEach((x) => x()), mouseUps.clear();
       };
-      addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches);
+      addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = () => {
+        var _a;
+        let devVisualizerConfig = (_a = import_config.devConfig) == null ? void 0 : _a.visualizer;
+        if (devVisualizerConfig) {
+          debugKeyListeners = /* @__PURE__ */ new Set();
+          let tm, isShowing = !1, options = {
+            key: "Alt",
+            delay: 800,
+            ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
+          };
+          document.addEventListener("blur", () => {
+            clearTimeout(tm);
+          }), document.addEventListener("keydown", ({ key, defaultPrevented }) => {
+            defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(() => {
+              isShowing = !0, debugKeyListeners == null || debugKeyListeners.forEach((l) => l(!0));
+            }, options.delay)));
+          }), document.addEventListener("keyup", ({ key, defaultPrevented }) => {
+            defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && (debugKeyListeners == null || debugKeyListeners.forEach((l) => l(!1))));
+          });
+        }
+      });
     }
     var BaseText, BaseView, hasSetupBaseViews = !1;
     function createComponent(staticConfig) {
@@ -4629,7 +4654,7 @@ var require_createComponent_native = __commonJS({
       });
       let component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
         var _a2, _b, _c, _d, _g, _h, _i, _j, _k;
-        if (!hasSetupBaseViews) {
+        if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           hasSetupBaseViews = !0;
           let baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
           baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
@@ -4650,7 +4675,21 @@ var require_createComponent_native = __commonJS({
         let curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps, props;
         curDefaultProps ? props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn) : props = propsIn;
         let debugProp = props.debug, componentName = props.componentName || staticConfig.componentName;
-        process.env.NODE_ENV === "development" && time && time`start (ignore)`;
+        process.env.NODE_ENV === "development" && import_constants2.isClient && (0, import_react.useEffect)(() => {
+          let overlay = null, debugVisualizerHandler = (show = !1) => {
+            let node = hostRef.current;
+            if (node)
+              if (show) {
+                overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted";
+                let dataAt = node.getAttribute("data-at") || "", dataIn = node.getAttribute("data-in") || "", tooltip = document.createElement("span");
+                tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+              } else
+                overlay && node.removeChild(overlay);
+          };
+          return debugKeyListeners ||= /* @__PURE__ */ new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
+            debugKeyListeners == null || debugKeyListeners.delete(debugVisualizerHandler);
+          };
+        }, [componentName]), process.env.NODE_ENV === "development" && time && time`start (ignore)`;
         let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)();
         process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
         let stateRef = (0, import_react.useRef)(
@@ -4771,7 +4810,14 @@ var require_createComponent_native = __commonJS({
           keys: mediaListeningKeys
         });
         let isAnimatedReactNativeWeb = hasAnimationProp && isReactNative;
-        if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed(">>>"), console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), console.log("splitStyles", splitStyles), console.log("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys }), console.log("className", Object.values(splitStyles.classNames)), import_constants2.isClient && console.log("ref", hostRef, "(click to view)"), console.groupEnd(), debugProp === "break"))
+        if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed(">>>"), console.log(
+          "props in",
+          propsIn,
+          "mapped to",
+          props,
+          "in order",
+          Object.keys(props)
+        ), console.log("splitStyles", splitStyles), console.log("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys }), console.log("className", Object.values(splitStyles.classNames)), import_constants2.isClient && console.log("ref", hostRef, "(click to view)"), console.groupEnd(), debugProp === "break"))
           debugger;
         let {
           viewProps: viewPropsIn,
@@ -6516,6 +6562,7 @@ var require_index_native9 = __commonJS({
       mediaObjectToString: () => import_useMedia.mediaObjectToString,
       mediaQueryConfig: () => import_useMedia.mediaQueryConfig,
       mediaState: () => import_useMedia.mediaState,
+      setupDev: () => import_config.setupDev,
       updateConfig: () => import_config.updateConfig,
       useMedia: () => import_useMedia.useMedia,
       useMediaPropsActive: () => import_useMedia.useMediaPropsActive