@tamagui/core 1.0.1-beta.214 → 1.0.1-beta.216

package/dist/esm/helpers/useShallowSetState.js

@@ -7,7 +7,7 @@ function useShallowSetState(setter, debug, debugName) {
           if (prev[key] !== next[key]) {
             if (process.env.NODE_ENV === "development") {
               if (debug === "verbose") {
-                console.warn(`update ${debugName}`, next);
+                console.log(` \u25B2 setState ${debugName}`, next);
               }
             }
             return { ...prev, ...next };

package/dist/esm/helpers/useShallowSetState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/useShallowSetState.tsx"],
-  "sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  debug?: boolean | 'verbose',\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            if (process.env.NODE_ENV === 'development') {\n              if (debug === 'verbose') {\n                // eslint-disable-next-line no-console\n                console.warn(`update ${debugName}`, next)\n              }\n            }\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
-  "mappings": "AAAA,SAAgB,mBAAmB;AAE5B,SAAS,mBACd,QACA,OACA,WACA;AACA,SAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,UAAU,WAAW;AAEvB,wBAAQ,KAAK,UAAU,aAAa,IAAI;AAAA,cAC1C;AAAA,YACF;AACA,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
+  "sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  debug?: boolean | 'verbose',\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            if (process.env.NODE_ENV === 'development') {\n              if (debug === 'verbose') {\n                // eslint-disable-next-line no-console\n                console.log(` \u25B2 setState ${debugName}`, next)\n              }\n            }\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
+  "mappings": "AAAA,SAAgB,mBAAmB;AAE5B,SAAS,mBACd,QACA,OACA,WACA;AACA,SAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,UAAU,WAAW;AAEvB,wBAAQ,IAAI,oBAAe,aAAa,IAAI;AAAA,cAC9C;AAAA,YACF;AACA,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/esm/views/TamaguiProvider.js

@@ -5,7 +5,6 @@ import { ButtonInsideButtonContext } from "../contexts/ButtonInsideButtonContext
 import { TextAncestorContext } from "../contexts/TextAncestorContext";
 import { useMediaListeners } from "../hooks/useMedia";
 import { ThemeProvider } from "./ThemeProvider";
-import { getConfig } from "..";
 function TamaguiProvider({
   children,
   disableInjectCSS,
@@ -13,10 +12,9 @@ function TamaguiProvider({
   ...themePropsProvider
 }) {
   if (isRSC) {
-    const { themes: themes2 } = getConfig();
     return /* @__PURE__ */ jsx("span", {
       style: { display: "contents" },
-      className: `t_${Object.keys(themes2)[0] || "light"}`,
+      className: `t_${Object.keys(config.themes)[0] || "light"}`,
       children
     });
   }
@@ -35,7 +33,6 @@ function TamaguiProvider({
       };
     }, [config, disableInjectCSS]);
   }
-  const { themes } = getConfig();
   return /* @__PURE__ */ jsx(ButtonInsideButtonContext.Provider, {
     value: false,
     children: /* @__PURE__ */ jsx(TextAncestorContext.Provider, {
@@ -44,7 +41,7 @@ function TamaguiProvider({
         themeClassNameOnRoot: config.themeClassNameOnRoot,
         disableRootThemeClass: config.disableRootThemeClass,
         ...themePropsProvider,
-        defaultTheme: themePropsProvider.defaultTheme ?? Object.keys(themes)[0],
+        defaultTheme: themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0],
         children
       })
     })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TamaguiProvider.tsx"],
-  "sourcesContent": ["import { isClient, isRSC, isServer } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\nimport { getConfig } from '..'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    const { themes } = getConfig()\n    return (\n      <span style={{ display: 'contents' }} className={`t_${Object.keys(themes)[0] || 'light'}`}>\n        {children}\n      </span>\n    )\n  }\n\n  if (!isServer) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  const { themes } = getConfig()\n\n  return (\n    <ButtonInsideButtonContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonInsideButtonContext.Provider>\n  )\n}\n"],
-  "mappings": "AAmBM;AAnBN,SAAS,UAAU,OAAO,gBAAgB;AAC1C,YAAY,WAAW;AAEvB,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAEnB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,UAAM,EAAE,QAAAA,QAAO,IAAI,UAAU;AAC7B,WACE,oBAAC;AAAA,MAAK,OAAO,EAAE,SAAS,WAAW;AAAA,MAAG,WAAW,KAAK,OAAO,KAAKA,OAAM,EAAE,MAAM;AAAA,MAC7E;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU;AACb,sBAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,SACE,oBAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,IACzC,8BAAC,oBAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,8BAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,MAAM,EAAE;AAAA,QAEpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
-  "names": ["themes"]
+  "sourcesContent": ["import { isClient, isRSC, isServer } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        className={`t_${Object.keys(config.themes)[0] || 'light'}`}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  if (!isServer) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonInsideButtonContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonInsideButtonContext.Provider>\n  )\n}\n"],
+  "mappings": "AAiBM;AAjBN,SAAS,UAAU,OAAO,gBAAgB;AAC1C,YAAY,WAAW;AAEvB,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,WAAW,KAAK,OAAO,KAAK,OAAO,MAAM,EAAE,MAAM;AAAA,MAEhD;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU;AACb,sBAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,oBAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,IACzC,8BAAC,oBAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,8BAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,QAE3E;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.214",
+  "version": "1.0.1-beta.216",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,23 +28,23 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.214",
-    "@tamagui/constants": "^1.0.1-beta.214",
-    "@tamagui/helpers": "^1.0.1-beta.214",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.214",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.214",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.214",
-    "@tamagui/types-react-native": "^1.0.1-beta.214",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.214",
-    "@tamagui/use-event": "^1.0.1-beta.214",
-    "@tamagui/use-force-update": "^1.0.1-beta.214"
+    "@tamagui/compose-refs": "^1.0.1-beta.216",
+    "@tamagui/constants": "^1.0.1-beta.216",
+    "@tamagui/helpers": "^1.0.1-beta.216",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.216",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.216",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.216",
+    "@tamagui/types-react-native": "^1.0.1-beta.216",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.216",
+    "@tamagui/use-event": "^1.0.1-beta.216",
+    "@tamagui/use-force-update": "^1.0.1-beta.216"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.214",
+    "@tamagui/build": "^1.0.1-beta.216",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",

package/src/constants/isDevTools.ts

@@ -1,6 +1,12 @@
 // for verbose logging outside node/cli
 
-export const isDevTools =
-  process.env.NODE_ENV === 'development'
-    ? new Function('try {return this===window;}catch(e){ return false;}')()
-    : false
+export const isDevTools = (() => {
+  if (process.env.NODE_ENV === 'development') {
+    try {
+      return new Function('try {return this===window;}catch(e){ return false;}')()
+    } catch {
+      //
+    }
+  }
+  return false
+})()

package/src/createComponent.tsx

@@ -3,6 +3,7 @@ import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/cons
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
+  stylePropsTransform,
   stylePropsView,
   validPseudoKeys,
   validStyles,
@@ -36,7 +37,9 @@ import {
 } from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
+import { mergeTransform } from './helpers/mergeTransform'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
+import { pseudoDescriptors } from './helpers/pseudoDescriptors'
 import { useShallowSetState } from './helpers/useShallowSetState'
 import { getRect, measureLayout, useElementLayout } from './hooks/useElementLayout'
 import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
@@ -46,6 +49,7 @@ import {
   SpaceDirection,
   SpaceTokens,
   SpacerProps,
+  SplitStyleState,
   StaticConfig,
   StaticConfigParsed,
   StylableComponent,
@@ -162,16 +166,6 @@ export function createComponent<
       ? `is_${props.componentName}`
       : defaultComponentClassName
 
-    if (debugProp) {
-      // eslint-disable-next-line no-console
-      console.log(`render ${componentName}`)
-    }
-
-    const forceUpdate = useForceUpdate()
-    const theme = useTheme(props.theme, componentName, props, forceUpdate)
-
-    // time`useTheme`
-
     /**
      * Component state for tracking animations, pseudos
      */
@@ -185,14 +179,46 @@ export function createComponent<
     const setState = states[1]
     const setStateShallow = useShallowSetState(setState, debugProp, componentName)
 
-    const shouldSetMounted = needsMount && !state.mounted
+    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
+    // conditional but if ever true stays true
+    const hasEverAnimated = useRef(false)
+    const isAnimated = (() => {
+      const next = !!(useAnimations && props.animation)
+      if (next && !hasEverAnimated.current) {
+        hasEverAnimated.current = true
+      }
+      return next || hasEverAnimated.current
+    })()
+    const isReactNative = Boolean(
+      staticConfig.isReactNative || (isAnimated && tamaguiConfig.animations.isReactNative)
+    )
+
+    if (process.env.NODE_ENV === 'development') {
+      if (props['debug']) {
+        const name = `${
+          componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
+        }`
+        const type = isReactNative ? '(rnw)' : ''
+        const dataIs = propsIn['data-is'] || ''
+        const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
+        // eslint-disable-next-line no-console
+        console.group(`%c ${banner}`, 'background: yellow;')
+        // eslint-disable-next-line no-console
+        console.log(`state`, state)
+      }
+    }
+
+    const forceUpdate = useForceUpdate()
+    const theme = useTheme(props.theme, componentName, props, forceUpdate)
+
+    const shouldSetMounted = needsMount && state.unmounted
     const setMounted = shouldSetMounted
       ? () => {
           // for some reason without some small delay it doesn't animate css
           setTimeout(
             () => {
               setStateShallow({
-                mounted: true,
+                unmounted: false,
               })
             },
             isWeb ? 10 : 0
@@ -201,41 +227,14 @@ export function createComponent<
       : undefined
 
     const shouldAvoidClasses =
-      !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
+      !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
 
     const shouldForcePseudo = !!propsIn.forceStyle
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
-    const splitStyleState =
-      !shouldAvoidClasses && !shouldForcePseudo
-        ? {
-            ...state,
-            hasTextAncestor,
-            dynamicStylesInline: true,
-          }
-        : ({
-            ...state,
-            noClassNames: true,
-            dynamicStylesInline: true,
-            hasTextAncestor,
-            resolveVariablesAs: 'value',
-          } as const)
-
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo
     const languageContext = isRSC ? null : useContext(FontLanguageContext)
-
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
-    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
-
-    // conditional but if ever true stays true
-    const hasEverAnimated = useRef(false)
-    const isAnimated = (() => {
-      const next = !!(useAnimations && props.animation)
-      if (next && !hasEverAnimated.current) {
-        hasEverAnimated.current = true
-      }
-      return next || hasEverAnimated.current
-    })()
-
     const isTaggable = !Component || typeof Component === 'string'
     // default to tag, fallback to component (when both strings)
     const element = isWeb
@@ -255,6 +254,13 @@ export function createComponent<
 
     // time`setupStateConf`
 
+    const splitStyleState: SplitStyleState = {
+      ...state,
+      noClassNames,
+      dynamicStylesInline: noClassNames,
+      hasTextAncestor,
+      resolveVariablesAs: 'value',
+    }
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
@@ -271,9 +277,6 @@ export function createComponent<
     const hostRef = useServerRef<TamaguiElement>(null)
 
     // animation setup
-    const isReactNative = Boolean(
-      staticConfig.isReactNative || (isAnimated && tamaguiConfig.animations.isReactNative)
-    )
     const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating
 
     if (process.env.NODE_ENV === 'development') {
@@ -283,22 +286,15 @@ export function createComponent<
       }
 
       if (debugProp) {
-        const name = `${
-          componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
-        }`
-        const type = isReactNative ? 'rnw' : 'tamagui'
-        const banner = `${name} ${propsIn['data-is'] || ''} ${type}`
         // eslint-disable-next-line no-console
-        console.group(`%c 🐛 ${banner}`, 'background: yellow;')
+        console.groupCollapsed('props')
         // eslint-disable-next-line no-console
-        console.groupCollapsed('initial props/state')
-        // eslint-disable-next-line no-console
-        console.log('propsIn', propsIn, 'turned into', props, 'order', Object.keys(props))
+        console.log('props in', propsIn, 'mapped to', props, 'in order', Object.keys(props))
         // eslint-disable-next-line no-console
         console.log('splitStyles', splitStyles)
         // eslint-disable-next-line no-console
         console.log('className', Object.values(splitStyles.classNames))
-        if (typeof window !== 'undefined') {
+        if (isClient) {
           // eslint-disable-next-line no-console
           console.log('ref', hostRef, '(click to view)')
         }
@@ -320,9 +316,6 @@ export function createComponent<
       mediaKeys,
     } = splitStyles
 
-    const animationFeatureStylesIn = props.animation
-      ? { ...defaultNativeStyle, ...splitStylesStyle }
-      : null
     const propsWithAnimation = props as UseAnimationProps
 
     // once you set animation prop don't remove it, you can set to undefined/false
@@ -336,9 +329,14 @@ export function createComponent<
         hostRef,
         staticConfig,
         getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          // TODO this function can mostly be moved entirely inside getSplitStyles
+          // I think theres bugs in merge(), and we can remove that fn entirely then
+          // also i think we need to merge both the exitVariant AND psuedos.exitStyle right now it chooses one
+
           // we have to merge such that transforms keys all exist
-          const style = animationFeatureStylesIn
+          const animationStyle = { ...defaultNativeStyle, ...splitStylesStyle }
 
+          // allows for enter/exit variants on styled()
           const enterStyle = isEntering
             ? enterVariant && staticConfig.variants?.[enterVariant]['true']
               ? getSubStyle(
@@ -349,8 +347,8 @@ export function createComponent<
                   props,
                   state,
                   tamaguiConfig
-                ) || pseudos.enterStyle
-              : pseudos.enterStyle
+                )
+              : null
             : null
 
           const exitStyle = isExiting
@@ -363,41 +361,18 @@ export function createComponent<
                   props,
                   state,
                   tamaguiConfig
-                ) || pseudos.exitStyle
+                )
               : pseudos.exitStyle
             : null
 
-          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style
-          // no animation will run! this is really confusing. this will look at all variants,
-          // and fill in base styles if they don't exist. eg:
-          // input:
-          //   base: {}
-          //   hoverStyle: { scale: 2 }
-          //   enterStyle: { x: 100 }
-          // output:
-          //   base: { x: 0, scale: 1 }
-          ensureBaseHasDefaults(
-            style,
-            // enterStyle,
-            pseudos.hoverStyle,
-            pseudos.focusStyle,
-            pseudos.pressStyle
-          )
-
-          enterStyle && isEntering && merge(style, enterStyle)
-          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)
-          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)
-          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)
-          exitStyle && isExiting && merge(style, exitStyle)
-
-          if (process.env.NODE_ENV === 'development') {
-            if (debugProp === 'verbose') {
-              // eslint-disable-next-line no-console
-              console.log('animation style', style)
-            }
+          if (isEntering && enterStyle) {
+            merge(animationStyle, enterStyle)
+          }
+          if (isExiting && exitStyle) {
+            merge(animationStyle, exitStyle)
           }
 
-          return style
+          return animationStyle
         },
         //, delay
       })
