@tamagui/web 1.103.0 → 1.103.1

package/dist/esm/views/TamaguiProvider.mjs

@@ -1,33 +1,51 @@
-import { isClient } from "@tamagui/constants";
-import * as React from "react";
+import { isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useState, useMemo, useEffect } from "react";
 import { ComponentContext } from "../contexts/ComponentContext.mjs";
+import { useDidHydrateOnceRoot } from "../hooks/useDidHydrateOnce.mjs";
 import { setupMediaListeners } from "../hooks/useMedia.mjs";
 import { ThemeProvider } from "./ThemeProvider.mjs";
-import { useDidHydrateOnceRoot } from "../hooks/useDidHydrateOnce.mjs";
 import { jsx } from "react/jsx-runtime";
 function TamaguiProvider({
   children,
   disableInjectCSS,
   config,
-  ...themePropsProvider
+  className,
+  defaultTheme,
+  disableRootThemeClass,
+  reset,
+  themeClassNameOnRoot
 }) {
-  return setupMediaListeners(), isClient && (useDidHydrateOnceRoot(), React.useInsertionEffect(() => {
-    if (config && (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS)) {
+  setupMediaListeners(), isClient && (useDidHydrateOnceRoot(), useIsomorphicLayoutEffect(() => {
+    if (config && !disableInjectCSS) {
       const style = document.createElement("style");
       return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
         document.head.removeChild(style);
       };
     }
-  }, [config, disableInjectCSS])), /* @__PURE__ */jsx(ComponentContext.Provider, {
+  }, [config, disableInjectCSS]));
+  const contents = useMemo(() => /* @__PURE__ */jsx(ComponentContext.Provider, {
     animationDriver: config?.animations,
     children: /* @__PURE__ */jsx(ThemeProvider, {
-      themeClassNameOnRoot: config?.themeClassNameOnRoot,
-      disableRootThemeClass: config?.disableRootThemeClass,
-      ...themePropsProvider,
-      defaultTheme: themePropsProvider.defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
+      themeClassNameOnRoot: themeClassNameOnRoot ?? config?.themeClassNameOnRoot,
+      disableRootThemeClass: disableRootThemeClass ?? config?.disableRootThemeClass,
+      defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
+      reset,
+      className,
       children
     })
+  }), []);
+  return /* @__PURE__ */jsx(UnmountedClassName, {
+    children: contents
   });
 }
+function UnmountedClassName(props) {
+  const [mounted, setMounted] = useState(!1);
+  return useEffect(() => {
+    setMounted(!0);
+  }, []), isWeb ? /* @__PURE__ */jsx("span", {
+    className: mounted ? "" : "t_unmounted",
+    children: props.children
+  }) : props.children;
+}
 TamaguiProvider.displayName = "TamaguiProvider";
 export { TamaguiProvider };

package/dist/esm/views/TamaguiProvider.native.js

@@ -1,69 +1,55 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isClient } from "@tamagui/constants";
-import * as React from "react";
+import { isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useState, useMemo, useEffect } from "react";
 import { ComponentContext } from "../contexts/ComponentContext";
+import { useDidHydrateOnceRoot } from "../hooks/useDidHydrateOnce";
 import { setupMediaListeners } from "../hooks/useMedia";
 import { ThemeProvider } from "./ThemeProvider";
-import { useDidHydrateOnceRoot } from "../hooks/useDidHydrateOnce";
-function _define_property(obj, key, value) {
-  return key in obj ? Object.defineProperty(obj, key, {
-    value,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : obj[key] = value, obj;
+function _array_like_to_array(arr, len) {
+  (len == null || len > arr.length) && (len = arr.length);
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
 }
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
-    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-    }))), ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
+function _array_with_holes(arr) {
+  if (Array.isArray(arr)) return arr;
 }
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+function _iterable_to_array_limit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i != null) {
+    var _arr = [], _n = !0, _d = !1, _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
+        ;
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        !_n && _i.return != null && _i.return();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
   }
