@tamagui/web 2.0.0-rc.3 → 2.0.0-rc.31

package/dist/cjs/helpers/getDefaultProps.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","getDefaultProps_exports","__export","getDefaultProps","module","exports","import_config","require","staticConfig","propsComponentName","isSubText","_conf_defaultProps","defaultProps","conf","getConfig","name","componentName","isText","userDefaultProps","_staticConfig_defaultProps","hasExplicitFontFamily"],"sources":["../../../src/helpers/getDefaultProps.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA0B,CAAAK,uBAAA;AAInB,IAAAK,aAAM,GAAAC,OACX,sBACA;EAAAJ,eAAA,GACA,SAAAA,CAAAK,YACG,EAAAC,kBAAA,EAAAC,SAAA;IACH,IAAIC,kBAAe;MAAAC,YAAc,GAAAJ,YAAA,EAAAI,YAAA;MAAAC,IAAA,OAAAP,aAAA,CAAAQ,SAAA;MAAAC,IAAA,GAAAN,kBAAA,IAAAD,YAAA,EAAAQ,aAAA;MAAA;MAEjCR,YAAM,CAAAS,MAAO;MAAAC,gBAEX,GAAAL,IAAA,YACA,CAAAF,kBAAc,GAAAE,IAAA,CAAAD,YAAA,cAAAD,kBAAA,uBAAAA,kBAAA,CAAAI,IAAA;IAAA,IAEbG,gBAAa,KAASN,YAAS;MASlC,GALIM,gBAAA;MASF,GAAAN;IACA,OAKF,IAAAO,0BAAA,EAAAC,qBAAA;IAEA,OAAOR,YAAA;EACT","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","getDefaultProps_exports","__export","getDefaultProps","module","exports","import_config","require","staticConfig","propsComponentName","_conf_defaultProps","defaultProps","conf","getConfig","name","componentName","isText","userDefaultProps"],"sources":["../../../src/helpers/getDefaultProps.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAA0B,CAAAK,uBAAA;AAInB,IAAAK,aAAM,GAAAC,OACX,sBACA;EAAAJ,eAAA,YAAAA,CACGK,YAAA,EAAAC,kBAAA;IACH,IAAIC,kBAAe;MAAAC,YAAc,GAAAH,YAAA,EAAAG,YAAA;MAAAC,IAAA,OAAAN,aAAA,CAAAO,SAAA;MAAAC,IAAA,GAAAL,kBAAA,IAAAD,YAAA,EAAAO,aAAA;MAAA;MAEjCP,YAAM,CAAAQ,MAAO;MAAAC,gBAEX,GAAAL,IAAA,YACA,CAAAF,kBAAc,GAAAE,IAAA,CAAAD,YAAA,cAAAD,kBAAA,uBAAAA,kBAAA,CAAAI,IAAA;IAAA,OAEbG,gBAAsB,KAAAN,YAAS,GAE5BA,YAAA;MAEN,GAAAM,gBAAI;MAQN,GAAAN","ignoreList":[]}

package/dist/cjs/helpers/getGroupPropParts.cjs

@@ -23,7 +23,7 @@ __export(getGroupPropParts_exports, {
   getGroupPropParts: () => getGroupPropParts
 });
 module.exports = __toCommonJS(getGroupPropParts_exports);
