@tamagui/core 1.0.1-beta.215 → 1.0.1-beta.217

package/dist/esm/hooks/useMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (\n              typeof key === 'string' &&\n              key[0] === '$' &&\n              // dont error on $$typeof\n              key[1] !== '$'\n            ) {\n              throw new Error(`Access mediaState should not use \"$\": ${key}`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  listeners[key] = listeners[key] || new Set()\n  listeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\n// for SSR capture it at time of startup\nlet curState: MediaQueryState\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? curState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  curState = { ...mediaState }\n  initState = curState\n  mediaKeysOrdered = Object.keys(media)\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      curState = { ...mediaState }\n      const cur = listeners[key]\n      if (cur?.size) {\n        cur.forEach((cb) => cb(next))\n      }\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const keys = useSafeRef({} as Record<string, boolean>)\n  const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return getMediaState({ ...mediaState }, keys)\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    updateState()\n    const disposers = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    return () => {\n      disposers.forEach((cb) => cb())\n    }\n  }, [keys.current])\n\n  return state\n}\n\nfunction getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {\n  return new Proxy(state, {\n    get(_, key: string) {\n      if (!keys.current[key]) {\n        keys.current[key] = true\n      }\n      return Reflect.get(state, key)\n    },\n  })\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        if (!media[key.slice(1)]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaKeyImportance(key)\n  if (importancesUsed[key] > importance) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { MutableRefObject, useEffect, useMemo, useState, useSyncExternalStore } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (\n              typeof key === 'string' &&\n              key[0] === '$' &&\n              // dont error on $$typeof\n              key[1] !== '$'\n            ) {\n              throw new Error(`Access mediaState should not use \"$\": ${key}`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  listeners[key] = listeners[key] || new Set()\n  listeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => mediaState\n\n// for SSR capture it at time of startup\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? mediaState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  initState = { ...mediaState }\n  updateCurrentState()\n  mediaKeysOrdered = Object.keys(media)\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      updateCurrentState()\n      const cur = listeners[key]\n      if (cur?.size) {\n        cur.forEach((cb) => cb(next))\n      }\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nconst nextTick = process.nextTick || setImmediate\nconst currentStateListeners = new Set<any>()\nlet isUpdating = false\nfunction updateCurrentState() {\n  if (isUpdating) return\n  isUpdating = true\n  nextTick(() => {\n    currentStateListeners.forEach((cb) => cb(mediaState))\n    isUpdating = false\n  })\n}\nfunction subscribe(subscriber: any) {\n  currentStateListeners.add(subscriber)\n  return () => currentStateListeners.delete(subscriber)\n}\n\ntype MediaKeysState = {\n  [key: string]: any\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const keys = useSafeRef<MediaKeysState>({ prev: initState })\n\n  const state = useSyncExternalStore<MediaQueryState>(\n    subscribe,\n    () => {\n      const { prev, ...curKeys } = keys.current\n      const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k])\n      if (shouldUpdate) {\n        const next = { ...mediaState }\n        keys.current.prev = next\n        return next\n      }\n      return prev\n    },\n    () => initState\n  )\n\n  return useMemo(() => {\n    return new Proxy(state, {\n      get(_, key: string) {\n        if (!keys.current[key]) {\n          keys.current[key] = true\n        }\n        return Reflect.get(state, key)\n      },\n    })\n  }, [state])\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        if (!media[key.slice(1)]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaKeyImportance(key)\n  if (importancesUsed[key] > importance) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
   "names": ["update"]
 }

package/dist/esm/views/ThemeInverse.js

@@ -13,8 +13,7 @@ const ThemeInverse = ({
   useIsomorphicLayoutEffect(() => {
     if (themeName.startsWith("dark")) {
       setName("light");
-    }
-    if (themeName.startsWith("light")) {
+    } else if (themeName.startsWith("light")) {
       setName("dark");
     }
   }, [defaultTheme, themeName]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    }\n    if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": "AA+BS;AA/BT,SAAS,iCAAiC;AAC1C,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    } else if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
+  "mappings": "AA8BS;AA9BT,SAAS,iCAAiC;AAC1C,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.215",
+  "version": "1.0.1-beta.217",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,30 +28,30 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.215",
-    "@tamagui/constants": "^1.0.1-beta.215",
-    "@tamagui/helpers": "^1.0.1-beta.215",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.215",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.215",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.215",
-    "@tamagui/types-react-native": "^1.0.1-beta.215",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.215",
-    "@tamagui/use-event": "^1.0.1-beta.215",
-    "@tamagui/use-force-update": "^1.0.1-beta.215"
+    "@tamagui/compose-refs": "^1.0.1-beta.217",
+    "@tamagui/constants": "^1.0.1-beta.217",
+    "@tamagui/helpers": "^1.0.1-beta.217",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.217",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.217",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.217",
+    "@tamagui/types-react-native": "^1.0.1-beta.217",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.217",
+    "@tamagui/use-event": "^1.0.1-beta.217",
+    "@tamagui/use-force-update": "^1.0.1-beta.217"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.215",
+    "@tamagui/build": "^1.0.1-beta.217",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",
     "csstype": "^3.0.10",
     "esbuild": "^0.15.11",
-    "react": "*",
-    "react-dom": "*",
+    "react": ">=18",
+    "react-dom": ">=18",
     "typescript": "^4.7.4",
     "vitest": "^0.24.3"
   },

