@tamagui/core 1.0.1-beta.167 → 1.0.1-beta.169

package/dist/esm/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 '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface 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\ninterface 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  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\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  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[getConfig().defaultTheme || 'light']\n  }\n\n  return useMemo(() => {\n    return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n  }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n  theme: any,\n  name: string,\n  className?: string,\n  themeManager?: ThemeManager | null,\n  state?: React.MutableRefObject<UseThemeState>,\n  debugProp?: boolean | 'verbose'\n) {\n  return new Proxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      if (state) {\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            // eslint-disable-next-line no-console\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  if (isRSC) {\n    const config = getConfig()\n    return config.defaultTheme || 'light'\n  }\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 activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeObject>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeObject | null\n  className?: string\n} => {\n  const { themes } = getConfig()\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n  })\n\n  if (!isSSR) {\n    useLayoutEffect(() => {\n      themeManager.update(next)\n\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\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 '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface 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\ninterface 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): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\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  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[getConfig().defaultTheme || 'light']\n  }\n\n  return useMemo(() => {\n    return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n  }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n  theme: any,\n  name: string,\n  className?: string,\n  themeManager?: ThemeManager | null,\n  state?: React.MutableRefObject<UseThemeState>,\n  debugProp?: boolean | 'verbose'\n) {\n  return new Proxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      if (state) {\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            // eslint-disable-next-line no-console\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  if (isRSC) {\n    const config = getConfig()\n    return config.defaultTheme || 'light'\n  }\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 activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const { themes } = getConfig()\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n  })\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": ["name", "parentManager", "next"]
 }

package/dist/esm/styled.js

@@ -12,7 +12,13 @@ function styled(Component, options, staticExtractionOptions) {
       }
     }
     if (options) {
-      const { variants, name, defaultVariants, ...defaultProps } = options;
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options;
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
@@ -22,11 +28,6 @@ function styled(Component, options, staticExtractionOptions) {
           RNComponents.add(Component);
           isReactNativeWeb = true;
         } else {
-          if (process.env.NODE_ENV === "development") {
-            console.warn(
-              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`
-            );
-          }
         }
       }
       const reactNativeWebComponent = isReactNativeWeb ? (parentStaticConfig == null ? void 0 : parentStaticConfig.reactNativeWebComponent) || Component : null;
@@ -41,6 +42,7 @@ function styled(Component, options, staticExtractionOptions) {
       const isText = Boolean(
         isInput || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText) || Comp === Text
       );
+      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb);
       const conf = {
         ...staticExtractionOptions,
         ...!isTamagui && {
@@ -55,9 +57,10 @@ function styled(Component, options, staticExtractionOptions) {
         reactNativeWebComponent,
         isInput,
         isText,
-        isImage
+        isImage,
+        acceptsClassName
       };
-      if (defaultProps.children) {
+      if (defaultProps.children || !acceptsClassName) {
         conf.neverFlatten = true;
       }
       return conf;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { TamaguiReactElement, isTamaguiElement } from './helpers/isTamaguiElement'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\n// can't infer from styled(<YStack />) which would be nice\n// * excessively deep type instantiation\n\ntype GetBaseProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetBaseProps<A['type']> :\n  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetVariantProps<A['type']>\n  //   :\n  A extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // * excessively deep type instantiation\n  // if (isTamaguiElement(Component)) {\n  //   const props = Component.props\n  //   // @ts-ignore\n  //   Component = Component.type\n  //   options = options ? { ...props, ...options } : props\n  // }\n\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n    if (process.env.NODE_ENV === 'development') {\n      if (parentStaticConfig?.isHOC) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`\n        )\n      }\n    }\n\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)\n      if (!('staticConfig' in Component) && !isReactNativeWeb) {\n        if (RNComponents.has(Component['displayName'])) {\n          RNComponents.add(Component)\n          isReactNativeWeb = true\n        } else {\n          if (process.env.NODE_ENV === 'development') {\n            // eslint-disable-next-line no-console\n            console.warn(\n              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`\n            )\n          }\n        }\n      }\n      const reactNativeWebComponent = isReactNativeWeb\n        ? parentStaticConfig?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && !!parentStaticConfig\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = Boolean(\n        staticExtractionOptions?.isImage || parentStaticConfig?.isImage || Comp === Image\n      )\n      const isInput = Boolean(\n        staticExtractionOptions?.isInput || parentStaticConfig?.isInput || Comp === TextInput\n      )\n      const isText = Boolean(\n        isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text\n      )\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)\n      if (defaultProps.children) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {}\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AAAA,SAAS,OAAO,MAAM,iBAAiB;AAEvC,SAAS,uBAAuB;AAEhC,SAAS,oBAAoB;AAmCtB,SAAS,OAId,WAEA,SAMA,yBACA;AASA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,yDAAoB,OAAO;AAE7B,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,aAAa,IAAI;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,UAAI,oBAAmB,yDAAoB,qBAAoB,aAAa,IAAI,SAAS;AAEzF,UAAI,EAAE,kBAAkB,cAAc,CAAC,kBAAkB;AACvD,YAAI,aAAa,IAAI,UAAU,cAAc,GAAG;AAC9C,uBAAa,IAAI,SAAS;AAC1B,6BAAmB;AAAA,QACrB,OAAO;AACL,cAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,oBAAQ;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,YAAM,0BAA0B,oBAC5B,yDAAoB,4BAA2B,YAC/C;AACJ,YAAM,YAAY,CAAC,oBAAoB,CAAC,CAAC;AACzC,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU;AAAA,SACd,mEAAyB,aAAW,yDAAoB,YAAW,SAAS;AAAA,MAC9E;AACA,YAAM,UAAU;AAAA,SACd,mEAAyB,aAAW,yDAAoB,YAAW,SAAS;AAAA,MAC9E;AACA,YAAM,SAAS;AAAA,QACb,YAAW,mEAAyB,YAAU,yDAAoB,WAAU,SAAS;AAAA,MACvF;AAEA,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAGA,UAAI,aAAa,UAAU;AACzB,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA2B9D,SAAO;AAMT;",
+  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { TamaguiReactElement, isTamaguiElement } from './helpers/isTamaguiElement'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\n// can't infer from styled(<YStack />) which would be nice\n// * excessively deep type instantiation\n\ntype GetBaseProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetBaseProps<A['type']> :\n  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetVariantProps<A['type']>\n  //   :\n  A extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // * excessively deep type instantiation\n  // if (isTamaguiElement(Component)) {\n  //   const props = Component.props\n  //   // @ts-ignore\n  //   Component = Component.type\n  //   options = options ? { ...props, ...options } : props\n  // }\n\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n    if (process.env.NODE_ENV === 'development') {\n      if (parentStaticConfig?.isHOC) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`\n        )\n      }\n    }\n\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)\n      if (!('staticConfig' in Component) && !isReactNativeWeb) {\n        if (RNComponents.has(Component['displayName'])) {\n          RNComponents.add(Component)\n          isReactNativeWeb = true\n        } else {\n          // assuming some sort of non-tamagui non-rn view, will always use style={}\n        }\n      }\n      const reactNativeWebComponent = isReactNativeWeb\n        ? parentStaticConfig?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && !!parentStaticConfig\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = Boolean(\n        staticExtractionOptions?.isImage || parentStaticConfig?.isImage || Comp === Image\n      )\n      const isInput = Boolean(\n        staticExtractionOptions?.isInput || parentStaticConfig?.isInput || Comp === TextInput\n      )\n      const isText = Boolean(\n        isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text\n      )\n\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n        acceptsClassName,\n      }\n\n      // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {}\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,OAAO,MAAM,iBAAiB;AAEvC,SAAS,uBAAuB;AAEhC,SAAS,oBAAoB;AAmCtB,SAAS,OAId,WAEA,SAOA,yBACA;AASA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,yDAAoB,OAAO;AAE7B,gBAAQ;AAAA,UACN;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,WACf;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,UAAI,oBAAmB,yDAAoB,qBAAoB,aAAa,IAAI,SAAS;AAEzF,UAAI,EAAE,kBAAkB,cAAc,CAAC,kBAAkB;AACvD,YAAI,aAAa,IAAI,UAAU,cAAc,GAAG;AAC9C,uBAAa,IAAI,SAAS;AAC1B,6BAAmB;AAAA,QACrB,OAAO;AAAA,QAEP;AAAA,MACF;AACA,YAAM,0BAA0B,oBAC5B,yDAAoB,4BAA2B,YAC/C;AACJ,YAAM,YAAY,CAAC,oBAAoB,CAAC,CAAC;AACzC,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU;AAAA,SACd,mEAAyB,aAAW,yDAAoB,YAAW,SAAS;AAAA,MAC9E;AACA,YAAM,UAAU;AAAA,SACd,mEAAyB,aAAW,yDAAoB,YAAW,SAAS;AAAA,MAC9E;AACA,YAAM,SAAS;AAAA,QACb,YAAW,mEAAyB,YAAU,yDAAoB,WAAU,SAAS;AAAA,MACvF;AAEA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAIA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA2B9D,SAAO;AAMT;",
   "names": []
 }

package/dist/esm/updateTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/updateTheme.ts"],
-  "sourcesContent": ["import { addTheme } from './addTheme'\nimport { activeThemeManagers } from './hooks/useTheme'\nimport { ThemeObject } from './types'\n\nexport function updateTheme({ name, theme }: { name: string; theme: ThemeObject }) {\n  const next = addTheme({ name, theme, insertCSS: true, update: true })\n\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    activeThemeManagers.forEach((manager) => {\n      if (manager.name === name) {\n        manager.update(\n          {\n            name,\n            theme: next.theme,\n          },\n          true\n        )\n      }\n    })\n  }\n\n  return next\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAG7B,SAAS,YAAY,EAAE,MAAM,MAAM,GAAyC;AACjF,QAAM,OAAO,SAAS,EAAE,MAAM,OAAO,WAAW,MAAM,QAAQ,KAAK,CAAC;AAEpE,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,wBAAoB,QAAQ,CAAC,YAAY;AACvC,UAAI,QAAQ,SAAS,MAAM;AACzB,gBAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,OAAO,KAAK;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { addTheme } from './addTheme'\nimport { activeThemeManagers } from './hooks/useTheme'\nimport { ThemeDefinition } from './types'\n\nexport function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {\n  const next = addTheme({ name, theme, insertCSS: true, update: true })\n\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    activeThemeManagers.forEach((manager) => {\n      if (manager.name === name) {\n        manager.update(\n          {\n            name,\n            theme: next.theme,\n          },\n          true\n        )\n      }\n    })\n  }\n\n  return next\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAG7B,SAAS,YAAY,EAAE,MAAM,MAAM,GAA6C;AACrF,QAAM,OAAO,SAAS,EAAE,MAAM,OAAO,WAAW,MAAM,QAAQ,KAAK,CAAC;AAEpE,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,wBAAoB,QAAQ,CAAC,YAAY;AACvC,UAAI,QAAQ,SAAS,MAAM;AACzB,gBAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,OAAO,KAAK;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/TamaguiProvider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { isClient, isRSC, isSSR } from "../constants/platform";
+import { isClient, isRSC, isServer } from "../constants/platform";
 import { ButtonInsideButtonContext } from "../contexts/ButtonInsideButtonContext";
 import { TextAncestorProvider } from "../contexts/TextAncestorContext";
 import { useMediaQueryListeners } from "../hooks/useMedia";
@@ -18,8 +18,8 @@ function TamaguiProvider({
       children
     });
   }
-  if (!isSSR) {
-    useMediaQueryListeners();
+  if (!isServer) {
+    useMediaQueryListeners(config);
   }
   if (isClient) {
     React.useLayoutEffect(() => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TamaguiProvider.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport * as React from 'react'\n\nimport { isClient, isRSC, isSSR } from '../constants/platform'\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TextAncestorProvider } from '../contexts/TextAncestorContext'\nimport { useMediaQueryListeners } 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 style={{ display: 'contents' }} className={`t_${config.defaultTheme || 'light'}`}>\n        {children}\n      </span>\n    )\n  }\n\n  if (!isSSR) {\n    useMediaQueryListeners()\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      <TextAncestorProvider>\n        <ThemeProvider\n          defaultTheme={config.defaultTheme || 'light'}\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorProvider>\n    </ButtonInsideButtonContext.Provider>\n  )\n}\n"],
-  "mappings": "AAkBM;AAjBN,YAAY,WAAW;AAEvB,SAAS,UAAU,OAAO,aAAa;AACvC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AAEvC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MAAK,OAAO,EAAE,SAAS,WAAW;AAAA,MAAG,WAAW,KAAK,OAAO,gBAAgB;AAAA,MAC1E;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,OAAO;AACV,2BAAuB;AAAA,EACzB;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;AAAA,MACC,8BAAC;AAAA,QACC,cAAc,OAAO,gBAAgB;AAAA,QACrC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QAEH;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react'\n\nimport { isClient, isRSC, isServer } from '../constants/platform'\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TextAncestorProvider } from '../contexts/TextAncestorContext'\nimport { useMediaQueryListeners } 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 style={{ display: 'contents' }} className={`t_${config.defaultTheme || 'light'}`}>\n        {children}\n      </span>\n    )\n  }\n\n  if (!isServer) {\n    useMediaQueryListeners(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      <TextAncestorProvider>\n        <ThemeProvider\n          defaultTheme={config.defaultTheme || 'light'}\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorProvider>\n    </ButtonInsideButtonContext.Provider>\n  )\n}\n"],
+  "mappings": "AAiBM;AAjBN,YAAY,WAAW;AAEvB,SAAS,UAAU,OAAO,gBAAgB;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AAEvC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MAAK,OAAO,EAAE,SAAS,WAAW;AAAA,MAAG,WAAW,KAAK,OAAO,gBAAgB;AAAA,MAC1E;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU;AACb,2BAAuB,MAAM;AAAA,EAC/B;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;AAAA,MACC,8BAAC;AAAA,QACC,cAAc,OAAO,gBAAgB;AAAA,QACrC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QAEH;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.167",
+  "version": "1.0.1-beta.169",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,14 +28,14 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.167",
-    "@tamagui/helpers": "^1.0.1-beta.167",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.167",
-    "@tamagui/rnw": "^1.0.1-beta.167",
-    "@tamagui/rnw-lite": "^1.0.1-beta.167",
-    "@tamagui/use-debounce": "^1.0.1-beta.167",
-    "@tamagui/use-event": "^1.0.1-beta.167",
-    "@tamagui/use-force-update": "^1.0.1-beta.167",
+    "@tamagui/compose-refs": "^1.0.1-beta.169",
+    "@tamagui/helpers": "^1.0.1-beta.169",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.169",
+    "@tamagui/rnw": "^1.0.1-beta.169",
+    "@tamagui/rnw-lite": "^1.0.1-beta.169",
+    "@tamagui/use-debounce": "^1.0.1-beta.169",
+    "@tamagui/use-event": "^1.0.1-beta.169",
+    "@tamagui/use-force-update": "^1.0.1-beta.169",
     "expo-screen-orientation": "^4.3.0",
     "hyphenate-style-name": "^1.0.4"
   },
