@tamagui/core 1.0.1-beta.93 → 1.0.1-beta.94

package/dist/cjs/hooks/useFeatures.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useFeatures.tsx"],
-  "sourcesContent": ["import React, { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react'\nimport { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  TamaguiInternalConfig,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\nlet tamaguiConfig: TamaguiInternalConfig\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  tamaguiConfig = tamaguiConfig || getConfig()\n\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state,\n                  tamaguiConfig\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/hooks/useTheme.js

@@ -92,7 +92,7 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
       get(_, key) {
         if (!name || key === "__proto__" || typeof key === "symbol") {
           if (key === GetThemeManager) {
-            if (process.env.NODE_ENV === "development" && (props == null ? void 0 : props.debug)) {
+            if (process.env.NODE_ENV === "development" && (props == null ? void 0 : props.debug) && typeof window !== "undefined") {
               console.log(">>", { themeName, didChangeTheme, name, componentName }, themeManager);
             }
             if (!didChangeTheme)

package/dist/cjs/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development' && props?.debug) {\n              console.log('>>', { themeName, didChangeTheme, name, componentName }, themeManager)\n            }\n            if (!didChangeTheme) return null\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (\n              process.env.NODE_ENV === 'development' &&\n              props?.debug &&\n              typeof window !== 'undefined'\n            ) {\n              console.log('>>', { themeName, didChangeTheme, name, componentName }, themeManager)\n            }\n            if (!didChangeTheme) return null\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/index.js

@@ -18,7 +18,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
-  expandStyles: () => import_generateAtomicStyles.expandStyles,
   getConfig: () => import_conf.getConfig,
   getHasConfigured: () => import_conf.getHasConfigured,
   getThemes: () => import_conf.getThemes,
@@ -52,8 +51,8 @@ __reExport(src_exports, require("./helpers/getSplitStyles"), module.exports);
 __reExport(src_exports, require("./helpers/getStylesAtomic"), module.exports);
 __reExport(src_exports, require("./helpers/pseudoDescriptors"), module.exports);
 __reExport(src_exports, require("./helpers/mergeProps"), module.exports);
-var import_generateAtomicStyles = require("./helpers/generateAtomicStyles");
-__reExport(src_exports, require("./helpers/getTextSize"), module.exports);
+__reExport(src_exports, require("./helpers/expandStyles"), module.exports);
+__reExport(src_exports, require("./helpers/getFont"), module.exports);
 __reExport(src_exports, require("./helpers/isObj"), module.exports);
 __reExport(src_exports, require("./helpers/isTamaguiElement"), module.exports);
 __reExport(src_exports, require("./helpers/isTamaguiComponent"), module.exports);
@@ -81,7 +80,6 @@ __reExport(src_exports, require("@tamagui/use-force-update"), module.exports);
 __reExport(src_exports, require("@tamagui/helpers"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  expandStyles,
   getConfig,
   getHasConfigured,
   getThemes,

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport { expandStyles } from './helpers/generateAtomicStyles'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,sBAAd;AACA,wBAAc,8BADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0BAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,yBALd;AAMA,wBAAc,2BANd;AAOA,wBAAc,6BAPd;AAQA,wBAAc,8BARd;AASA,wBAAc,yBATd;AAUA,wBAAc,qBAVd;AAWA,wBAAc,oBAXd;AAcA,kBAAoF;AAEpF,wBAAc,kCAhBd;AAiBA,wBAAc,iCAjBd;AAkBA,wBAAc,4BAlBd;AAoBA,wBAAc,2BApBd;AAqBA,wBAAc,0CArBd;AAsBA,wBAAc,mCAtBd;AAuBA,wBAAc,uCAvBd;AAwBA,wBAAc,4CAxBd;AAyBA,wBAAc,8BAzBd;AA0BA,wBAAc,qCA1Bd;AA2BA,wBAAc,sCA3Bd;AA4BA,wBAAc,wCA5Bd;AA6BA,wBAAc,iCA7Bd;AA8BA,kCAA6B;AAC7B,wBAAc,kCA/Bd;AAgCA,wBAAc,4BAhCd;AAiCA,wBAAc,uCAjCd;AAkCA,wBAAc,yCAlCd;AAmCA,wBAAc,iCAnCd;AAoCA,wBAAc,gCApCd;AAqCA,wBAAc,2CArCd;AAuCA,wBAAc,iDAvCd;AAyCA,wBAAc,gCAzCd;AA0CA,wBAAc,0BA1Cd;AA2CA,wBAAc,iCA3Cd;AA4CA,wBAAc,qCA5Cd;AA6CA,wBAAc,6BA7Cd;AA8CA,wBAAc,iCA9Cd;AA+CA,wBAAc,6BA/Cd;AAgDA,wBAAc,qCAhDd;AAkDA,wBAAc,yBAlDd;AAmDA,wBAAc,0BAnDd;AAoDA,wBAAc,yBApDd;AAqDA,wBAAc,wCArDd;AAsDA,wBAAc,0BAtDd;AAuDA,wBAAc,iCAvDd;AAwDA,wBAAc,kCAxDd;AAyDA,wBAAc,+BAzDd;AA2DA,wBAAc,sCA3Dd;AA4DA,wBAAc,6BA5Dd;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,sBAAd;AACA,wBAAc,8BADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0BAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,yBALd;AAMA,wBAAc,2BANd;AAOA,wBAAc,6BAPd;AAQA,wBAAc,8BARd;AASA,wBAAc,yBATd;AAUA,wBAAc,qBAVd;AAWA,wBAAc,oBAXd;AAcA,kBAAoF;AAEpF,wBAAc,kCAhBd;AAiBA,wBAAc,iCAjBd;AAkBA,wBAAc,4BAlBd;AAoBA,wBAAc,2BApBd;AAqBA,wBAAc,0CArBd;AAsBA,wBAAc,mCAtBd;AAuBA,wBAAc,uCAvBd;AAwBA,wBAAc,4CAxBd;AAyBA,wBAAc,8BAzBd;AA0BA,wBAAc,qCA1Bd;AA2BA,wBAAc,sCA3Bd;AA4BA,wBAAc,wCA5Bd;AA6BA,wBAAc,iCA7Bd;AA8BA,wBAAc,mCA9Bd;AA+BA,wBAAc,8BA/Bd;AAgCA,wBAAc,4BAhCd;AAiCA,wBAAc,uCAjCd;AAkCA,wBAAc,yCAlCd;AAmCA,wBAAc,iCAnCd;AAoCA,wBAAc,gCApCd;AAqCA,wBAAc,2CArCd;AAuCA,wBAAc,iDAvCd;AAyCA,wBAAc,gCAzCd;AA0CA,wBAAc,0BA1Cd;AA2CA,wBAAc,iCA3Cd;AA4CA,wBAAc,qCA5Cd;AA6CA,wBAAc,6BA7Cd;AA8CA,wBAAc,iCA9Cd;AA+CA,wBAAc,6BA/Cd;AAgDA,wBAAc,qCAhDd;AAkDA,wBAAc,yBAlDd;AAmDA,wBAAc,0BAnDd;AAoDA,wBAAc,yBApDd;AAqDA,wBAAc,wCArDd;AAsDA,wBAAc,0BAtDd;AAuDA,wBAAc,iCAvDd;AAwDA,wBAAc,kCAxDd;AAyDA,wBAAc,+BAzDd;AA2DA,wBAAc,sCA3Dd;AA4DA,wBAAc,6BA5Dd;",
   "names": []
 }

package/dist/cjs/static.js

@@ -32,7 +32,7 @@ __reExport(static_exports, require("./hooks/useMedia"), module.exports);
 __reExport(static_exports, require("./hooks/useTheme"), module.exports);
 __reExport(static_exports, require("./helpers/isObj"), module.exports);
 __reExport(static_exports, require("./helpers/getStylesAtomic"), module.exports);
-__reExport(static_exports, require("./helpers/generateAtomicStyles"), module.exports);
+__reExport(static_exports, require("./helpers/expandStyles"), module.exports);
 __reExport(static_exports, require("./helpers/pseudoDescriptors"), module.exports);
 __reExport(static_exports, require("./helpers/proxyThemeVariables"), module.exports);
 __reExport(static_exports, require("./helpers/getSplitStyles"), module.exports);

package/dist/cjs/static.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/static.ts"],
-  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/generateAtomicStyles'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './types'\n\n// node only rnw export\nconst interopRequire = (x: any) => ('default' in x ? x.default : x)\nexport const rnw: any = interopRequire(require('react-native-web/dist/cjs/tamagui-exports'))\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAc,qBAFd;AAGA,2BAAc,8BAHd;AAIA,2BAAc,yBAJd;AAKA,2BAAc,2BALd;AAMA,2BAAc,4BANd;AAOA,2BAAc,6BAPd;AAQA,2BAAc,kCARd;AAUA,2BAAc,6BAVd;AAWA,2BAAc,6BAXd;AAaA,2BAAc,4BAbd;AAcA,2BAAc,sCAdd;AAeA,2BAAc,2CAfd;AAgBA,2BAAc,wCAhBd;AAiBA,2BAAc,0CAjBd;AAkBA,2BAAc,qCAlBd;AAmBA,2BAAc,6BAnBd;AAqBA,2BAAc,oBArBd;AAwBA,MAAM,iBAAiB,CAAC,MAAY,aAAa,IAAI,EAAE,UAAU;AAC1D,MAAM,MAAW,eAAe,QAAQ,2CAA2C,CAAC;",
+  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/expandStyles'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './types'\n\n// node only rnw export\nconst interopRequire = (x: any) => ('default' in x ? x.default : x)\nexport const rnw: any = interopRequire(require('react-native-web/dist/cjs/tamagui-exports'))\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAc,qBAFd;AAGA,2BAAc,8BAHd;AAIA,2BAAc,yBAJd;AAKA,2BAAc,2BALd;AAMA,2BAAc,4BANd;AAOA,2BAAc,6BAPd;AAQA,2BAAc,kCARd;AAUA,2BAAc,6BAVd;AAWA,2BAAc,6BAXd;AAaA,2BAAc,4BAbd;AAcA,2BAAc,sCAdd;AAeA,2BAAc,mCAfd;AAgBA,2BAAc,wCAhBd;AAiBA,2BAAc,0CAjBd;AAkBA,2BAAc,qCAlBd;AAmBA,2BAAc,6BAnBd;AAqBA,2BAAc,oBArBd;AAwBA,MAAM,iBAAiB,CAAC,MAAY,aAAa,IAAI,EAAE,UAAU;AAC1D,MAAM,MAAW,eAAe,QAAQ,2CAA2C,CAAC;",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -121,17 +121,17 @@ function createComponent(configIn, ParentComponent) {
     } else {
       props = propsIn;
     }
+    const hostRef = useRef(null);
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("\u26A0\uFE0F", componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", {
-          propsIn,
-          props,
-          ordered: Object.keys(props)
-        });
+        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        const banner = `${name} ${propsIn["data-is"] || ""}`;
+        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
+        console.log("props", propsIn);
+        console.log("ref", hostRef);
         if (props["debug"] === "break") {
           debugger;
         }
@@ -164,7 +164,6 @@ function createComponent(configIn, ParentComponent) {
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
-    const hostRef = useRef(null);
     const animationFeatureStylesIn = props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null;
     const features = useFeatures(props, {
       forceUpdate,
@@ -234,7 +233,7 @@ function createComponent(configIn, ParentComponent) {
     const isStringElement = typeof elementType === "string";
     const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
     let viewProps;
-    if (isWeb && !staticConfig.isReactNativeWeb) {
+    if (process.env.TAMAGUI_TARGET === "web" && !staticConfig.isReactNativeWeb) {
       const _c = nonTamaguiProps, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -378,36 +377,28 @@ function createComponent(configIn, ParentComponent) {
       ]);
       viewProps = webProps;
       assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
-      if (!asChild) {
-        rnw.useElementLayout(hostRef, onLayout);
-        rnw.useResponderEvents(hostRef, {
-          onMoveShouldSetResponder,
-          onMoveShouldSetResponderCapture,
-          onResponderEnd,
-          onResponderGrant,
-          onResponderMove,
-          onResponderReject,
-          onResponderRelease,
-          onResponderStart,
-          onResponderTerminate,
-          onResponderTerminationRequest,
-          onScrollShouldSetResponder,
-          onScrollShouldSetResponderCapture,
-          onSelectionChangeShouldSetResponder,
-          onSelectionChangeShouldSetResponderCapture,
-          onStartShouldSetResponder,
-          onStartShouldSetResponderCapture
-        });
-      }
+      rnw.useElementLayout(hostRef, onLayout);
+      rnw.useResponderEvents(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture
+      });
       const platformMethodsRef = rnw.usePlatformMethods(viewProps);
       const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      if (!isAnimated) {
-        viewProps.ref = setRef;
-      } else {
-        if (forwardedRef) {
-          viewProps.ref = forwardedRef;
-        }
-      }
+      viewProps.ref = setRef;
       if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
@@ -443,10 +434,7 @@ function createComponent(configIn, ParentComponent) {
         viewProps.ref = forwardedRef;
       }
     }
-    if (process.env.NODE_ENV === "development" && props["debug"]) {
-      console.log("viewProps", elementType, viewProps.role, viewProps.tabIndex);
-    }
-    if (!isText && isWeb) {
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
           console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
@@ -501,7 +489,7 @@ function createComponent(configIn, ParentComponent) {
         Object.assign(splitStyles.style, next);
       }
     }
-    if (isWeb) {
+    if (process.env.TAMAGUI_TARGET === "web") {
       const fontFamilyName = isText ? props.fontFamily || staticConfig.defaultProps.fontFamily : null;
       const fontFamily = fontFamilyName && fontFamilyName[0] === "$" ? fontFamilyName.slice(1) : null;
       const classList = [
@@ -512,9 +500,6 @@ function createComponent(configIn, ParentComponent) {
       ];
       const className = classList.join(" ");
       const style2 = animationStyles ?? splitStyles.style;
-      if (process.env.NODE_ENV === "development" && props["debug"]) {
-        console.log("  \xBB className", { splitStyles, style: style2, isStringElement, pseudos, state, classNames, propsClassName: props.className, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
-      }
       const isAnimatedReactNativeWeb = props.animation && avoidClasses;
       if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
         viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
@@ -696,7 +681,7 @@ function createComponent(configIn, ParentComponent) {
       }
     }
     content = createElement(elementType, viewProps, childEls);
-    if (isWeb) {
+    if (process.env.TAMAGUI_TARGET === "web") {
       const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
       const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
       const shouldWrapWithHover = events && attachHover;
@@ -716,7 +701,15 @@ function createComponent(configIn, ParentComponent) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("\u2B50\uFE0F", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), elementType, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo } : null));
+        console.groupCollapsed(elementType, `props out`, viewProps);
+        for (const key in viewProps) {
+          console.log(key, viewProps[key]);
+        }
+        console.groupEnd();
+        if (typeof window !== "undefined") {
+          console.log(__spreadValues({ state, viewProps, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, 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.groupEnd();
       }
     }
     if (features.elements.length) {
@@ -759,9 +752,6 @@ function createComponent(configIn, ParentComponent) {
       keepVariantsAsProps: true
     }, void 0, debug);
     const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
-    if (debug) {
-      console.warn(defaults, component.defaultProps, initialSplitStyles);
-    }
     initialSplitStyles.classNames = __spreadValues(__spreadValues(__spreadValues({}, parentClassNames), defaultsClassnames), initialSplitStyles.classNames);
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;