package/src/createComponent.tsx

@@ -1,5 +1,5 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
@@ -29,12 +29,7 @@ import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
-import {
-  SplitStyleResult,
-  getSubStyle,
-  insertSplitStyles,
-  useSplitStyles,
-} from './helpers/getSplitStyles'
+import { getSubStyle, useSplitStyles } from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { mergeTransform } from './helpers/mergeTransform'
@@ -45,6 +40,7 @@ import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
 import {
+  DebugProp,
   SpaceDirection,
   SpaceTokens,
   SpacerProps,
@@ -139,7 +135,6 @@ export function createComponent<
   let defaultNativeStyle: any
   let tamaguiDefaultProps: any
   let defaultTag: string | undefined
-  let initialSplitStyles: SplitStyleResult
 
   // see onConfiguredOnce below which attaches a name then to this component
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
@@ -156,7 +151,7 @@ export function createComponent<
 
     // time`mergeProps`
 
-    const debugProp = props['debug']
+    const debugProp = props['debug'] as DebugProp
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
     const componentClassName = props.asChild
@@ -193,7 +188,7 @@ export function createComponent<
     )
 
     if (process.env.NODE_ENV === 'development') {
-      if (props['debug']) {
+      if (debugProp) {
         const name = `${
           componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
         }`
@@ -202,8 +197,18 @@ export function createComponent<
         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)
+        if (!isServer) {
+          // eslint-disable-next-line no-console
+          console.log(`state`, state)
+          // eslint-disable-next-line no-console
+          console.groupCollapsed('props')
+          // eslint-disable-next-line no-console
+          console.log(props)
+          // eslint-disable-next-line no-console
+          console.log('order', Object.keys(props))
+          // eslint-disable-next-line no-console
+          console.groupEnd()
+        }
       }
     }
 
@@ -253,19 +258,18 @@ export function createComponent<
 
     // time`setupStateConf`
 
-    const splitStyleState: SplitStyleState = {
-      ...state,
-      noClassNames,
-      dynamicStylesInline: noClassNames,
-      hasTextAncestor,
-      resolveVariablesAs: 'value',
-    }
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
       theme,
-      splitStyleState,
-      props.asChild ? null : initialSplitStyles,
+      {
+        ...state,
+        noClassNames,
+        dynamicStylesInline: noClassNames,
+        hasTextAncestor,
+        resolveVariablesAs: 'value',
+      },
+      null,
       languageContext || undefined,
       elementType,
       debugProp
@@ -592,7 +596,7 @@ export function createComponent<
       }, [unPress])
     }
 
-    let styles: any[]
+    let styles: Record<string, any>[]
 
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
@@ -606,11 +610,7 @@ export function createComponent<
       // ugly but for now...
       if (shouldForcePseudo) {
         const next = {}
-        for (const style of styles) {
-          if (style) {
-            Object.assign(next, style)
-          }
-        }
+        styles.forEach((style) => Object.assign(next, style))
         // @ts-ignore
         Object.assign(splitStyles.style, next)
       }
@@ -686,16 +686,11 @@ export function createComponent<
       viewProps.style = styles
     }
 
-    // TODO need to loop active variants and see if they have matchin pseudos and apply as well
-    const initialPseudos = initialSplitStyles?.pseudos
-    const runtimePressStyle = noClassNames && (pseudos?.pressStyle || initialPseudos?.pressStyle)
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
     const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick)
-
-    const isHoverable = isWeb
-    const runtimeHoverStyle = noClassNames && (pseudos?.hoverStyle || initialPseudos.hoverStyle)
-    const attachHover =
-      isHoverable &&
-      !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+    const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
+    const isHoverable =
+      isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
 
     const handlesPressEvents = !isWeb && !asChild
 