@@ -44,7 +44,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.167",
+    "@tamagui/build": "^1.0.1-beta.169",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",
     "esbuild": "^0.15.6",

package/src/addTheme.ts

@@ -2,7 +2,7 @@ import { getConfig, updateConfig } from './config'
 import { isWeb } from './constants/platform'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
-import { ThemeObject } from './types'
+import { ThemeDefinition, ThemeParsed } from './types'
 
 export function addTheme({
   name: themeName,
@@ -11,7 +11,7 @@ export function addTheme({
   update,
 }: {
   name: string
-  theme: ThemeObject
+  theme: ThemeDefinition
   insertCSS?: boolean
   update?: boolean
 }) {
@@ -25,7 +25,7 @@ export function addTheme({
     }
   }
 
-  const theme = { ...themeIn }
+  const theme = { ...themeIn } as ThemeParsed
   for (const key in theme) {
     ensureThemeVariable(theme, key)
   }

package/src/config.ts

@@ -1,4 +1,4 @@
-import { ConfigListener, TamaguiInternalConfig } from './types'
+import { ConfigListener, TamaguiInternalConfig, ThemeParsed } from './types'
 
 let conf: TamaguiInternalConfig | null
 

package/src/constants/platform.native.ts

@@ -5,7 +5,7 @@ export const isAndroid = Platform?.OS === 'android'
 export const isIOS = Platform?.OS === 'ios'
 export const isWeb = false
 export const isWindowDefined = false
-export const isSSR = false
+export const isServer = false
 export const isClient = false
 export const isRSC = false
 export const useIsomorphicLayoutEffect = useLayoutEffect

package/src/constants/platform.ts

@@ -5,7 +5,7 @@ export const isAndroid = Platform?.OS === 'android'
 export const isIOS = Platform?.OS === 'ios'
 export const isWeb = process.env.TAMAGUI_TARGET === 'web'
 export const isWindowDefined = typeof window !== 'undefined'
-export const isSSR = isWeb && !isWindowDefined
+export const isServer = isWeb && !isWindowDefined
 export const isClient = isWeb && isWindowDefined
 
 // may want to move to VITE_RSC_BUILD
@@ -19,7 +19,7 @@ export const isRSC = process.env.ENABLE_RSC
   : false
 
 const idFn = () => {}
-export const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect
+export const useIsomorphicLayoutEffect = isRSC ? idFn : isServer ? useEffect : useLayoutEffect
 export const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')
 export const isWebTouchable = isClient && 'ontouchstart' in window
 export const isTouchable = !isWeb || isWebTouchable

package/src/createComponent.tsx

@@ -21,6 +21,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
 } from 'react'
 import { Text, View, ViewStyle } from 'react-native'
 
@@ -42,7 +43,11 @@ import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
-import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './hooks/useMedia'
+import {
+  addMediaQueryListener,
+  getInitialMediaState,
+  removeMediaQueryListener,
+} from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
@@ -67,16 +72,7 @@ import { wrapThemeManagerContext } from './views/Theme'
 
 React['keep']
 
-const defaultComponentState: TamaguiComponentState = Object.freeze({
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  // only used by enterStyle
-  mounted: false,
-  animation: null,
-})
-
+let defaultComponentState: TamaguiComponentState | null = null
 export const mouseUps = new Set<Function>()
 if (typeof document !== 'undefined') {
   const cancelTouches = () => {
@@ -134,6 +130,7 @@ export function createComponent<
     }
 
     const debugProp = props['debug']
+
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
     const componentClassName = props.asChild
@@ -146,10 +143,10 @@ export function createComponent<
     config = config || getConfig()
     const theme = useTheme(props.theme, componentName, props, forceUpdate)
 
-    const states = useServerState<TamaguiComponentState>(defaultComponentState)
+    const states = useServerState<TamaguiComponentState>(defaultComponentState!)
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0]
 
-    const shouldAvoidClasses = !!(props.animation && avoidClasses)
+    const shouldAvoidClasses = !!(props.animation && avoidClasses) || !staticConfig.acceptsClassName
     const shouldForcePseudo = !!propsIn.forceStyle
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
     const splitStyleState =
@@ -198,6 +195,8 @@ export function createComponent<
         console.log('props', propsIn)
         // 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') {
           // eslint-disable-next-line no-console
           console.log('ref', hostRef, '(click to view)')
@@ -215,14 +214,29 @@ export function createComponent<
 
     // media queries
     useIsomorphicLayoutEffect(() => {
-      for (const key of mediaKeys) {
-        addMediaQueryListener(key, forceUpdate)
+      if (!mediaKeys.length) {
+        return
       }
-      return () => {
-        for (const key of mediaKeys) {
-          removeMediaQueryListener(key, forceUpdate)
-        }
+      const disposers: any[] = []
+      for (const key of mediaKeys) {
+        disposers.push(
+          addMediaQueryListener(key, (next: boolean) => {
+            setState((prev) => {
+              if (prev.mediaState![key] !== next) {
+                return {
+                  ...prev,
+                  mediaState: {
+                    ...prev.mediaState,
+                    [key]: next,
+                  },
+                }
+              }
+              return prev
+            })
+          })
+        )
       }
+      return () => {}
     }, [mediaKeys.join(',')])
 
     // animations
@@ -872,9 +886,9 @@ export function createComponent<
     let space = spaceProp
 
     // find space by media query
-    if (mediaKeys.length) {
-      for (const key in mediaState) {
-        if (!mediaState[key]) continue
+    if (state.mediaState && mediaKeys.length) {
+      for (const key in state.mediaState) {
+        if (!state.mediaState[key]) continue
         if (props[key] && props[key].space !== undefined) {
           space = props[key].space
         }
@@ -1045,6 +1059,19 @@ export function createComponent<
   // Once configuration is run and all components are registered
   // get default props + className and analyze styles
   onConfiguredOnce((conf) => {
+    if (!defaultComponentState) {
+      defaultComponentState = Object.freeze({
+        hover: false,
+        press: false,
+        pressIn: false,
+        focus: false,
+        // only used by enterStyle
+        mounted: false,
+        animation: null,
+        mediaState: getInitialMediaState(),
+      })
+    }
+
     // in static mode we just use these to lookup configuration
     // ... we likely want this? need to test
     if (process.env.IS_STATIC === 'is_static') return
@@ -1084,7 +1111,7 @@ export function createComponent<
       )
     }
 
-    const debug = true ? defaultPropsIn['debug'] : false
+    const debug = defaultPropsIn['debug']
 
     if (process.env.NODE_ENV === 'development' && debug === 'break') {
       // eslint-disable-next-line no-debugger
@@ -1105,6 +1132,7 @@ export function createComponent<
         pressIn: false,
         focus: false,
         resolveVariablesAs: 'both',
+        noClassNames: !staticConfig.acceptsClassName,
         keepVariantsAsProps: true,
       },
       undefined,

package/src/createTamagui.ts

@@ -12,7 +12,7 @@ import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
 import { Tamagui } from './Tamagui'
-import { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig, ThemeObject } from './types'
+import { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig, ThemeParsed } from './types'
 
 // config is re-run by the @tamagui/static, dont double validate
 const createdConfigs = new WeakMap<any, boolean>()
@@ -36,11 +36,6 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
   }
 
-  configureMedia({
-    queries: configIn.media as any,
-    defaultActive: configIn.mediaQueryDefaultActive,
-  })
-
   const fontTokens = Object.fromEntries(
     Object.entries(configIn.fonts!).map(([k, v]) => {
       return [k, createVariables(v, 'f', true)]
@@ -107,16 +102,16 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     // dedupe themes to avoid duplicate CSS generation
     type DedupedTheme = {
       names: string[]
-      theme: ThemeObject
+      theme: ThemeParsed
     }
     const dedupedThemes: {
       [key: string]: DedupedTheme
     } = {}
-    const existing = new WeakMap<ThemeObject, DedupedTheme>()
+    const existing = new WeakMap<ThemeParsed, DedupedTheme>()
 
     // first, de-dupe and parse them
     for (const themeName in themes) {
-      const rawTheme = themes[themeName]
+      const rawTheme = themes[themeName] as ThemeParsed
 
       // if existing, avoid
       if (existing.has(rawTheme)) {
@@ -167,6 +162,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     const css = cssRuleSets.join('\n')
 
     return {
+      // could improve types but we do ensureThemeVariable so its accurate
       themes,
       cssRuleSets,
       css,
@@ -193,7 +189,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     inverseShorthands: shorthands
       ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))
       : {},
-    themes: themeConfig.themes,
+    themes: themeConfig.themes as any,
     fontsParsed,
     themeConfig,
     tokensParsed,
@@ -201,6 +197,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     getCSS,
   }
 
+  configureMedia(config)
   setConfig(config)
 
   if (configListeners.size) {

package/src/helpers/ThemeManager.tsx

@@ -3,7 +3,7 @@ import { createContext } from 'react'
 import { getThemes } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
 import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
-import { ThemeObject, Themes } from '../types'
+import { ThemeParsed, Themes } from '../types'
 
 type ThemeListener = (name: string | null, themeManager: ThemeManager) => void
 
@@ -29,7 +29,7 @@ export class ThemeManager {
   constructor(
     public name: string = '',
     public className: string = '',
-    public theme: ThemeObject | null = null,
+    public theme: ThemeParsed | null = null,
     public parentManager: ThemeManager | null = null,
     public reset: boolean = false
   ) {
@@ -109,7 +109,7 @@ export class ThemeManager {
     debug?: any
   ): {
     name: string
-    theme: ThemeObject | null
+    theme: ThemeParsed | null
     className: string | undefined
   } {
     const { themes = getThemes(), name, componentName } = props
@@ -117,7 +117,7 @@ export class ThemeManager {
     if (props.reset && name) {
       return {
         name: name,
-        theme: themes[name],
+        theme: themes[name] as ThemeParsed,
         className: this.getClassName(name),
       }
     }