-  return keys;
 }
-function _object_spread_props(target, source) {
-  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-  }), target;
+function _non_iterable_rest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_without_properties(source, excluded) {
-  if (source == null) return {};
-  var target = _object_without_properties_loose(source, excluded), key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++)
-      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-  }
-  return target;
+function _sliced_to_array(arr, i) {
+  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
-function _object_without_properties_loose(source, excluded) {
-  if (source == null) return {};
-  var target = {}, sourceKeys = Object.keys(source), key, i;
-  for (i = 0; i < sourceKeys.length; i++)
-    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-  return target;
+function _unsupported_iterable_to_array(o, minLen) {
+  if (o) {
+    if (typeof o == "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+  }
 }
-function TamaguiProvider(_param) {
-  var children = _param.children, disableInjectCSS = _param.disableInjectCSS, config = _param.config, themePropsProvider = _object_without_properties(_param, [
-    "children",
-    "disableInjectCSS",
-    "config"
-  ]);
-  setupMediaListeners(), isClient && (useDidHydrateOnceRoot(), React.useInsertionEffect(function() {
-    if (config && (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS)) {
+function TamaguiProvider(param) {
+  var children = param.children, disableInjectCSS = param.disableInjectCSS, config = param.config, className = param.className, defaultTheme = param.defaultTheme, disableRootThemeClass = param.disableRootThemeClass, reset = param.reset, themeClassNameOnRoot = param.themeClassNameOnRoot;
+  setupMediaListeners(), isClient && (useDidHydrateOnceRoot(), useIsomorphicLayoutEffect(function() {
+    if (config && !disableInjectCSS) {
       var style = document.createElement("style");
       return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), function() {
         document.head.removeChild(style);
@@ -73,18 +59,32 @@ function TamaguiProvider(_param) {
     config,
     disableInjectCSS
   ]));
-  var _themePropsProvider_defaultTheme;
-  return /* @__PURE__ */ _jsx(ComponentContext.Provider, {
-    animationDriver: config == null ? void 0 : config.animations,
-    children: /* @__PURE__ */ _jsx(ThemeProvider, _object_spread_props(_object_spread({
-      themeClassNameOnRoot: config == null ? void 0 : config.themeClassNameOnRoot,
-      disableRootThemeClass: config == null ? void 0 : config.disableRootThemeClass
-    }, themePropsProvider), {
-      defaultTheme: (_themePropsProvider_defaultTheme = themePropsProvider.defaultTheme) !== null && _themePropsProvider_defaultTheme !== void 0 ? _themePropsProvider_defaultTheme : config ? Object.keys(config.themes)[0] : "",
-      children
-    }))
+  var contents = useMemo(function() {
+    return /* @__PURE__ */ _jsx(ComponentContext.Provider, {
+      animationDriver: config == null ? void 0 : config.animations,
+      children: /* @__PURE__ */ _jsx(ThemeProvider, {
+        themeClassNameOnRoot: themeClassNameOnRoot ?? (config == null ? void 0 : config.themeClassNameOnRoot),
+        disableRootThemeClass: disableRootThemeClass ?? (config == null ? void 0 : config.disableRootThemeClass),
+        defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
+        reset,
+        className,
+        children
+      })
+    });
+  }, []);
+  return /* @__PURE__ */ _jsx(UnmountedClassName, {
+    children: contents
   });
 }
+function UnmountedClassName(props) {
+  var _useState = _sliced_to_array(useState(!1), 2), mounted = _useState[0], setMounted = _useState[1];
+  return useEffect(function() {
+    setMounted(!0);
+  }, []), isWeb ? /* @__PURE__ */ _jsx("span", {
+    className: mounted ? "" : "t_unmounted",
+    children: props.children
+  }) : props.children;
+}
 TamaguiProvider.displayName = "TamaguiProvider";
 export {
   TamaguiProvider

package/dist/esm/views/TamaguiProvider.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Users/n8/tamagui/code/core/web/src/views/TamaguiProvider.tsx"],
-  "mappings": ";AAAA,SAASA,gBAAgB;AACzB,YAAYC,WAAW;AAEvB,SAASC,wBAAwB;AACjC,SAASC,2BAA2B;AAEpC,SAASC,qBAAqB;AAC9B,SAASC,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE/B,SAASC,gBAAgB,QAAA;MAC9BC,WAD8B,OAC9BA,UACAC,mBAF8B,OAE9BA,kBACAC,SAH8B,OAG9BA,QACGC,qBAAAA,2BAJ2B,QAAA;IAC9BH;IACAC;IACAC;;AAGAN,sBAAAA,GAEIH,aAEFK,sBAAAA,GAEAJ,MAAMU,mBAAmB,WAAA;AACvB,QAAKF,WACAA,OAAOG,cAGNC,SAASC,gBAAgBC,UAAUC,SAAS,aAAA,KAC9CH,SAASC,gBAAgBC,UAAUE,OAAO,aAAA,GAI1C,CAACT,mBAAkB;AACrB,UAAMU,QAAQL,SAASM,cAAc,OAAA;AACrCD,mBAAME,YAAYP,SAASQ,eAAeZ,OAAOa,OAAM,CAAA,CAAA,GACvDT,SAASU,KAAKH,YAAYF,KAAAA,GACnB,WAAA;AACLL,iBAASU,KAAKC,YAAYN,KAAAA;MAC5B;IACF;EACF,GAAG;IAACT;IAAQD;GAAiB;MAUvBE;AAPR,SACE,qBAACR,iBAAiBuB,UAAQ;IAACC,iBAAiBjB,UAAAA,OAAAA,SAAAA,OAAQkB;cAClD,qBAACvB,eAAAA,qBAAAA,eAAAA;MACCwB,sBAAsBnB,UAAAA,OAAAA,SAAAA,OAAQmB;MAC9BC,uBAAuBpB,UAAAA,OAAAA,SAAAA,OAAQoB;OAC3BnB,kBAAAA,GAAAA;MACJoB,eACEpB,mCAAAA,mBAAmBoB,kBAAY,QAA/BpB,qCAAAA,SAAAA,mCAAoCD,SAASsB,OAAOC,KAAKvB,OAAOwB,MAAM,EAAE,CAAA,IAAK;;;;AAOvF;AAEA3B,gBAAgB,cAAiB;",
-  "names": ["isClient", "React", "ComponentContext", "setupMediaListeners", "ThemeProvider", "useDidHydrateOnceRoot", "TamaguiProvider", "children", "disableInjectCSS", "config", "themePropsProvider", "useInsertionEffect", "disableSSR", "document", "documentElement", "classList", "contains", "remove", "style", "createElement", "appendChild", "createTextNode", "getCSS", "head", "removeChild", "Provider", "animationDriver", "animations", "themeClassNameOnRoot", "disableRootThemeClass", "defaultTheme", "Object", "keys", "themes"]
+  "mappings": ";AAAA,SAASA,UAAUC,OAAOC,iCAAiC;AAC3D,SAASC,UAAUC,SAASC,iBAAiB;AAC7C,SAASC,wBAAwB;AACjC,SAASC,6BAA6B;AACtC,SAASC,2BAA2B;AAEpC,SAASC,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvB,SAASC,gBAAgB,OAST;MARrBC,WAD8B,MAC9BA,UACAC,mBAF8B,MAE9BA,kBACAC,SAH8B,MAG9BA,QACAC,YAJ8B,MAI9BA,WACAC,eAL8B,MAK9BA,cACAC,wBAN8B,MAM9BA,uBACAC,QAP8B,MAO9BA,OACAC,uBAR8B,MAQ9BA;AAEAV,sBAAAA,GAEIR,aAEFO,sBAAAA,GAEAL,0BAA0B,WAAA;AACxB,QAAKW,UACD,CAACD,kBAAkB;AACrB,UAAMO,QAAQC,SAASC,cAAc,OAAA;AACrCF,mBAAMG,YAAYF,SAASG,eAAeV,OAAOW,OAAM,CAAA,CAAA,GACvDJ,SAASK,KAAKH,YAAYH,KAAAA,GACnB,WAAA;AACLC,iBAASK,KAAKC,YAAYP,KAAAA;MAC5B;IACF;EACF,GAAG;IAACN;IAAQD;GAAiB;AAG/B,MAAMe,WAAWvB,QAAQ,WAAA;AACvB,WACE,qBAACE,iBAAiBsB,UAAQ;MAACC,iBAAiBhB,UAAAA,OAAAA,SAAAA,OAAQiB;gBAClD,qBAACrB,eAAAA;QACCS,sBAAsBA,yBAAwBL,UAAAA,OAAAA,SAAAA,OAAQK;QACtDF,uBAAuBA,0BAAyBH,UAAAA,OAAAA,SAAAA,OAAQG;QACxDD,cAAcA,iBAAiBF,SAASkB,OAAOC,KAAKnB,OAAOoB,MAAM,EAAE,CAAA,IAAK;QACxEhB;QACAH;;;;EAMR,GAAG,CAAA,CAAE;AAEL,SAAO,qBAACoB,oBAAAA;cAAoBP;;AAC9B;AAGA,SAASO,mBAAmBC,OAAoC;AAC9D,MAA8BhC,YAAAA,iBAAAA,SAAS,EAAA,GAAA,CAAA,GAAhCiC,UAAuBjC,UAAAA,CAAAA,GAAdkC,aAAclC,UAAAA,CAAAA;AAM9B,SAJAE,UAAU,WAAA;AACRgC,eAAW,EAAA;EACb,GAAG,CAAA,CAAE,GAEApC,QAIE,qBAACqC,QAAAA;IAAKxB,WAAWsB,UAAU,KAAK;cAAgBD,MAAMxB;OAHpDwB,MAAMxB;AAIjB;AAEAD,gBAAgB,cAAiB;",
+  "names": ["isClient", "isWeb", "useIsomorphicLayoutEffect", "useState", "useMemo", "useEffect", "ComponentContext", "useDidHydrateOnceRoot", "setupMediaListeners", "ThemeProvider", "TamaguiProvider", "children", "disableInjectCSS", "config", "className", "defaultTheme", "disableRootThemeClass", "reset", "themeClassNameOnRoot", "style", "document", "createElement", "appendChild", "createTextNode", "getCSS", "head", "removeChild", "contents", "Provider", "animationDriver", "animations", "Object", "keys", "themes", "UnmountedClassName", "props", "mounted", "setMounted", "span"]
 }

package/dist/esm/views/Text.js

@@ -6,7 +6,8 @@ const ellipseStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 }, defaultWebStyle = {
-  display: "inline",
+  display: "inline-block",
+  // display: inline breaks css transform styles
   boxSizing: "border-box",
   wordWrap: "break-word",
   whiteSpace: "pre-wrap",

package/dist/esm/views/Text.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "mappings": "AAAA,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAQhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd,GAIM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV,GAEM,gBAEA,cAMO,OAAO,gBAKlB;AAAA,EACA,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,YAAY;AAAA,IACZ,GACI;AAAA,EAIN;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IAEN,eAAe;AAAA,MACb,GAAG;AAAA,MAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,QACE,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,IACA;AAAA,IACR;AAAA,IAIA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAMF,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAEA,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;AAED,KAAK,cAAiB;",
+  "mappings": "AAAA,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAQhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd,GAIM,kBAAkB;AAAA,EACtB,SAAS;AAAA;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV,GAEM,gBAEA,cAMO,OAAO,gBAKlB;AAAA,EACA,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,YAAY;AAAA,IACZ,GACI;AAAA,EAIN;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IAEN,eAAe;AAAA,MACb,GAAG;AAAA,MAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,QACE,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,IACA;AAAA,IACR;AAAA,IAIA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAMF,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAEA,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;AAED,KAAK,cAAiB;",
   "names": []
 }

package/dist/esm/views/Text.mjs

@@ -7,7 +7,8 @@ const ellipseStyle = {
     whiteSpace: "nowrap"
   },
   defaultWebStyle = {
-    display: "inline",
+    display: "inline-block",
+    // display: inline breaks css transform styles
     boxSizing: "border-box",
     wordWrap: "break-word",
     whiteSpace: "pre-wrap",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.103.0",
+  "version": "1.103.1",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,18 +27,18 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.103.0",
-    "@tamagui/constants": "1.103.0",
-    "@tamagui/helpers": "1.103.0",
-    "@tamagui/normalize-css-color": "1.103.0",
-    "@tamagui/timer": "1.103.0",
-    "@tamagui/types": "1.103.0",
-    "@tamagui/use-did-finish-ssr": "1.103.0",
-    "@tamagui/use-event": "1.103.0",
-    "@tamagui/use-force-update": "1.103.0"
+    "@tamagui/compose-refs": "1.103.1",
+    "@tamagui/constants": "1.103.1",
+    "@tamagui/helpers": "1.103.1",
+    "@tamagui/normalize-css-color": "1.103.1",
+    "@tamagui/timer": "1.103.1",
+    "@tamagui/types": "1.103.1",
+    "@tamagui/use-did-finish-ssr": "1.103.1",
+    "@tamagui/use-event": "1.103.1",
+    "@tamagui/use-force-update": "1.103.1"
   },
   "devDependencies": {
-    "@tamagui/build": "1.103.0",
+    "@tamagui/build": "1.103.1",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "typescript": "^5.5.2",

package/src/createComponent.tsx

@@ -1,5 +1,5 @@
 import { composeRefs } from '@tamagui/compose-refs'
-import { isClient, isServer, isWeb } from '@tamagui/constants'
+import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
   StyleObjectIdentifier,
   StyleObjectRules,
@@ -887,6 +887,9 @@ export function createComponent<
       if ((isAnimated || supportsCSSVars) && animations) {
         animationStyles = animations.style
         viewProps.style = animationStyles
+        if (animations.className) {
+          viewProps.className = `${viewProps.className || ''} ${animations.className}`
+        }
       }
 
       if (process.env.NODE_ENV === 'development' && time) time`animations`
@@ -961,6 +964,16 @@ export function createComponent<
 
     const unPress = () => setStateShallow({ press: false, pressIn: false })
 
+    if (process.env.NODE_ENV === 'development') {
+      useIsomorphicLayoutEffect(() => {
+        if (debugProp) {
+          console.groupCollapsed(`Rendered style >`)
+          console.warn(getComputedStyle(stateRef.current.host! as any))
+          console.groupEnd()
+        }
+      })
+    }
+
     useEffect(() => {
       if (disabled) {
         return

package/src/helpers/getSplitStyles.tsx

@@ -224,6 +224,7 @@ export const getSplitStyles: StyleSplitter = (
       staticConfig,
       shouldDoClasses,
       styleProps,
+      rulesToInsert,
       componentState,
       styleState,
       theme: { ...theme },

package/src/helpers/getStylesAtomic.ts

@@ -150,16 +150,26 @@ function createAtomicRules(
   value: any,
   pseudo?: PseudoDescriptor
 ): string[] {
-  const pseudoSelector = pseudo
+  const pseudoIdPostfix = pseudo
     ? pseudo.name === 'disabled'
       ? `[aria-disabled]`
       : `:${pseudo.name}`
     : ''
-  const selector = pseudo
-    ? pseudo?.selector
-      ? `${pseudo?.selector} .${identifier}`
-      : `${selectorPriority[pseudo.name]} .${identifier}${pseudoSelector}`
+  const pseudoSelector = pseudo?.selector
+
+  let selector = pseudo
+    ? pseudoSelector
+      ? `${pseudoSelector} .${identifier}`
+      : `${selectorPriority[pseudo.name]} .${identifier}${pseudoIdPostfix}`
     : `:root .${identifier}`
+
+  // enter style on css driver needs both:
+  //   .t_unmounted .selector
+  //   .selector.t_unmounted
+  if (pseudoSelector === pseudoDescriptors.enterStyle.selector) {
+    selector = `${selector}, .${identifier}${pseudoSelector}`
+  }
+
   const important = !!pseudo
 
   let rules: string[] = []

package/src/types.tsx

@@ -2396,6 +2396,7 @@ export type UseAnimationHook = (props: {
   delay?: number
 }) => null | {
   style?: StackStyleBase | StackStyleBase[]
+  className?: string
 }
 
 export type GestureReponderEvent = Exclude<

package/src/views/TamaguiProvider.tsx

@@ -1,17 +1,20 @@
-import { isClient } from '@tamagui/constants'
-import * as React from 'react'
-
+import { isClient, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { useState, useMemo, useEffect } from 'react'
 import { ComponentContext } from '../contexts/ComponentContext'
+import { useDidHydrateOnceRoot } from '../hooks/useDidHydrateOnce'
 import { setupMediaListeners } from '../hooks/useMedia'
 import type { TamaguiProviderProps } from '../types'
 import { ThemeProvider } from './ThemeProvider'
-import { useDidHydrateOnceRoot } from '../hooks/useDidHydrateOnce'
 
 export function TamaguiProvider({
   children,
   disableInjectCSS,
   config,
-  ...themePropsProvider
+  className,
+  defaultTheme,
+  disableRootThemeClass,
+  reset,
+  themeClassNameOnRoot,
 }: TamaguiProviderProps) {
   setupMediaListeners()
 
@@ -19,16 +22,8 @@ export function TamaguiProvider({
     // inject CSS if asked to (not SSR compliant)
     useDidHydrateOnceRoot()
 
-    React.useInsertionEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (!config) return
-      if (!config.disableSSR) {
-        // for easier support of hidden-until-js mount animations
-        // user must set t_unmounted on documentElement from SSR
-        if (document.documentElement.classList.contains('t_unmounted')) {
-          document.documentElement.classList.remove('t_unmounted')
-        }
-      }
-
       if (!disableInjectCSS) {
         const style = document.createElement('style')
         style.appendChild(document.createTextNode(config.getCSS()))
@@ -40,20 +35,38 @@ export function TamaguiProvider({
     }, [config, disableInjectCSS])
   }
 
-  return (
-    <ComponentContext.Provider animationDriver={config?.animations}>
-      <ThemeProvider
-        themeClassNameOnRoot={config?.themeClassNameOnRoot}
-        disableRootThemeClass={config?.disableRootThemeClass}
-        {...themePropsProvider}
-        defaultTheme={
-          themePropsProvider.defaultTheme ?? (config ? Object.keys(config.themes)[0] : '')
-        }
-      >
-        {children}
-      </ThemeProvider>
-    </ComponentContext.Provider>
-  )
+  const contents = useMemo(() => {
+    return (
+      <ComponentContext.Provider animationDriver={config?.animations}>
+        <ThemeProvider
+          themeClassNameOnRoot={themeClassNameOnRoot ?? config?.themeClassNameOnRoot}
+          disableRootThemeClass={disableRootThemeClass ?? config?.disableRootThemeClass}
+          defaultTheme={defaultTheme ?? (config ? Object.keys(config.themes)[0] : '')}
+          reset={reset}
+          className={className}
+        >
+          {children}
+        </ThemeProvider>
+      </ComponentContext.Provider>
+    )
+  }, [])
+
+  return <UnmountedClassName>{contents}</UnmountedClassName>
+}
+
+// for CSS animations
+function UnmountedClassName(props: { children: React.ReactNode }) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!isWeb) {
+    return props.children
+  }
+
+  return <span className={mounted ? '' : 't_unmounted'}>{props.children}</span>
 }
 
 TamaguiProvider['displayName'] = 'TamaguiProvider'

package/src/views/Text.tsx

@@ -18,7 +18,7 @@ const ellipseStyle = {
 export type Text = TamaguiTextElement
 
 const defaultWebStyle = {
-  display: 'inline',
+  display: 'inline-block', // display: inline breaks css transform styles
   boxSizing: 'border-box',
   wordWrap: 'break-word',
   whiteSpace: 'pre-wrap',

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAYN,MAAM,OAAO,CAAA;AA0Bd,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EAKT,cAAc,EACd,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,YAAY,EAEZ,gBAAgB,EAChB,wBAAwB,EACxB,cAAc,EACd,qBAAqB,EACrB,SAAS,EAIV,MAAM,SAAS,CAAA;AAchB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAkE9D,eAAO,MAAM,iBAAiB,UACrB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,+BACtB,iBAAiB,gBAChC,YAAY,UAClB,qBAAqB;;;;;;;;;;;;;;;;;;;CA+N9B,CAAA;AAuBD,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAmkC3B;AAsBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBA+FxD;AAwDD,eAAO,MAAM,UAAU,UAAW,GAAG,QAQpC,CAAA;AAED,eAAO,MAAM,uBAAuB,uFAOjC;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAAG,SAAS,KAAK,IAAI,CAAA;IAC5E,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,gBAAgB,EAAE,iBAAiB,CAAA;IACnC,KAAK,EAAE,qBAAqB,CAAA;CAC7B,4CAqCA,CAAA"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAYN,MAAM,OAAO,CAAA;AA0Bd,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EAKT,cAAc,EACd,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,YAAY,EAEZ,gBAAgB,EAChB,wBAAwB,EACxB,cAAc,EACd,qBAAqB,EACrB,SAAS,EAIV,MAAM,SAAS,CAAA;AAchB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAkE9D,eAAO,MAAM,iBAAiB,UACrB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,+BACtB,iBAAiB,gBAChC,YAAY,UAClB,qBAAqB;;;;;;;;;;;;;;;;;;;CA+N9B,CAAA;AAuBD,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAglC3B;AAsBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBA+FxD;AAwDD,eAAO,MAAM,UAAU,UAAW,GAAG,QAQpC,CAAA;AAED,eAAO,MAAM,uBAAuB,uFAOjC;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,GAAG,SAAS,KAAK,IAAI,CAAA;IAC5E,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,gBAAgB,EAAE,iBAAiB,CAAA;IACnC,KAAK,EAAE,qBAAqB,CAAA;CAC7B,4CAqCA,CAAA"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAChF,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAGZ,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AAsBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,EACjB,wBAAwB,CAAC,EAAE,OAAO,KAC/B,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AA8B7B,eAAO,MAAM,cAAc,EAAE,aA8uC5B,CAAA;AAgED,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,SA2BF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAa5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAChF,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAGZ,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AAsBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,EACjB,wBAAwB,CAAC,EAAE,OAAO,KAC/B,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AA8B7B,eAAO,MAAM,cAAc,EAAE,aA+uC5B,CAAA;AAgED,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,SA2BF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAa5B,CAAA"}

package/types/types.d.ts

@@ -1436,6 +1436,7 @@ export type UseAnimationHook = (props: {
     delay?: number;
 }) => null | {
     style?: StackStyleBase | StackStyleBase[];
+    className?: string;
 };
 export type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (event: infer Event) => void ? Event : never;
 export type RulesToInsert = Record<string, StyleObject>;