@@ -705,7 +700,7 @@ export function createComponent<
       ? false
       : Boolean(
           attachPress ||
-            attachHover ||
+            isHoverable ||
             'pressStyle' in props ||
             'onPress' in props ||
             'onPressIn' in props ||
@@ -728,28 +723,28 @@ export function createComponent<
                   onMouseUp?.(e)
                 }
               : undefined,
-            ...(attachHover && {
-              onMouseEnter: attachHover
+            ...(isHoverable && {
+              onMouseEnter: isHoverable
                 ? (e) => {
                     const next: Partial<typeof state> = {}
-                    if (attachHover) {
+                    if (isHoverable) {
                       next.hover = true
                     }
                     if (state.pressIn) {
                       next.press = true
                     }
-                    if (attachHover || state.pressIn) {
+                    if (isHoverable || state.pressIn) {
                       setStateShallow(next)
                     }
                     onHoverIn?.(e)
                     onMouseEnter?.(e)
                   }
                 : undefined,
-              onMouseLeave: attachHover
+              onMouseLeave: isHoverable
                 ? (e) => {
                     const next: Partial<typeof state> = {}
                     mouseUps.add(unPress)
-                    if (attachHover) {
+                    if (isHoverable) {
                       next.hover = false
                     }
                     if (state.pressIn) {
@@ -854,7 +849,7 @@ export function createComponent<
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
-      const attachFocus = !!(pseudos.focusStyle || (initialPseudos && initialPseudos.focusStyle))
+      const attachFocus = !!pseudos.focusStyle
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true })
@@ -916,7 +911,7 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
         }
         // eslint-disable-next-line no-console
         console.groupEnd()
@@ -993,48 +988,22 @@ export function createComponent<
     const debug = defaultPropsIn['debug']
 
     // remove all classNames
-    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {}, true)
+    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {})
 
     if (ourProps.tag) {
       defaultTag = ourProps.tag
     }
 
     const noClassNames = !staticConfig.acceptsClassName
-
-    initialSplitStyles = insertSplitStyles(
-      ourProps,
-      staticConfig,
-      initialTheme,
-      {
-        unmounted: false,
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        resolveVariablesAs: 'both',
-        noClassNames,
-      },
-      undefined,
-      undefined,
-      debug
-    )
+    const { name, variants, defaultVariants, ...restProps } = ourProps
 
     // must preserve prop order
     // leave out className because we handle that already with initialSplitStyles.classNames
     // otherwise it confuses variant functions getting className props
-    const [defaults, defaultsClassnames] = mergeProps(
-      component.defaultProps as any,
-      { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps },
-      true
-      // conf.inverseShorthands
-    )
-
-    // avoid passing className props to variants
-    initialSplitStyles.classNames = {
-      ...defaultsClassnames,
-      ...initialSplitStyles.classNames,
-      ...ourClassNames,
-    }
+    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps as any, {
+      ...defaultVariants,
+      ...restProps,
+    })
 
     defaultNativeStyle = {}
 
@@ -1053,29 +1022,15 @@ export function createComponent<
       }
     }
 
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults
-    }
+    // set to global
+    tamaguiDefaultProps = defaults
 
     // add debug logs
     if (process.env.NODE_ENV === 'development' && debug) {
       if (process.env.IS_STATIC !== 'is_static') {
+        // prettier-ignore
         // eslint-disable-next-line no-console
-        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
-          staticConfig,
-          initialSplitStyles,
-          tamaguiDefaultProps,
-          defaultNativeStyle,
-          defaults,
-          defaultPropsIn,
-          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
-          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
-          ourProps,
-          ourClassNames,
-          defaultsClassnames,
-          defaultTag,
-          noClassNames,
-        })
+        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, { staticConfig, tamaguiDefaultProps, defaultNativeStyle, defaults, defaultPropsIn, defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps), defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]), ourProps, ourClassNames, defaultsClassnames, defaultTag, noClassNames, })
       }
     }
   })
@@ -1197,7 +1152,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)
@@ -1208,14 +1162,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]
 

package/src/createTamagui.ts

@@ -195,8 +195,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     tokensParsed,
     parsed: true,
     getCSS: () => `
-.is_Text .is_Text { display: inline-flex; }
-._dsp_contents { display: contents; }
+.is_Text .is_Text {display:inline-flex;}
+._dsp_contents {display:contents;}
 ${themeConfig.css}
 ${getAllRules().join('\n')}
 `,

package/src/helpers/createPropMapper.ts

@@ -351,6 +351,7 @@ const resolveTokensAndVariants: StyleResolver = (
       }
     }
   }
+
   return res
 }
 