@@ -628,16 +603,7 @@ export function createComponent<
       }
     } else {
       styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias]
-      if (!animationStyles && initialSplitStyles) {
-        const initPseudos = initialSplitStyles.pseudos
-        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, 'enterStyle')
-        state.hover &&
-          addPseudoToStyles(styles, initPseudos, pseudos, 'hoverStyle', shouldForcePseudo)
-        state.focus &&
-          addPseudoToStyles(styles, initPseudos, pseudos, 'focusStyle', shouldForcePseudo)
-        state.press &&
-          addPseudoToStyles(styles, initPseudos, pseudos, 'pressStyle', shouldForcePseudo)
-      }
+
       // ugly but for now...
       if (shouldForcePseudo) {
         const next = {}
@@ -723,19 +689,14 @@ export function createComponent<
 
     // TODO need to loop active variants and see if they have matchin pseudos and apply as well
     const initialPseudos = initialSplitStyles?.pseudos
-    const attachPress = !!(
-      pseudos?.pressStyle ||
-      initialPseudos?.pressStyle ||
-      onPress ||
-      onPressOut ||
-      onPressIn ||
-      onClick
-    )
+    const runtimePressStyle = noClassNames && (pseudos?.pressStyle || initialPseudos?.pressStyle)
+    const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick)
 
     const isHoverable = isWeb