-var import_useMedia = require("../hooks/useMedia.cjs"),
+var import_mediaState = require("./mediaState.cjs"),
   import_pseudoDescriptors = require("./pseudoDescriptors.cjs");
 function kebabToCamel(str) {
   return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
@@ -32,7 +32,7 @@ function isValidPseudo(str) {
   return str ? kebabToCamel(str) in import_pseudoDescriptors.pseudoPriorities : !1;
 }
 function getGroupPropParts(groupProp) {
-  const m = (0, import_useMedia.getMedia)(),
+  const m = (0, import_mediaState.getMedia)(),
     [_, name, a, b, c] = groupProp.split("-"),
     m2 = a && b ? `${a}-${b}` : "",
     media = m2 && m2 in m && m2 || a && a in m && a || void 0;

package/dist/cjs/helpers/getGroupPropParts.native.js

@@ -25,7 +25,7 @@ __export(getGroupPropParts_exports, {
   getGroupPropParts: () => getGroupPropParts
 });
 module.exports = __toCommonJS(getGroupPropParts_exports);
-var import_useMedia = require("../hooks/useMedia.native.js"),
+var import_mediaState = require("./mediaState.native.js"),
   import_pseudoDescriptors = require("./pseudoDescriptors.native.js");
 function kebabToCamel(str) {
   return str.replace(/-([a-z])/g, function (_, c) {
@@ -36,7 +36,7 @@ function isValidPseudo(str) {
   return str ? kebabToCamel(str) in import_pseudoDescriptors.pseudoPriorities : !1;
 }
 function getGroupPropParts(groupProp) {
-  var m = (0, import_useMedia.getMedia)(),
+  var m = (0, import_mediaState.getMedia)(),
     [_, name, a, b, c] = groupProp.split("-"),
     m2 = a && b ? `${a}-${b}` : "",
     media = m2 && m2 in m && m2 || a && a in m && a || void 0,

package/dist/cjs/helpers/getGroupPropParts.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","getGroupPropParts_exports","__export","getGroupPropParts","module","exports","import_useMedia","require","import_pseudoDescriptors","kebabToCamel","str","replace","_","c","toUpperCase","isValidPseudo","pseudoPriorities","groupProp","m","getMedia","name","a","b","split","m2","media","pseudoCandidate","process","env","NODE_ENV","console","warn"],"sources":["../../../src/helpers/getGroupPropParts.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,yBAAA;AAAAC,QAAA,CAAAD,yBAAA;EAAAE,iBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyB,CAAAK,yBACzB;AAKA,IAAAK,eAAS,GAAaC,OAAqB;EAAAC,wBAAA,GAAAD,OAAA;AACzC,SAAOE,YAAYA,CAAAC,GAAA;EACrB,OAAAA,GAAA,CAAAC,OAAA,wBAAAC,CAAA,EAAAC,CAAA;IAGA,OAASA,CAAA,CAAAC,WAAc;EACrB;AAGF;AAEO,SAASC,cAAAL,GAAA,EAAkB;EAChC,OAAMA,GAAA,GAAAD,YAAI,CAAAC,GAAA,KAAAF,wBACS,CAAGQ,gBAAe,KAAM;AAI3C;AAYA,SAAIb,kBAAAc,SAAoB;EAEZ,IACNC,CAAA,OAAAZ,eAAA,CAAAa,QAA4B;IAAA,CAAAP,CAAA,EAAeQ,IAAA,EAAAC,CAAA,EAASC,CAAA,EAAAT,CAAA,IAAAI,SAAS,CAAAM,KAAA;IAAAC,EAAA,GAAAH,CAAA,IAAAC,CAAA,MAAAD,CAAA,IAAAC,CAAA;IAAAG,KAAA,GAAAD,EAAA,IAAAA,EAAA,IAAAN,CAAA,IAAAM,EAAA,IAAAH,CAAA,IAAAA,CAAA,IAAAH,CAAA,IAAAG,CAAA;IAAAK,eAAA,GAAAD,KAAA,GAAAA,KAAA,KAAAD,EAAA,GAAAX,CAAA,GAAAS,CAAA,MAAAA,CAAA,GAAAT,CAAA,OAAAA,CAAA,qBAAAQ,CAAA,MAAAA,CAAA,GAAAC,CAAA,OAAAA,CAAA,UAAAT,CAAA,OAAAA,CAAA;EAC/D,OAEFa,eAAkB,KAAAX,aAGL,CAAAW,eAAQ,MAAAC,OAAuB,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,OAAA,CAAAC,IAAA,6BAAAL,eAAA,SAAAT,SAAA,6EAAAS,eAAA;IAChDN,IAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","getGroupPropParts_exports","__export","getGroupPropParts","module","exports","import_mediaState","require","import_pseudoDescriptors","kebabToCamel","str","replace","_","c","toUpperCase","isValidPseudo","pseudoPriorities","groupProp","m","getMedia","name","a","b","split","m2","media","pseudoCandidate","process","env","NODE_ENV","console","warn"],"sources":["../../../src/helpers/getGroupPropParts.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,yBAAA;AAAAC,QAAA,CAAAD,yBAAA;EAAAE,iBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyB,CAAAK,yBACzB;AAKA,IAAAK,iBAAS,GAAaC,OAAqB;EAAAC,wBAAA,GAAAD,OAAA;AACzC,SAAOE,YAAYA,CAAAC,GAAA;EACrB,OAAAA,GAAA,CAAAC,OAAA,wBAAAC,CAAA,EAAAC,CAAA;IAGA,OAASA,CAAA,CAAAC,WAAc;EACrB;AAGF;AAEO,SAASC,cAAAL,GAAA,EAAkB;EAChC,OAAMA,GAAA,GAAAD,YAAI,CAAAC,GAAA,KAAAF,wBACS,CAAAQ,gBAAQ,GAAU;AAIrC;AAYA,SAAIb,kBAAAc,SAAoB;EAEZ,IACNC,CAAA,OAAAZ,iBAAA,CAA4Ba,QAAA;IAAA,CAAAP,CAAe,EAAAQ,IAAA,EAAAC,CAAS,EAAAC,CAAA,EAAAT,CAAA,IAASI,SAAA,CAAAM,KAAA;IAAAC,EAAA,GAAAH,CAAA,IAAAC,CAAA,MAAAD,CAAA,IAAAC,CAAA;IAAAG,KAAA,GAAAD,EAAA,IAAAA,EAAA,IAAAN,CAAA,IAAAM,EAAA,IAAAH,CAAA,IAAAA,CAAA,IAAAH,CAAA,IAAAG,CAAA;IAAAK,eAAA,GAAAD,KAAA,GAAAA,KAAA,KAAAD,EAAA,GAAAX,CAAA,GAAAS,CAAA,MAAAA,CAAA,GAAAT,CAAA,OAAAA,CAAA,qBAAAQ,CAAA,MAAAA,CAAA,GAAAC,CAAA,OAAAA,CAAA,UAAAT,CAAA,OAAAA,CAAA;EAC/D,OAEFa,eAAkB,KAAAX,aAGL,CAAAW,eAAQ,MAAAC,OAAuB,CAAAC,GAAA,CAAAC,QAAA,sBAAAC,OAAA,CAAAC,IAAA,6BAAAL,eAAA,SAAAT,SAAA,6EAAAS,eAAA;IAChDN,IAAA","ignoreList":[]}

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -44,6 +44,7 @@ var import_constants = require("@tamagui/constants"),
   import_config = require("../config.cjs"),
   import_isDevTools = require("../constants/isDevTools.cjs"),
   import_useMedia = require("../hooks/useMedia.cjs"),
+  import_mediaState = require("./mediaState.cjs"),
   import_createMediaStyle = require("./createMediaStyle.cjs"),
   import_expandStyles = require("./expandStyles.cjs"),
   import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs"),
@@ -70,18 +71,18 @@ function normalizeGroupKey(key, groupContext) {
   // check if its actually a simple group selector to avoid breaking selectors
   plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
     const name = parts[1];
-    if (groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
+    if (name !== "true" && groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
   }
   return key;
 }
 function isValidStyleKey(key, validStyles, accept) {
   return key in validStyles ? !0 : accept && key in accept;
 }
-const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug) => {
+const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
   conf = conf || (0, import_config.getConfig)();
-  const animationDriver = componentContext?.animationDriver || conf.animations;
+  const driver = animationDriver || componentContext?.animationDriver || conf.animations;
   if (props.passThrough) return null;
-  import_constants.isWeb && styleProps.isAnimated && animationDriver.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
+  import_constants.isWeb && styleProps.isAnimated && driver?.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
   const {
       shorthands
     } = conf,
@@ -97,7 +98,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       acceptsClassName
     } = staticConfig,
     viewProps = {},
-    mediaState = styleProps.mediaState || import_useMedia.mediaState,
+    mediaState = styleProps.mediaState || import_mediaState.mediaState,
     shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass,
     rulesToInsert = {},
     classNames = {};
@@ -110,7 +111,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     className = props.className || "",
     mediaStylesSeen = 0;
   const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
-  process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-setup`;
+  process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time) && time`split-styles-setup`;
   const styleState = {
     classNames,
     conf,
@@ -123,7 +124,9 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     usedKeys: {},
     viewProps,
     context: componentContext,
-    debug
+    debug,
+    // resolved animation driver (respects animatedBy prop)
+    animationDriver: driver
   };
   if (process.env.IS_STATIC === "is_static") {
     const {
@@ -135,7 +138,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       }
     }));
   }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`style-state`, process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient && import_isDevTools.isDevTools && (console.groupCollapsed("\u{1F539} getSplitStyles \u{1F447}"), (0, import_log.log)({
+  process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time) && time`style-state`, process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient && import_isDevTools.isDevTools && (console.groupCollapsed("\u{1F539} getSplitStyles \u{1F447}"), (0, import_log.log)({
     props,
     staticConfig,
     shouldDoClasses,
@@ -170,7 +173,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       viewProps[keyInit] = valInit;
       continue;
     }
-    if (process.env.NODE_ENV === "development" && debug === "profile" && time`before-prop-${keyInit}`, process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") continue;
+    if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time) && time`before-prop-${keyInit}`, process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") continue;
     if (accept) {
       const accepted = accept[keyInit];
       if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit == "object") {
@@ -192,7 +195,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           containerCSS = ["continer", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]];
         addStyleToInsertRules(rulesToInsert, containerCSS);
       }
-      continue;
+      if (!(keyInit === "transition" && typeof valInit == "string" && !driver?.animations?.[valInit])) continue;
     }
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
     if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
@@ -202,7 +205,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     if (!noExpand) {
       if (keyInit === "disabled" && valInit === !0 && (viewProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (viewProps.disabled = !0), !variants?.disabled)) continue;
       if (keyInit === "testID") {
-        viewProps[isReactNative ? keyInit : "data-testid"] = valInit;
+        isReactNative ? viewProps.testID = valInit : (viewProps["data-testid"] = valInit, styleProps.isAnimated && driver?.isReactNative && (viewProps.testID = valInit));
         continue;
       }
       if (keyInit === "id") {
@@ -238,7 +241,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       },
       parentStaticConfig
     })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), !isVariant)) continue;
-    if (!noSkip && keyInit in import_skipProps.skipProps) {
+    if (!noSkip && keyInit in import_skipProps.skipProps && !(keyInit === "transition" && typeof valInit == "string" && !driver?.animations?.[valInit])) {
       process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
       continue;
     }
@@ -330,14 +333,14 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
           mediaState
         });
         const priority = mediaStylesSeen;
-        if (mediaStylesSeen += 1, shouldDoClasses || import_constants.isWeb && isMedia === "theme") {
+        if (mediaStylesSeen += 1, shouldDoClasses) {
           const mediaStyle = getSubStyle(styleState, key, val, !1),
             mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle);
           for (const style of mediaStyles) {
             const property = style[import_helpers.StyleObjectProperty],
               isSubStyle = property[0] === "$";
             if (isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property)) continue;
-            const out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
+            const out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_mediaState.mediaQueryConfig, isMedia, !1, priority);
             process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
             const subKey = isSubStyle ? style[2] : "",
               fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
@@ -408,6 +411,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
             }
           }
           const mediaOriginalValues = styleOriginalValues.get(mediaStyle);
+          isGroupMedia && mediaStyle.transition && (styleState.pseudoTransitions ||= {}, styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle.transition);
           for (const subKey in mediaStyle) if (subKey !== "space") if (subKey[0] === "$") {
             if (!(0, import_isActivePlatform.isActivePlatform)(subKey) || !(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
             const subOriginalValues = styleOriginalValues.get(mediaStyle[subKey]);
@@ -433,14 +437,14 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       console.groupEnd();
     }
   }
-  if (process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants.isWeb && (!isReactNative || !animationDriver.supportsCSS) && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, mergeFlatTransforms(styleState.style, styleState.flatTransforms)), parentSplitStyles)) {
+  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time) && time`split-styles-propsend`, !(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), !styleProps.noExpand && !styleProps.noMergeStyle && import_constants.isWeb && (!isReactNative || driver?.inputStyle !== "css") && (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, mergeFlatTransforms(styleState.style, styleState.flatTransforms)), parentSplitStyles)) {
     if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
       const val = parentSplitStyles.classNames[key];
       styleState.style && key in styleState.style || key in classNames || (classNames[key] = val);
     }
     if (!shouldDoClasses) for (const key in parentSplitStyles.style) key in classNames || styleState.style && key in styleState.style || (styleState.style ||= {}, styleState.style[key] = parentSplitStyles.style[key]);
   }
-  if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || animationDriver.supportsCSS) && Array.isArray(styleState.style?.transform) && (styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform)), !styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
+  if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || driver?.inputStyle === "css") && Array.isArray(styleState.style?.transform) && (styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform)), !styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
     let retainedStyles,
       shouldRetain = !1;
     if (!styleState.style.$$css) {
@@ -448,12 +452,22 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       for (const atomicStyle of atomic) {
         const [key, value, identifier] = atomicStyle,
           isAnimatedAndTransitionOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key),
-          nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && props.animateOnly?.includes(key);
+          nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && import_constants.isClient && driver?.outputStyle === "css" && props.animateOnly?.includes(key);
         isAnimatedAndTransitionOnly ? (retainedStyles ||= {}, retainedStyles[key] = styleState.style[key]) : nonAnimatedTransitionOnly ? (retainedStyles ||= {}, retainedStyles[key] = value, shouldRetain = !0) : (addStyleToInsertRules(rulesToInsert, atomicStyle), classNames[key] = identifier);
       }
       process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("\u{1F539} getSplitStyles final style object"), console.info(styleState.style), console.info("retainedStyles", retainedStyles), console.groupEnd()), (shouldRetain || process.env.IS_STATIC !== "is_static") && (styleState.style = retainedStyles || {});
     }
   }
+  if (!styleProps.noMergeStyle && styleState.style && !shouldDoClasses && styleProps.isAnimated && !driver?.isReactNative && !styleState.style.$$css) {
+    const toConvert = {};
+    let hasProps = !1;
+    const animateOnly = props.animateOnly;
+    for (const key in styleState.style) key in import_helpers.nonAnimatableStyleProps && (toConvert[key] = styleState.style[key], delete styleState.style[key], hasProps = !0);
+    if (hasProps) {
+      const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(toConvert);
+      for (const atomicStyle of atomic) addStyleToInsertRules(rulesToInsert, atomicStyle), classNames[atomicStyle[import_helpers.StyleObjectProperty]] = atomicStyle[import_helpers.StyleObjectIdentifier];
+    }
+  }
   const styleProp = props.style;
   if (!styleProps.noMergeStyle && styleProp) if (isHOC) viewProps.style = normalizeStyle(styleProp);else {
     const isArray = Array.isArray(styleProp),
@@ -463,7 +477,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       style && (style.$$css ? Object.assign(styleState.classNames, style) : (styleState.style ||= {}, Object.assign(styleState.style, normalizeStyle(style))));
     }
   }
-  process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-pre-result`;
+  process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time) && time`split-styles-pre-result`;
   const result = {
       hasMedia,
       fontFamily: styleState.fontFamily,
@@ -475,22 +489,24 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       dynamicThemeAccess,
       pseudoGroups,
       mediaGroups,
-      overriddenContextProps: styleState.overriddenContextProps
+      overriddenContextProps: styleState.overriddenContextProps,
+      pseudoTransitions: styleState.pseudoTransitions
     },
     asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
   if (!styleProps.noMergeStyle && !asChildExceptStyleLike) {
     const style = styleState.style;
     {
-      let fontFamily = isText || isInput ? styleState.fontFamily || staticConfig.defaultProps?.fontFamily : null;
+      let fontFamily = isText || isInput ? styleState.fontFamily : null;
       fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
       const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "",
         groupClassName = props.group ? `t_group_${props.group}` : "",
         componentNameFinal = props.componentName || staticConfig.componentName,
-        componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`;
+        componentNameClassName = props.asChild || !componentNameFinal || componentNameFinal === "Text" ? "" : `is_${componentNameFinal}`;
       let classList = [];
-      componentClassName && classList.push(componentClassName), fontFamilyClassName && classList.push(fontFamilyClassName), classNames && classList.push(Object.values(classNames).join(" ")), groupClassName && classList.push(groupClassName), props.className && classList.push(props.className);
-      const finalClassName = classList.join(" ");
-      if (styleProps.isAnimated && isReactNative) style && (viewProps.style = style), animationDriver?.supportsCSS && (viewProps.className = finalClassName);else if (isReactNative) {
+      componentNameClassName && classList.push(componentNameClassName), isText ? classList.push("is_Text") : classList.push("is_View"), fontFamilyClassName && classList.push(fontFamilyClassName), classNames && classList.push(Object.values(classNames).join(" ")), groupClassName && classList.push(groupClassName), props.className && classList.push(props.className);
+      const finalClassName = classList.join(" "),
+        needsCssStyles = isReactNative || styleProps.isAnimated && driver?.isReactNative;
+      if (styleProps.isAnimated && driver?.inputStyle === "css") viewProps.className = finalClassName, style && (viewProps.style = style);else if (needsCssStyles) {
         let cnStyles;
         for (const name of finalClassName.split(" ")) cnStyles ||= {
           $$css: !0
@@ -514,7 +530,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     } catch {}
     console.groupEnd();
   }
-  return process.env.NODE_ENV === "development" && debug === "profile" && time`split-styles-done`, result;
+  return process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time) && time`split-styles-done`, result;
 };
 function mergeFlatTransforms(target, flatTransforms) {
   Object.entries(flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
@@ -554,7 +570,20 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
     let originalValues;
     for (let key in styleIn) {
       const val = styleIn[key];
-      key = conf2.shorthands[key] || key, !(!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) && (0, import_propMapper.propMapper)(key, val, styleState, !1, (skey, sval, originalVal) => {
+      if (key = conf2.shorthands[key] || key, key === "transition") {
+        styleState.pseudoTransitions ||= {}, styleState.pseudoTransitions[subKey] = val;
+        const driver = styleState.animationDriver;
+        if (driver?.outputStyle === "css") {
+          const animationConfig = driver.animations?.[val];
+          if (animationConfig) {
+            const important = subKey[0] === "$" ? " !important" : "";
+            styleOut.transition = `all ${animationConfig}${important}`;
+          }
+        }
+        !styleOut.transition && typeof val == "string" && !driver?.animations?.[val] && (styleOut.transition = val);
+        continue;
+      }
+      !staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip || (0, import_propMapper.propMapper)(key, val, styleState, !1, (skey, sval, originalVal) => {
         originalVal !== void 0 && (originalValues ||= {}, originalValues[skey] = originalVal), skey in import_helpers.validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in import_helpers.stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
       });
     }
@@ -593,8 +622,10 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
     return styleProps.noNormalize || (0, import_expandStyles.fixStyles)(styleOut), originalValues && styleOriginalValues.set(styleOut, originalValues), styleOut;
   },
   useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {},
-  useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k, l) => {
-    const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l);
+  useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+    "use no memo";
+
+    const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
     return useInsertEffectCompat(() => {
       res && (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
     }, [res?.rulesToInsert]), res;