package/src/helpers/getSplitStyles.tsx

@@ -196,21 +196,9 @@ export const getSplitStyles: StyleSplitter = (
   const shouldDoClasses =
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
 
-  let style: ViewStyle = {}
+  const style: ViewStyle = {}
   let flatTransforms: Record<string, any> | undefined
 
-  function mergeStyle(key: string, val: any) {
-    usedKeys[key] = usedKeys[key] || 1
-    if (val && val[0] === '_') {
-      classNames[key] = val
-    } else if (key in stylePropsTransform) {
-      flatTransforms ||= {}
-      flatTransforms[key] = val
-    } else {
-      style[key] = normalizeValueWithProperty(val, key)
-    }
-  }
-
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
@@ -225,6 +213,18 @@ export const getSplitStyles: StyleSplitter = (
     let keyInit = propKeys[i]
     const valInit = props[keyInit]
 
+    if (validStyleProps[keyInit] || keyInit.includes('-')) {
+      if (valInit && valInit[0] === '_') {
+        if (shouldDoClasses) {
+          classNames[keyInit] = valInit
+        } else {
+          style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
+        }
+        usedKeys[keyInit] = 1
+        continue
+      }
+    }
+
     // normalize shorthands up front
     const expandedKey = conf.shorthands[keyInit]
     if (expandedKey) {
@@ -251,6 +251,18 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
+    function mergeStyle(key: string, val: any) {
+      usedKeys[key] = usedKeys[key] || 1
+      if (val && val[0] === '_') {
+        classNames[key] = val
+      } else if (key in stylePropsTransform) {
+        flatTransforms ||= {}
+        flatTransforms[key] = val
+      } else {
+        style[key] = normalizeValueWithProperty(val, key)
+      }
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       /**
        * Copying in the accessibility/prop handling from react-native-web here
@@ -416,6 +428,7 @@ export const getSplitStyles: StyleSplitter = (
           !isValidClassName &&
           keyInit.includes(PROP_SPLIT) &&
           validStyles[keyInit.split(PROP_SPLIT)[0]]
+
         if (isValidClassName || isMediaOrPseudo) {
           usedKeys[keyInit] = 1
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
@@ -479,13 +492,9 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      if (!isServer) {
-        // eslint-disable-next-line no-console
-        console.log('expanded', expanded)
-        // eslint-disable-next-line no-console
-        console.log('usedKeys', usedKeys)
+      if (!isServer && isWeb) {
         // eslint-disable-next-line no-console
-        console.log('current', { ...style })
+        console.log('expanded', expanded, '\nusedKeys', usedKeys, '\ncurrent', { ...style })
       }
       // eslint-disable-next-line no-console
       console.groupEnd()
@@ -677,31 +686,32 @@ export const getSplitStyles: StyleSplitter = (
 
   // add in defaults if not set:
   if (parentSplitStyles) {
-    if (process.env.NODE_ENV === 'development') {
-      if (debug === 'verbose') {
-        // eslint-disable-next-line no-console
-        console.log(`  add in styled() parent styles`, { parentSplitStyles, shouldDoClasses })
-      }
-    }
     if (process.env.TAMAGUI_TARGET === 'web') {
-      for (const key in parentSplitStyles.classNames) {
-        if (key in classNames) continue
-        if (key in style) continue
-        const val = parentSplitStyles.classNames[key]
-        if (!shouldDoClasses) {
-          style[key] = reverseMapClassNameToValue(key, val)
-        } else {
+      if (shouldDoClasses) {
+        for (const key in parentSplitStyles.classNames) {
+          const val = parentSplitStyles.classNames[key]
+          if (key in style || key in classNames) continue
           classNames[key] = val
         }
       }
     }
     if (!shouldDoClasses) {
       for (const key in parentSplitStyles.style) {
-        if (key in classNames) continue
-        if (key in style) continue
+        if (key in classNames || key in style) continue
         style[key] = parentSplitStyles.style[key]
       }
     }
+    if (process.env.NODE_ENV === 'development') {
+      if (debug === 'verbose') {
+        // eslint-disable-next-line no-console
+        console.log(`  add in parent styled()`, {
+          parentSplitStyles,
+          shouldDoClasses,
+          style: { ...style },
+          classNames: { ...classNames },
+        })
+      }
+    }
   }
 
   if (process.env.TAMAGUI_TARGET === 'web') {
@@ -715,9 +725,6 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, atomicStyle)
           mergeClassName(transforms, classNames, key, atomicStyle.identifier)
         }
-        if (!IS_STATIC) {
-          style = emptyObject
-        }
       }
     }