+    const runtimeHoverStyle = noClassNames && (pseudos?.hoverStyle || initialPseudos.hoverStyle)
     const attachHover =
       isHoverable &&
-      !!((pseudos && pseudos.hoverStyle) || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+      !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
 
     const handlesPressEvents = !isWeb && !asChild
 
@@ -768,7 +729,7 @@ export function createComponent<
                   onMouseUp?.(e)
                 }
               : undefined,
-            ...(isHoverable && {
+            ...(attachHover && {
               onMouseEnter: attachHover
                 ? (e) => {
                     const next: Partial<typeof state> = {}
@@ -894,10 +855,7 @@ export function createComponent<
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
-      const attachFocus = !!(
-        (pseudos && pseudos.focusStyle) ||
-        (initialPseudos && initialPseudos.focusStyle)
-      )
+      const attachFocus = !!(pseudos.focusStyle || (initialPseudos && initialPseudos.focusStyle))
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true })
@@ -909,11 +867,8 @@ export function createComponent<
 
       // use Pressability to get smooth unPress when you press + hold + move out
       // only ever create once, use .configure() to update later
-      const pressability = usePressability(events)
+      const pressability = usePressability(events ? { ...events, hitSlop } : {})
       if (attachPress && events) {
-        if (hitSlop) {
-          viewProps.hitSlop = hitSlop
-        }
         for (const key in pressability) {
           const og = props[key]
           const val = pressability[key]
@@ -989,12 +944,12 @@ export function createComponent<
           press: false,
           pressIn: false,
           focus: false,
-          mounted: false,
+          unmounted: true,
           mediaState: getMediaStateObject(getInitialMediaState()),
         }
         defaultComponentStateMounted = {
           ...defaultComponentState,
-          mounted: true,
+          unmounted: false,
         }
       }
 
@@ -1052,14 +1007,13 @@ export function createComponent<
       staticConfig,
       initialTheme,
       {
-        mounted: true,
+        unmounted: false,
         hover: false,
         press: false,
         pressIn: false,
         focus: false,
         resolveVariablesAs: 'both',
         noClassNames,
-        keepVariantsAsProps: true,
       },
       undefined,
       undefined,
@@ -1071,7 +1025,9 @@ export function createComponent<
     // otherwise it confuses variant functions getting className props
     const [defaults, defaultsClassnames] = mergeProps(
       component.defaultProps as any,
-      initialSplitStyles.viewProps,
+      isWeb
+        ? { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps }
+        : initialSplitStyles.viewProps,
       true
       // conf.inverseShorthands
     )
@@ -1102,6 +1058,17 @@ export function createComponent<
 
     if (Object.keys(defaults).length) {
       tamaguiDefaultProps = defaults
+
+      // temp bugfix, splitStyles isn't returning variables when resolveVariablesAs == 'both'
+      if (!isWeb) {
+        Object.keys(pseudoDescriptors).forEach((k) => {
+          if (ourProps[k]) {
+            // @ts-ignore
+            initialSplitStyles.pseudos[k] = null
+            tamaguiDefaultProps[k] = ourProps[k]
+          }
+        })
+      }
     }
 
     // add debug logs
@@ -1244,7 +1211,6 @@ export function spacedChildren({
   for (const [index, child] of childrenList.entries()) {
     const isEmpty =
       child === null || child === undefined || (Array.isArray(child) && child.length === 0)
-
     // push them all, but wrap some in Fragment
     if (isEmpty || !child || (child['key'] && !isZStack)) {
       final.push(child)
@@ -1255,14 +1221,9 @@ export function spacedChildren({
     }
 
     // first child unspaced avoid insert space
-    if (isUnspaced(child) && index === 0) {
-      continue
-    }
-
+    if (isUnspaced(child) && index === 0) continue
     // no spacing on ZStack
-    if (isZStack) {
-      continue
-    }
+    if (isZStack) continue
 
     const next = childrenList[index + 1]
 
@@ -1330,23 +1291,6 @@ function isUnspaced(child: React.ReactNode) {
   return child?.['type']?.['isVisuallyHidden'] || child?.['type']?.['isUnspaced']
 }
 
-function addPseudoToStyles(
-  styles: any[],
-  initialPseudos: SplitStyleResult['pseudos'],
-  pseudos: any,
-  name: string,
-  force = false
-) {
-  // on web use pseudo object { hoverStyle } to keep specificity with concatClassName
-  const pseudoStyle = pseudos[name]
-  const shouldNestObject = isWeb && name !== 'enterStyle' && name !== 'exitStyle'
-  const defaultPseudoStyle = initialPseudos[name]
-  const style = defaultPseudoStyle ? { ...defaultPseudoStyle, ...pseudoStyle } : pseudoStyle
-  if (style) {
-    styles.push(shouldNestObject && !force ? { [name]: style } : style)
-  }
-}
-
 const DefaultProps = new Map()
 
 function mergeConfigDefaultProps(
@@ -1385,68 +1329,17 @@ function mergeConfigDefaultProps(
   return props
 }
 
-const defaults = {
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  opacity: 1,
-  translateX: 0,
-  translateY: 0,
-  skew: 0,
-  skewX: 0,
-  skewY: 0,
-  scale: 1,
-  rotate: '0deg',
-  rotateY: '0deg',
-  rotateX: '0deg',
-}
-
-function ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {
-  for (const pseudo of pseudos) {
-    if (!pseudo) continue
-    for (const key in pseudo) {
-      const val = pseudo[key]
-      // can we just use merge() here?
-      if (key === 'transform') {
-        if (typeof val === 'string') {
-          continue
-        }
-        for (const t of val) {
-          const tkey = Object.keys(t)[0]
-          const defaultVal = defaults[tkey]
-          const tDefaultVal = { [tkey]: defaultVal } as any
-          if (!base.transform) {
-            base.transform = [tDefaultVal]
-          } else {
-            if (!base.transform.find((x) => x[tkey])) {
-              base.transform.push(tDefaultVal)
-            }
-          }
-        }
-      } else {
-        if (!(key in base)) {
-          base[key] = defaults[key]
-        }
-      }
-    }
-  }
-}
-
+// TODO need to delete existing prop because of weirdness in how we do this
+// real solution is to handle all this in getSplitStyle and have animation drviers
+// return a useAnimationIsExiting() so we can pass that as part of state: { exiting: true }
+// then we can remove this function and the getStyle() altogether
 function merge(base: ViewStyle, next: ViewStyle) {
-  if (!next.transform || !base.transform) {
-    Object.assign(base, next)
-    return
-  }
-  const { transform, ...rest } = next
-  Object.assign(base, rest)
-  for (const t of transform) {
-    const key = Object.keys(t)[0]
-    const existing = base.transform.find((x) => key in x)
-    if (existing) {
-      existing[key] = t[key]
+  for (const key in next) {
+    const val = next[key]
+    if (key in stylePropsTransform) {
+      mergeTransform(base, key, val, true)
     } else {
-      base.transform.push(t)
+      base[key] = val
     }
   }
 }