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

package/src/hooks/useMedia.tsx

@@ -1,20 +1,39 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { matchMedia } from '../helpers/matchMedia'
 import {
-  ConfigureMediaQueryOptions,
   MediaQueries,
   MediaQueryKey,
   MediaQueryObject,
   MediaQueryState,
+  TamaguiInternalConfig,
 } from '../types'
 import { useSafeRef } from './useSafeRef'
 
-export const mediaState: MediaQueryState = {} as any
+export const mediaState: MediaQueryState =
+  // development time safeguard
+  process.env.NODE_ENV === 'development'
+    ? new Proxy(
+        {},
+        {
+          get(target, key) {
+            if (typeof key === 'string' && key[0] === '$') {
+              throw new Error(`Access of mediaState should never include $`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
 const mediaQueryListeners: { [key: string]: Set<Function> } = {}
 
 export function addMediaQueryListener(key: MediaQueryKey, cb: any) {
+  if (process.env.NODE_ENV === 'development' && key[0] === '$') {
+    // eslint-disable-next-line no-console
+    console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`)
+  }
   mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
   mediaQueryListeners[key].add(cb)
   return () => removeMediaQueryListener(key, cb)
@@ -35,29 +54,17 @@ const dispose = new Set<Function>()
 // for SSR capture it at time of startup
 let initialMediaState: MediaQueryState | null
 
-export const configureMedia = ({
-  queries,
-  defaultActive = {},
-}: ConfigureMediaQueryOptions = {}) => {
-  if (!queries) return
-
-  // support hot reload
-  if (initialMediaState) {
-    if (process.env.NODE_ENV === 'development') {
-      if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
-        // hmr avoid update
-        return
-      }
-    }
-    setupMediaListeners()
-  }
-
-  Object.assign(mediaQueryConfig, queries)
-  // start in the initial state
-  for (const key in queries) {
-    mediaState[key] = defaultActive[key] || false
+export const configureMedia = (config: TamaguiInternalConfig) => {
+  const { media, mediaQueryDefaultActive } = config
+  if (!media) return
+  for (const key in media) {
+    mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
+  Object.assign(mediaQueryConfig, media)
   initialMediaState = { ...mediaState }
+  if (config.disableSSR) {
+    setupMediaListeners()
+  }
 }
 
 function unlisten() {
@@ -65,7 +72,20 @@ function unlisten() {
   dispose.clear()
 }
 
+/**
+ * Note: This should *not* set the state on the first render!
+ * Because to avoid hydration issues SSR must match the server
+ * *and then* re-render with the actual media query state.
+ */
+let configuredKey = ''
 function setupMediaListeners() {
+  // avoid setting up more than once per config
+  const nextKey = JSON.stringify(mediaQueryConfig)
+  if (nextKey === configuredKey) {
+    return
+  }
+  configuredKey = nextKey
+
   // hmr, undo existing before re-binding
   unlisten()
 
@@ -79,6 +99,7 @@ function setupMediaListeners() {
     // react native needs these deprecated apis for now
     match.addListener(update)
     dispose.add(() => match.removeListener(update))
+
     update()
 
     function update() {
@@ -87,16 +108,18 @@ function setupMediaListeners() {
       mediaState[key] = next
       const listeners = mediaQueryListeners[key]
       if (listeners?.size) {
-        for (const cb of [...listeners]) {
-          cb()
-        }
+        listeners.forEach((cb) => cb())
       }
     }
   }
 }
 
-export function useMediaQueryListeners() {
-  useIsomorphicLayoutEffect(() => {
+export function useMediaQueryListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) {
+    return
+  }
+
+  useEffect(() => {
     setupMediaListeners()
     return unlisten
   }, [])
@@ -105,7 +128,7 @@ export function useMediaQueryListeners() {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState(initialMediaState!)
+  const [state, setState] = useState(initialMediaState || {})
   const keys = useSafeRef({} as Record<string, boolean>)
 
   function updateState() {
@@ -120,13 +143,12 @@ export function useMedia(): {
   }
 
   useIsomorphicLayoutEffect(() => {
-    const listeners: Function[] = []
-    for (const key in keys.current) {
-      listeners.push(addMediaQueryListener(key, updateState))
-    }
+    const disposes: Function[] = Object.keys(keys.current).map((key) =>
+      addMediaQueryListener(key, updateState)
+    )
     updateState()
     return () => {
-      listeners.forEach((cb) => cb())
+      disposes.forEach((cb) => cb())
     }
   })
 
@@ -134,8 +156,15 @@ export function useMedia(): {
     () =>
       new Proxy(state, {
         get(_, key: string) {
+          if (process.env.NODE_ENV === 'development') {
+            if (!initialMediaState) {
+              throw new Error(
+                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
+              )
+            }
+          }
           if (!keys.current[key]) {
-            keys.current = { ...keys.current, [key]: true }
+            keys.current[key] = true
           }
           return Reflect.get(state, key)
         },

package/src/hooks/useTheme.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'r
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
 import {
@@ -12,7 +12,7 @@ import {
   ThemeManagerContext,
   emptyManager,
 } from '../helpers/ThemeManager'
-import { ThemeName, ThemeObject } from '../types'
+import { ThemeName, ThemeParsed } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 import { useConstant } from './useConstant'
 import { useServerRef } from './useServerHooks'
@@ -38,7 +38,7 @@ export const useTheme = (
   componentName?: string,
   props?: ThemeProps,
   forceUpdate?: any
-): ThemeObject => {
+): ThemeParsed => {
   // TODO this can use useChangeThemeEffect almost ready
   if (isRSC) {
     const config = getConfig()
@@ -195,10 +195,10 @@ export const useChangeThemeEffect = (
   forceUpdateProp?: any,
   uuid?: Object
 ): {
-  themes: Record<string, ThemeObject>
+  themes: Record<string, ThemeParsed>
   themeManager: ThemeManager | null
   name: string
-  theme: ThemeObject | null
+  theme: ThemeParsed | null
   className?: string
 } => {
   const { themes } = getConfig()
@@ -236,7 +236,7 @@ export const useChangeThemeEffect = (
     return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
   })
 
-  if (!isSSR) {
+  if (!isServer) {
     useLayoutEffect(() => {
       themeManager.update(next)
 

package/src/styled.tsx

@@ -48,6 +48,7 @@ export function styled<
     variants?: Variants | undefined
     // thought i had this typed, but can't get it linked
     defaultVariants?: { [key: string]: any }
+    acceptsClassName?: boolean
   },
   staticExtractionOptions?: Partial<StaticConfig>
 ) {
@@ -73,7 +74,13 @@ export function styled<
     }
 
     if (options) {
-      const { variants, name, defaultVariants, ...defaultProps } = options
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants)
       }
@@ -84,12 +91,7 @@ export function styled<
           RNComponents.add(Component)
           isReactNativeWeb = true
         } else {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`
-            )
-          }
+          // assuming some sort of non-tamagui non-rn view, will always use style={}
         }
       }
       const reactNativeWebComponent = isReactNativeWeb
@@ -107,6 +109,8 @@ export function styled<
         isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text
       )
 
+      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb)
+
       const conf: Partial<StaticConfig> = {
         ...staticExtractionOptions,
         ...(!isTamagui && {
@@ -125,10 +129,12 @@ export function styled<
         isInput,
         isText,
         isImage,
+        acceptsClassName,
       }
 
       // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)
-      if (defaultProps.children) {
+      // bail on non className views as well
+      if (defaultProps.children || !acceptsClassName) {
         conf.neverFlatten = true
       }
 

package/src/types.tsx

@@ -162,7 +162,12 @@ export type CreateTamaguiConfig<
   fonts: RemoveLanguagePostfixes<F>
   fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]
   tokens: A
-  themes: B
+  // parsed
+  themes: {
+    [Name in keyof B]: {
+      [Key in keyof B[Name]]: Variable
+    }
+  }
   shorthands: C
   media: D
   animations: AnimationDriver<E>
@@ -230,13 +235,16 @@ export type GenericTamaguiConfig = CreateTamaguiConfig<
 >
 
 // since TamaguiConfig will be re-declared, these will all be typed globally
-export type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type ThemeDefinition = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type ThemeKeys = keyof ThemeDefinition
+export type ThemeParsed = {
+  [key in ThemeKeys]: Variable
+}
 export type Tokens = TamaguiConfig['tokens']
 export type Shorthands = TamaguiConfig['shorthands']
 export type Media = TamaguiConfig['media']
 export type Themes = TamaguiConfig['themes']
 export type ThemeName = GetAltThemeNames<keyof Themes>
-export type ThemeKeys = keyof ThemeObject
 export type ThemeTokens = `$${ThemeKeys}`
 export type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>
 export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>
@@ -264,6 +272,26 @@ export type CreateTamaguiProps = {
   }
 
   defaultTheme?: string
+
+  /**
+   * *Advanced use case* For all CSS extracted views, this has no effect.
+   *
+   * For SSR compatibility on the web, Tamagui will render once with the settings
+   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render
+   * again after the initial render using the proper media query values. This is so that
+   * hydration will match perfectly with the server.
+   *
+   * Setting disableSSR will avoid this second render by setting the media query state
+   * to the actual browser dimensions on initial load. This is only useful for client-only
+   * apps.
+   *
+   */
+  disableSSR?: boolean
+
+  /**
+   * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.
+   * For custom use cases like integration with next-theme.
+   */
   disableRootThemeClass?: boolean
 
   defaultProps?: Record<string, any> & {
@@ -314,9 +342,6 @@ export type TamaguiInternalConfig<
     getCSS: () => string
     parsed: boolean
     inverseShorthands: Record<string, string>
-
-    // just passed in from CreateTamaguiProps
-    themeClassNameOnRoot?: boolean
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']
@@ -352,10 +377,6 @@ export type MediaProps<A> = {
 export type MediaQueries = {
   [key in MediaQueryKey]: MediaQueryObject
 }
-export type ConfigureMediaQueryOptions = {
-  queries?: MediaQueries
-  defaultActive?: Record<MediaQueryKey, boolean>
-}
 
 export type TransformStyleProps = {
   x?: number
@@ -423,7 +444,7 @@ export type SizeTokens = GetTokenString<keyof Tokens['size']> | number
 export type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean
 export type ColorTokens =
   | GetTokenString<keyof Tokens['color']>
-  | GetTokenString<keyof ThemeObject>
+  | GetTokenString<keyof ThemeParsed>
   | CSSColorNames
 export type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number
 export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
@@ -640,7 +661,7 @@ export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>>
 export type PropMapper = (
   key: string,
   value: any,
-  theme: ThemeObject,
+  theme: ThemeParsed,
   props: Record<string, any>,
   state: Partial<SplitStyleState>,
   languageContext?: FontLanguageProps,
@@ -773,6 +794,13 @@ export type StaticConfig = {
    * Used insternally to attach default props to names
    */
   parentNames?: string[]
+
+  /**
+   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,
+   * it will assume the passed in component only accepts style={} for react-native compatibility.
+   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.
+   */
+  acceptsClassName?: boolean
 }
 
 /**

package/src/updateTheme.ts

@@ -1,8 +1,8 @@
 import { addTheme } from './addTheme'
 import { activeThemeManagers } from './hooks/useTheme'
-import { ThemeObject } from './types'
+import { ThemeDefinition } from './types'
 
-export function updateTheme({ name, theme }: { name: string; theme: ThemeObject }) {
+export function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {
   const next = addTheme({ name, theme, insertCSS: true, update: true })
 
   if (process.env.TAMAGUI_TARGET === 'native') {

package/src/views/TamaguiProvider.tsx

@@ -1,7 +1,6 @@
-import { useForceUpdate } from '@tamagui/use-force-update'
 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'
@@ -22,8 +21,8 @@ export function TamaguiProvider({
     )
   }
 
-  if (!isSSR) {
-    useMediaQueryListeners()
+  if (!isServer) {
+    useMediaQueryListeners(config)
   }
 
   if (isClient) {

package/types/addTheme.d.ts

@@ -1,7 +1,7 @@
-import { ThemeObject } from './types';
+import { ThemeDefinition } from './types';
 export declare function addTheme({ name: themeName, theme: themeIn, insertCSS, update, }: {
     name: string;
-    theme: ThemeObject;
+    theme: ThemeDefinition;
     insertCSS?: boolean;
     update?: boolean;
 }): {

package/types/config.d.ts

@@ -17,8 +17,24 @@ export declare const getConfig: () => TamaguiInternalConfig<import("./types").Cr
 }, import("./types").GenericFonts>;
 export declare const getTokens: () => import("./types").CreateTokens<import("./createVariable").Variable<import("./createVariable").VariableValue>>;
 export declare const getThemes: () => {
-    [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
-        [key: string]: import("./types").VariableVal;
+    [x: string]: {
+        [x: string]: import("./createVariable").Variable<import("./createVariable").VariableValue>;
+        background?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        backgroundHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        backgroundPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        backgroundFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        color?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        colorHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        colorPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        colorFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColor?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColorHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColorPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColorFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColor?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColorHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColorPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColorFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
     };
 };
 export declare const configListeners: Set<ConfigListener>;

package/types/constants/platform.d.ts

@@ -3,7 +3,7 @@ export declare const isAndroid: boolean;
 export declare const isIOS: boolean;
 export declare const isWeb: boolean;
 export declare const isWindowDefined: boolean;
-export declare const isSSR: boolean;
+export declare const isServer: boolean;
 export declare const isClient: boolean;
 export declare const isRSC: any;
 export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/types/constants/platform.native.d.ts

@@ -3,7 +3,7 @@ export declare const isAndroid: boolean;
 export declare const isIOS: boolean;
 export declare const isWeb = false;
 export declare const isWindowDefined = false;
-export declare const isSSR = false;
+export declare const isServer = false;
 export declare const isClient = false;
 export declare const isRSC = false;
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/types/createVariable.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Should rename this to Token
+ * Moving to objects for React Server Components support
+ */
 declare const IS_VAR = "__isVar__";
 export declare type VariableValue = string | number;
 declare type VariableIn<A extends VariableValue = VariableValue> = {

package/types/helpers/ThemeManager.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ThemeObject, Themes } from '../types';
+import { ThemeParsed, Themes } from '../types';
 declare type ThemeListener = (name: string | null, themeManager: ThemeManager) => void;
 export declare type SetActiveThemeProps = {
     className?: string;
@@ -16,22 +16,22 @@ export declare type GetNextThemeProps = {
 export declare class ThemeManager {
     name: string;
     className: string;
-    theme: ThemeObject | null;
+    theme: ThemeParsed | null;
     parentManager: ThemeManager | null;
     reset: boolean;
     keys: Map<any, Set<string>>;
     listeners: Map<any, Function>;
     themeListeners: Set<ThemeListener>;
-    constructor(name?: string, className?: string, theme?: ThemeObject | null, parentManager?: ThemeManager | null, reset?: boolean);
+    constructor(name?: string, className?: string, theme?: ThemeParsed | null, parentManager?: ThemeManager | null, reset?: boolean);
     get didChangeTheme(): boolean | null;
     get parentName(): string | null;
     get fullName(): string;
-    getValue(key: string): import("../types").VariableVal | undefined;
+    getValue(key: string): import("..").Variable<import("..").VariableValue> | undefined;
     isTracking(uuid: Object): boolean;
     update({ name, theme, className }?: SetActiveThemeProps, force?: boolean): boolean;
     getNextTheme(props?: GetNextThemeProps, debug?: any): {
         name: string;
-        theme: ThemeObject | null;
+        theme: ThemeParsed | null;
         className: string | undefined;
     };
     getClassName(name: string): string;

package/types/helpers/calc.d.ts

@@ -1,4 +1,9 @@
 import { FontLineHeightTokens, FontSizeTokens, SizeTokens, SpaceTokens } from '../types';
+/**
+ * Simple calc() that handles native + web
+ *   on web: outputs a calc() string
+ *   on native: outputs a plain number
+ */
 export declare type CalcVal = string | number | SizeTokens | SpaceTokens | FontSizeTokens | FontLineHeightTokens;
 declare const operators: {
     '+': (a: number, b: number) => number;

package/types/helpers/expandStyle.d.ts

@@ -1,2 +1,6 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
 export declare function expandStyle(key: string, value: any): any[][] | undefined;
 //# sourceMappingURL=expandStyle.d.ts.map

package/types/helpers/expandStyles.d.ts

@@ -2,6 +2,13 @@ export declare const defaultOffset: {
     height: number;
     width: number;
 };
+/**
+ * This is what you want to run before Object.assign() a style onto another.
+ * It does the following:
+ *   1. Turns user shorthands into longhands, ie px = paddingHorizontal
+ *   2. Normalizes various inconsistent styles to be more consistent
+ *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight
+ */
 export declare function expandStyles(style: Record<string, any>, config?: import("..").TamaguiInternalConfig<import("..").CreateTokens<import("..").VariableVal>, {
     [key: string]: Partial<import("..").TamaguiBaseTheme> & {
         [key: string]: import("..").VariableVal;

package/types/helpers/getSplitStyles.d.ts

@@ -1,5 +1,5 @@
 import type { ViewStyle } from 'react-native';
-import type { DebugProp, MediaQueryKey, PseudoStyles, SplitStyleState, StackProps, StaticConfigParsed, TamaguiInternalConfig, ThemeObject } from '../types';
+import type { DebugProp, MediaQueryKey, PseudoStyles, SplitStyleState, StackProps, StaticConfigParsed, TamaguiInternalConfig, ThemeParsed } from '../types';
 import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types';
 import { RulesToInsert } from './insertStyleRule';
 export declare type SplitStyles = ReturnType<typeof getSplitStyles>;
@@ -7,7 +7,7 @@ export declare type ClassNamesObject = Record<string, string>;
 export declare type SplitStyleResult = ReturnType<typeof getSplitStyles>;
 declare type StyleSplitter = (props: {
     [key: string]: any;
-}, staticConfig: StaticConfigParsed, theme: ThemeObject, state: SplitStyleState, defaultClassNames?: any, languageContext?: LanguageContextType, debug?: DebugProp) => {
+}, staticConfig: StaticConfigParsed, theme: ThemeParsed, state: SplitStyleState, defaultClassNames?: any, languageContext?: LanguageContextType, debug?: DebugProp) => {
     pseudos: PseudoStyles;
     medias: Record<MediaQueryKey, ViewStyle>;
     style: ViewStyle;
@@ -24,7 +24,7 @@ export declare const pseudoCNInverse: {
     press: string;
 };
 export declare const getSplitStyles: StyleSplitter;
-export declare const getSubStyle: (subKey: string, styleIn: Object, staticConfig: StaticConfigParsed, theme: ThemeObject, props: any, state: SplitStyleState, conf: TamaguiInternalConfig, languageContext?: FontLanguageProps, avoidDefaultProps?: boolean) => ViewStyle;
+export declare const getSubStyle: (subKey: string, styleIn: Object, staticConfig: StaticConfigParsed, theme: ThemeParsed, props: any, state: SplitStyleState, conf: TamaguiInternalConfig, languageContext?: FontLanguageProps, avoidDefaultProps?: boolean) => ViewStyle;
 export declare const insertSplitStyles: StyleSplitter;
 export declare const useSplitStyles: StyleSplitter;
 export {};

package/types/helpers/getStylesAtomic.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
 import { StyleObject } from '@tamagui/helpers';
 import type { TextStyle, ViewStyle } from 'react-native';
 import { PseudoDescriptor } from './pseudoDescriptors';

package/types/helpers/getThemeCSSRules.d.ts

@@ -1,8 +1,8 @@
-import { CreateTamaguiProps, ThemeObject } from '../types';
+import { CreateTamaguiProps, ThemeParsed } from '../types';
 export declare function getThemeCSSRules({ config, themeName, theme, names, }: {
     config: CreateTamaguiProps;
     themeName: string;
-    theme: ThemeObject;
+    theme: ThemeParsed;
     names: string[];
 }): string[];
 //# sourceMappingURL=getThemeCSSRules.d.ts.map

package/types/helpers/mergeProps.d.ts

@@ -1,3 +1,16 @@
+/**
+ * Preserves prop ordering, so that the order most closely matches the last spread objects
+ * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept
+ *
+ *    Given:
+ *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })
+ *    The final key order will be:
+ *      b, a
+ *
+ * Handles a couple special tamagui cases
+ *   - classNames can be extracted out separately
+ *   - shorthands can be expanded before merging
+ */
 declare type StringRecord = Record<string, string>;
 export declare const mergeProps: (a: Object, b: Object, leaveOutClassNames?: boolean, inverseShorthands?: StringRecord) => readonly [StringRecord, StringRecord];
 export {};

package/types/helpers/normalizeValueWithProperty.d.ts

@@ -1,2 +1,6 @@
+/**
+ * Some parts adapted from react-native-web
+ * Copyright (c) Nicolas Gallagher licensed under the MIT license.
+ */
 export declare function normalizeValueWithProperty(value: any, property?: string): any;
 //# sourceMappingURL=normalizeValueWithProperty.d.ts.map

package/types/hooks/useIsSSR.d.ts

@@ -1,2 +1,4 @@
-export declare const useIsSSR: () => boolean;
+export declare const useIsSSR: (props?: {
+    immediate?: boolean;
+}) => boolean;
 //# sourceMappingURL=useIsSSR.d.ts.map

package/types/hooks/useMedia.d.ts

@@ -1,11 +1,11 @@
-import { ConfigureMediaQueryOptions, MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState } from '../types';
+import { MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig } from '../types';
 export declare const mediaState: MediaQueryState;
 export declare function addMediaQueryListener(key: MediaQueryKey, cb: any): () => void;
 export declare function removeMediaQueryListener(key: MediaQueryKey, cb: any): void;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
-export declare const configureMedia: ({ queries, defaultActive, }?: ConfigureMediaQueryOptions) => void;
-export declare function useMediaQueryListeners(): void;
+export declare const configureMedia: (config: TamaguiInternalConfig) => void;
+export declare function useMediaQueryListeners(config: TamaguiInternalConfig): void;
 export declare function useMedia(): {
     [key in MediaQueryKey]: boolean;
 };