@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/views/ConfigRevisionCheck.tsx

@@ -0,0 +1,55 @@
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import React from 'react'
+import {
+  getConfigRevisionSnapshot,
+  type ConfigRevisionParts,
+} from '../helpers/grammarConfig'
+import type { TamaguiInternalConfig } from '../types'
+
+const partNames = [
+  'media',
+  'themeNames',
+  'themeVariables',
+  'tokens',
+  'fonts',
+  'shorthands',
+] as const
+
+export function ConfigRevisionCheck({ config }: { config: TamaguiInternalConfig }) {
+  const ref = React.useRef<HTMLSpanElement>(null)
+  const checked = React.useRef(false)
+  const client = getConfigRevisionSnapshot(config)
+  const clientParts = JSON.stringify(client.parts)
+
+  useIsomorphicLayoutEffect(() => {
+    if (checked.current) return
+    checked.current = true
+
+    const marker = ref.current
+    const serverRevision = marker?.getAttribute('data-tamagui-config-revision')
+    const serverPartsJSON = marker?.getAttribute('data-tamagui-config-revision-parts')
+    if (!serverRevision || !serverPartsJSON || serverRevision === client.revision) return
+
+    let serverParts: Partial<ConfigRevisionParts> = {}
+    try {
+      serverParts = JSON.parse(serverPartsJSON)
+    } catch {}
+
+    const differingParts = partNames.filter(
+      (part) => serverParts[part] !== client.parts[part]
+    )
+    console.error(
+      `[tamagui] Server/client config revision mismatch during hydration: server "${serverRevision}", client "${client.revision}". Differing parts: ${differingParts.join(', ') || 'unknown'}. Every input to the config revision must have identical names and queries in both environments; values may be omitted from an optimized client config, but their theme, variable, token, font, media, and shorthand names must remain.`
+    )
+  }, [client.revision, clientParts])
+
+  return (
+    <span
+      ref={ref}
+      aria-hidden
+      hidden
+      data-tamagui-config-revision={client.revision}
+      data-tamagui-config-revision-parts={clientParts}
+    />
+  )
+}

package/src/views/SafeAreaTracker.native.tsx

@@ -0,0 +1,10 @@
+import { getSafeArea, hasSafeAreaSetup } from '@tamagui/native'
+
+export function hasSafeAreaTracker(): boolean {
+  return hasSafeAreaSetup()
+}
+
+export function SafeAreaTracker() {
+  getSafeArea().state.useSafeAreaInsets!()
+  return null
+}

package/src/views/SafeAreaTracker.tsx

@@ -0,0 +1,7 @@
+export function hasSafeAreaTracker(): boolean {
+  return false
+}
+
+export function SafeAreaTracker() {
+  return null
+}

package/src/views/Slot.tsx

@@ -1,9 +1,10 @@
+import { createRefComponent } from '@tamagui/compose-refs'
 // via radix
 
 import { composeRefs } from '@tamagui/compose-refs'
 import { isWeb } from '@tamagui/constants'
 import type { ReactNode } from 'react'
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react'
+import { Children, cloneElement, isValidElement, memo } from 'react'
 import { mergeSlotStyleProps } from '../helpers/mergeSlotStyleProps'
 
 /* -------------------------------------------------------------------------------------------------
@@ -15,7 +16,7 @@ interface SlotProps {
 }
 
 export const Slot = memo(
-  forwardRef<any, SlotProps>(function Slot(props, forwardedRef) {
+  createRefComponent<any, SlotProps>(function Slot(props, forwardedRef) {
     const { children, ...slotProps } = props
 
     if (isValidElement(children)) {

package/src/views/TamaguiProvider.tsx

@@ -7,6 +7,8 @@ import { stopAccumulatingRules } from '../helpers/insertStyleRule'
 import { updateMediaListeners } from '../hooks/useMedia'
 import { resolveAnimationDriver } from '../helpers/resolveAnimationDriver'
 import type { AnimationDriver, TamaguiProviderProps } from '../types'
+import { ConfigRevisionCheck } from './ConfigRevisionCheck'
+import { hasSafeAreaTracker, SafeAreaTracker } from './SafeAreaTracker'
 import { TamaguiRoot } from './TamaguiRoot'
 import { ThemeProvider } from './ThemeProvider'
 
@@ -30,13 +32,15 @@ export function TamaguiProvider({
   defaultTheme: defaultThemeProp,
   reset,
   insets,
+  isSubtreeRoot,
 }: TamaguiProviderProps) {
   // fall back to first theme when defaultTheme is null/undefined
   // (e.g. useColorScheme() returns null on first render in RN 0.83+)
   const defaultTheme = defaultThemeProp || firstThemeKey(config) || 'light'
   useIsomorphicLayoutEffect(() => {
-    stopAccumulatingRules()
+    const resumeAccumulatingRules = stopAccumulatingRules()
     updateMediaListeners()
+    return resumeAccumulatingRules
   }, [])
 
   const memoizedInsets = React.useMemo(
@@ -47,10 +51,10 @@ export function TamaguiProvider({
   // Get the default animation driver from config
   // config.animations is already normalized to the default driver in createTamagui
   // resolveAnimationDriver handles edge cases where raw multi-driver object leaks through
-  const defaultAnimationDriver: AnimationDriver | null = React.useMemo(
-    () => resolveAnimationDriver(config?.animations),
-    [config?.animations]
-  )
+  const defaultAnimationDriver: AnimationDriver | null = React.useMemo(() => {
+    const driver = resolveAnimationDriver(config?.animations)
+    return driver?.isStub ? null : (driver as AnimationDriver | null)
+  }, [config?.animations])
 
   useEffect(() => {
     defaultAnimationDriver?.onMount?.()
@@ -61,7 +65,12 @@ export function TamaguiProvider({
       animationDriver={defaultAnimationDriver}
       insets={memoizedInsets}
     >
-      <ThemeProvider defaultTheme={defaultTheme} reset={reset} className={className}>
+      <ThemeProvider
+        defaultTheme={defaultTheme}
+        reset={reset}
+        className={className}
+        isSubtreeRoot={isSubtreeRoot}
+      >
         <TamaguiRoot theme={defaultTheme} isRootRoot>
           {children}
         </TamaguiRoot>
@@ -76,8 +85,6 @@ export function TamaguiProvider({
 
   return (
     <>
-      {contents}
-
       {process.env.TAMAGUI_TARGET !== 'native' && config && !disableInjectCSS && (
         <style
           // react 19 feature to hoist style tags to header:
@@ -90,6 +97,12 @@ export function TamaguiProvider({
           {config.getCSS()}
         </style>
       )}
+
+      {process.env.NODE_ENV !== 'production' &&
+        process.env.TAMAGUI_TARGET !== 'native' &&
+        config && <ConfigRevisionCheck config={config} />}
+      {hasSafeAreaTracker() && <SafeAreaTracker />}
+      {contents}
     </>
   )
 }

package/src/views/Text.tsx

@@ -1,7 +1,9 @@
 import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
 
 import { createComponent } from '../createComponent'
+import { setComponentDisplayName } from '../helpers/componentDisplayName'
 import type {
+  StaticConfig,
   TamaguiTextElement,
   TextNonStyleProps,
   TextProps,
@@ -23,13 +25,10 @@ const ellipsisStyle =
         lineBreakMode: 'clip',
       }
 
-export const Text = createComponent<
-  TextProps,
-  Text,
-  TextNonStyleProps,
-  TextStylePropsBase
->({
-  componentName: 'Text',
+/**
+ * Shared by every frontend's Text — see the note on `viewStaticConfig`.
+ */
+export const textStaticConfig: StaticConfig = {
   acceptsClassName: true,
   isText: true,
 
@@ -40,7 +39,6 @@ export const Text = createComponent<
           suppressHighlighting: true,
         },
 
-  inlineWhenUnflattened: new Set(['fontFamily']),
   inlineProps: new Set(['maxFontSizeMultiplier']),
 
   variants: {
@@ -48,7 +46,7 @@ export const Text = createComponent<
       numberOfLines: {
         1: ellipsisStyle,
 
-        ':number': (numberOfLines) =>
+        number: (numberOfLines) =>
           numberOfLines >= 1
             ? {
                 maxWidth: '100%',
@@ -70,4 +68,11 @@ export const Text = createComponent<
     ...validStyles,
     ...stylePropsTextOnly,
   },
-})
+}
+
+export const Text = setComponentDisplayName(
+  createComponent<TextProps, Text, TextNonStyleProps, TextStylePropsBase>(
+    textStaticConfig
+  ),
+  'Text'
+)

package/src/views/Theme.tsx

@@ -1,23 +1,67 @@
-import { isWeb } from '@tamagui/constants'
+import { createRefComponent } from '@tamagui/compose-refs'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { getThemeClassNames } from '@tamagui/helpers'
 import type { MutableRefObject } from 'react'
-import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react'
-import { getSetting } from '../config'
+import React, { Children, cloneElement, isValidElement, useRef } from 'react'
+import { getConfig, getSetting } from '../config'
 import { variableToString } from '../createVariable'
+import { formatDiagnostic } from '../helpers/formatDiagnostic'
+import {
+  insertStyleRules,
+  shouldInsertStyleRules,
+  updateRules,
+} from '../helpers/insertStyleRule'
+import {
+  removeNativeStyleScope,
+  updateNativeStyleScope,
+} from '../helpers/nativeStyleEngine'
+import { getInlineValuesFromProps, getVariablesCSSRules } from '../helpers/variables'
 import { useThemeWithState } from '../hooks/useTheme'
 import {
   getThemeState,
   hasThemeUpdatingProps,
   ThemeStateContext,
 } from '../hooks/useThemeState'
-import type { ThemeProps, ThemeState } from '../types'
+import type {
+  ReservedThemePropName,
+  RulesToInsert,
+  ThemeKeys,
+  ThemeProps,
+  ThemeState,
+  UseThemeWithStateProps,
+  VariableValIn,
+} from '../types'
 import { ThemeDebug } from './ThemeDebug'
 
-type ThemeComponentPropsOnly = ThemeProps & { passThrough?: boolean; contain?: boolean }
+/**
+ * Theme values set inline for a subtree: `<Theme background-hover="blue4">`.
+ * Values use the same flat grammar as style props, narrowed to the modifiers a
+ * whole subtree can honor: theme (`dark:`) and platform (`ios:`).
+ *
+ * Without a config augmentation `ThemeKeys` is `string`, which would make this
+ * a catch-all index signature that every one of Theme's own props collides
+ * with. There are no known theme keys to offer in that case, so it contributes
+ * nothing instead.
+ */
+export type ThemeUpdate = string extends ThemeKeys
+  ? {}
+  : {
+      [Key in Exclude<ThemeKeys, ReservedThemePropName>]?: VariableValIn
+    }
+
+type ThemeComponentPropsOnly = UseThemeWithStateProps &
+  ThemeUpdate & { contain?: boolean }
+
+const useInsertEffectCompat = isWeb
+  ? React.useInsertionEffect || useIsomorphicLayoutEffect
+  : () => {}
 
-export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, ref) {
+export const Theme = createRefComponent(function Theme(
+  props: ThemeComponentPropsOnly,
+  ref
+) {
   'use no memo'
 
-  // @ts-expect-error only for internal views
   if (props.disable) {
     return props.children
   }
@@ -26,10 +70,50 @@ export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, r
 
   const isRoot = !!props['_isRoot']
 
+  // theme-key props (<Theme background-hover="blue4 dark:blue2">) become an
+  // inline layer merged over the parent theme. null for a plain <Theme>, which
+  // costs one loop over its two or three props and allocates nothing.
+  const config = getConfig()
+  const inlineValues = getInlineValuesFromProps(props, config)
+
+  // on web the same layer also compiles to custom properties on this node, so
+  // styled descendants restyle through the cascade instead of re-rendering
+  let inlineCSS: ReturnType<typeof getVariablesCSSRules> = null
+  let rulesToInsert: RulesToInsert | null = null
+  if (process.env.TAMAGUI_TARGET !== 'native' && inlineValues) {
+    inlineCSS = getVariablesCSSRules(inlineValues, config)
+    if (inlineCSS && shouldInsertStyleRules(inlineCSS.identifier)) {
+      updateRules(inlineCSS.identifier, inlineCSS.rules)
+      rulesToInsert = {
+        [inlineCSS.identifier]: [
+          'variables',
+          '',
+          inlineCSS.identifier,
+          undefined,
+          inlineCSS.rules,
+        ],
+      }
+    }
+  }
+
+  useInsertEffectCompat(() => {
+    if (rulesToInsert) insertStyleRules(rulesToInsert)
+  }, [inlineCSS?.identifier])
+
+  const themeProps: ThemeComponentPropsOnly = inlineValues
+    ? { ...props, inlineValues, inlineClassName: inlineCSS?.identifier }
+    : props
+
   // pass forThemeView=true so the descendant-cascade effect is installed —
   // <Theme> pushes themeState.id into ThemeStateContext, so children subscribe
   // under this id and need to be notified when our propsKey changes.
-  const [_, themeState] = useThemeWithState(props, isRoot, true)
+  const [_, themeState] = useThemeWithState(themeProps, isRoot, true)
+
+  useIsomorphicLayoutEffect(() => {
+    if (process.env.TAMAGUI_TARGET !== 'native') return
+    updateNativeStyleScope(themeState.id, themeState.name, themeState.theme)
+    return () => removeNativeStyleScope(themeState.id)
+  }, [themeState.id, themeState.name, themeState.theme])
 
   const disableDirectChildTheme = props['disable-child-theme']
 
@@ -58,7 +142,7 @@ export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, r
   return getThemedChildren(
     themeState,
     finalChildren,
-    props,
+    themeProps,
     isRoot,
     stateRef,
     passThrough
@@ -128,7 +212,18 @@ export function getThemedChildren(
       const parentState = getThemeState(
         themeState.isNew ? themeState.id : themeState.parentId
       )
-      if (!parentState) throw new Error(`‼️010`)
+      if (!parentState) {
+        throw new Error(
+          formatDiagnostic(
+            '‼️010',
+            'Theme',
+            'parent theme state is missing for shallow rendering',
+            'Keep <Theme shallow> inside its mounted parent Theme',
+            'name,parentId',
+            { name: themeState.name, parentId: themeState.parentId }
+          )
+        )
+      }
       children = Children.toArray(children).map((child) => {
         return isValidElement(child)
           ? passThrough
@@ -166,9 +261,14 @@ export function getThemedChildren(
       ? {}
       : getThemeClassNameAndColor(themeState, props, isRoot)
 
+    // inline theme values ride the same span as the theme class: one node for
+    // <Theme name="dark" background="red">, and it lands even when the theme
+    // itself didn't change (getThemeClassNameAndColor returns nothing then)
+    const inlineClassName = passThrough ? undefined : props.inlineClassName
+
     children = (
       <span
-        className={`${className} is_Theme`}
+        className={`${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : ''}`}
         style={passThrough ? baseStyle : { color, ...baseStyle }}
       >
         {children}
@@ -216,34 +316,5 @@ function getThemeClassNameAndColor(
   const themeColor =
     themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : ''
 
-  const style = themeColor
-    ? {
-        color: themeColor,
-      }
-    : undefined
-
-  const themeClassName = themeState.name.replace(schemePrefix, '')
-
-  // Build full hierarchy of theme classes for CSS variable inheritance
-  // Examples:
-  // - "red_surface1" → "t_red t_red_surface1"
-  // - "green_active_Button" → "t_green t_green_active t_green_active_Button"
-  const themeNameParts = themeClassName.split('_')
-  let themeClasses = `t_${themeClassName}`
-
-  if (themeNameParts.length > 1) {
-    // Build full hierarchy for all multi-part themes (sub-themes, component themes, etc.)
-    // This enables CSS variable inheritance through all levels
-    const hierarchyClasses: string[] = []
-    for (let i = 1; i <= themeNameParts.length; i++) {
-      hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join('_')}`)
-    }
-    themeClasses = hierarchyClasses.join(' ')
-  }
-
-  const className = `${isRoot ? '' : 't_sub_theme'} ${themeClasses}`
-
-  return { color: themeColor, className }
+  return { color: themeColor, className: getThemeClassNames(themeState.name, isRoot) }
 }
-
-const schemePrefix = /^(dark|light)_/

package/src/views/ThemeDebug.tsx

@@ -68,7 +68,6 @@ export function ThemeDebug({
                 isNew: themeState.isNew,
                 themeProps: {
                   name: themeProps.name,
-                  componentName: themeProps.componentName,
                   reset: themeProps.reset,
                 },
                 parentState: {

package/src/views/ThemeProvider.tsx

@@ -8,7 +8,9 @@ import { Theme } from './Theme'
 export const ThemeProvider = (props: ThemeProviderProps) => {
   'use no memo'
 
-  const addThemeClassName = getSetting('addThemeClassName')
+  // a subtree root shares its document with a page that has its own theme, so
+  // the document-level class is not its to write
+  const addThemeClassName = props.isSubtreeRoot ? false : getSetting('addThemeClassName')
 
   // ensure theme is attached to root body node as well to work with modals by default
   if (process.env.TAMAGUI_TARGET === 'web') {
@@ -16,9 +18,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
       if (addThemeClassName === false) return
       const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`
       const target =
-        getSetting('addThemeClassName') === 'html'
-          ? document.documentElement
-          : document.body
+        addThemeClassName === 'html' ? document.documentElement : document.body
       target.classList.add(cn)
       return () => {
         target.classList.remove(cn)
@@ -29,7 +29,8 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
   // we completely disable the className here if its set to any value, 'root', 'body', or false
   // because in all cases we are putting the classname elsewhere
   // if its undefined, then the default behavior applies and we use the className here
-  const forceClassName = addThemeClassName === undefined
+  // a subtree root always carries it, because nothing above it will
+  const forceClassName = props.isSubtreeRoot || addThemeClassName === undefined
 
   return (
     <Theme

package/src/views/View.tsx

@@ -1,10 +1,12 @@
 import { validStyles } from '@tamagui/helpers'
 
 import { createComponent } from '../createComponent'
+import { setComponentDisplayName } from '../helpers/componentDisplayName'
 import type {
   StackNonStyleProps,
   StackStyle,
   StackStyleBase,
+  StaticConfig,
   TamaguiElement,
 } from '../types'
 
@@ -14,12 +16,19 @@ export type ViewStylePropsBase = StackStyleBase
 export type ViewStyle = StackStyle
 export type ViewProps = ViewNonStyleProps & ViewStyle
 
-export const View = createComponent<
-  ViewProps,
-  View,
-  ViewNonStyleProps,
-  ViewStylePropsBase
->({
+/**
+ * Shared by every frontend's View. `createComponent` never mutates the config it
+ * receives, so another frontend spreads this and adds its own descriptor rather
+ * than touching the regular View singleton.
+ */
+export const viewStaticConfig: StaticConfig = {
   acceptsClassName: true,
   validStyles,
-})
+}
+
+export const View = setComponentDisplayName(
+  createComponent<ViewProps, View, ViewNonStyleProps, ViewStylePropsBase>(
+    viewStaticConfig
+  ),
+  'View'
+)

package/types/Tamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAS3C,eAAO,MAAM,OAAO;;;;;;;;;;aA2BhB,CAAA;AAIJ,eAAO,MAAM,sBAAsB,GAAI,YAAY,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,YAAY,MAAM,EAAE,OAAO,GAAG,SAEhE,CAAA"}
+{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAS3C,eAAO,MAAM,OAAO;;;;;;;;;;aA2BhB,CAAA;AAIJ,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}

package/types/_withNativeStyle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type NativeStyleThemeMapping } from './helpers/nativeStyleEngine';
+/** internal: emitted by the native compiler when experimental.nativeFastPath is on */
+export declare const _withNativeStyle: (Component: any, baseStyle: Record<string, unknown>, themeStyleKeys: NativeStyleThemeMapping) => React.MemoExoticComponent<(props: any) => React.JSX.Element>;
+//# sourceMappingURL=_withNativeStyle.d.ts.map

package/types/_withNativeStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_withNativeStyle.d.ts","sourceRoot":"","sources":["../src/_withNativeStyle.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAE9D,OAAO,EAKL,KAAK,uBAAuB,EAC7B,MAAM,6BAA6B,CAAA;AAGpC,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,cAChB,GAAG,aACH,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,kBAClB,uBAAuB,uCA2De,GAAG,uBAQ1D,CAAA"}

package/types/_withStableStyle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare const _withStableStyle: (Component: any, createStyle: (theme: any, expressions: any[]) => object, hasThemeKeys?: boolean, hasMediaKeys?: boolean) => React.NamedExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export declare const _withStableStyle: (Component: any, createStyle: (theme: any, expressions: any[]) => object, hasThemeKeys?: boolean, hasMediaKeys?: boolean) => React.MemoExoticComponent<(props: any) => React.JSX.Element>;
 //# sourceMappingURL=_withStableStyle.d.ts.map

package/types/_withStableStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_withStableStyle.d.ts","sourceRoot":"","sources":["../src/_withStableStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAWzC,eAAO,MAAM,gBAAgB,GAC3B,WAAW,GAAG,EACd,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,MAAM,EACvD,eAAe,OAAO,EACtB,eAAe,OAAO,gFAoDrB,CAAA"}
+{"version":3,"file":"_withStableStyle.d.ts","sourceRoot":"","sources":["../src/_withStableStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAazC,eAAO,MAAM,gBAAgB,cAChB,GAAG,eACD,CAAC,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,MAAM,iBACxC,OAAO,iBACP,OAAO,uCAEqB,GAAG,uBAkE5C,CAAA"}

package/types/config.d.ts

@@ -1,4 +1,4 @@
-import type { AnimationDriver, GenericTamaguiSettings, TamaguiInternalConfig, Token, Tokens, TokensMerged } from './types';
+import type { AnimationDriver, GenericTamaguiSettings, TamaguiInternalConfig, Token, Tokens, TokensParsed } from './types';
 export type StyleCompat = 'legacy' | 'react-native' | 'web';
 export declare const getSetting: <Key extends keyof GenericTamaguiSettings>(key: Key) => GenericTamaguiSettings[Key];
 export declare function getStyleCompat(): StyleCompat;
@@ -6,44 +6,34 @@ export declare const setConfig: (next: TamaguiInternalConfig) => void;
 export declare const setConfigFont: (name: string, font: any, fontParsed: any) => void;
 export declare const getConfig: () => TamaguiInternalConfig;
 export declare const getConfigMaybe: () => TamaguiInternalConfig | null;
-export declare function setTokens(next: TokensMerged): void;
-export declare const getTokens: ({ prefixed, }?: {
-    /**
-     * Force either with $ or without $ prefix
-     */
-    prefixed?: boolean;
-}) => TokensMerged;
+export declare function setTokens(next: TokensParsed): void;
+export declare const getTokens: () => TokensParsed;
 export declare const getTokenObject: (value: Token, group?: keyof Tokens) => import("./types").Variable<any>;
 export declare const getToken: (value: Token, group?: keyof Tokens, useVariable?: boolean) => any;
-export declare const getTokenValue: (value: Token | "unset" | "auto", group?: keyof Tokens) => any;
+export declare const getTokenValue: (value: Token | 'unset' | 'auto', group?: keyof Tokens) => any;
 /**
  * Note: this is the same as `getTokens`
  */
-export declare const useTokens: ({ prefixed, }?: {
-    /**
-     * Force either with $ or without $ prefix
-     */
-    prefixed?: boolean;
-}) => TokensMerged;
+export declare const useTokens: typeof getTokens;
 export declare const getThemes: () => {
     [x: string]: {
-        [x: string]: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<number> | import("./types").Variable<import("./types").VariableValGeneric> | import("./types").Variable<import("./types").PxValue>;
-        background?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        backgroundHover?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        backgroundPress?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        backgroundFocus?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        color?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        colorHover?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        colorPress?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        colorFocus?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        borderColor?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        borderColorHover?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        borderColorPress?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        borderColorFocus?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        shadowColor?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        shadowColorHover?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        shadowColorPress?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
-        shadowColorFocus?: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<undefined> | undefined;
+        [x: string]: import("./types").Variable<any> | import("./types").Variable<string> | import("./types").Variable<number> | import("./types").Variable<import("./types").PxValue> | import("./types").Variable<import("./types").VariableValGeneric>;
+        background?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        backgroundHover?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        backgroundPress?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        backgroundFocus?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        color?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        colorHover?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        colorPress?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        colorFocus?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        borderColor?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        borderColorHover?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        borderColorPress?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        borderColorFocus?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        shadowColor?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        shadowColorHover?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        shadowColorPress?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
+        shadowColorFocus?: import("./types").Variable<any> | import("./types").Variable<undefined> | import("./types").Variable<string> | undefined;
     };
 };
 export declare const updateConfig: (key: string, value: any) => void;

package/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EAEf,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACL,MAAM,EACN,YAAY,EACb,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,KAAK,CAAA;AAoD3D,eAAO,MAAM,UAAU,GAAI,GAAG,SAAS,MAAM,sBAAsB,EACjE,KAAK,GAAG,KACP,sBAAsB,CAAC,GAAG,CAU5B,CAAA;AAED,wBAAgB,cAAc,IAAI,WAAW,CAG5C;AAED,eAAO,MAAM,SAAS,GAAI,MAAM,qBAAqB,SAIpD,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,EAAE,MAAM,GAAG,EAAE,YAAY,GAAG,SAOrE,CAAA;AAED,eAAO,MAAM,SAAS,6BAUrB,CAAA;AAED,eAAO,MAAM,cAAc,oCAE1B,CAAA;AAKD,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,QAE3C;AAID,eAAO,MAAM,SAAS,GAAI,gBAEvB;IACD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACd,KAAG,YASR,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,MAAM,oCAWhE,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,MAAM,EAAE,qBAAmB,QAG/E,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,GAAG,OAAO,GAAG,MAAM,EAAE,QAAQ,MAAM,MAAM,QAGlF,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,mBA1CnB;IACD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,KAAQ,YAqCyB,CAAA;AAElC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA6C,CAAA;AAEnE,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,OAAO,GAAG,SAOnD,CAAA;AAGD,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,4DAQnC,CAAA;AAED,KAAK,SAAS,GAAG;IACf,UAAU,CAAC,EACP,OAAO,GACP;QACE,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACN,CAAA;AAED,eAAO,IAAI,SAAS,EAAE,SAAS,GAAG,SAAS,CAAA;AAE3C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,QAIvC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,QAyBxE"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EAEf,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACL,MAAM,EACN,YAAY,EACb,MAAM,SAAS,CAAA;AAGhB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,KAAK,CAAA;AAoD3D,eAAO,MAAM,UAAU,GAAI,GAAG,SAAS,MAAM,sBAAsB,OAC5D,GAAG,KACP,sBAAsB,CAAC,GAAG,CAU5B,CAAA;AAED,wBAAgB,cAAc,IAAI,WAAW,CAG5C;AAED,eAAO,MAAM,SAAS,SAAU,qBAAqB,SAIpD,CAAA;AAED,eAAO,MAAM,aAAa,SAAU,MAAM,QAAQ,GAAG,cAAc,GAAG,SAOrE,CAAA;AAED,eAAO,MAAM,SAAS,6BAerB,CAAA;AAED,eAAO,MAAM,cAAc,oCAE1B,CAAA;AAGD,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,QAE3C;AAQD,eAAO,MAAM,SAAS,QAAO,YAK5B,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,KAAK,UAAU,MAAM,MAAM,oCAKhE,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,KAAK,UAAU,MAAM,MAAM,+BAG1D,CAAA;AAED,eAAO,MAAM,aAAa,UAAW,KAAK,GAAG,OAAO,GAAG,MAAM,UAAU,MAAM,MAAM,QAGlF,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,kBAAY,CAAA;AAElC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA6C,CAAA;AAEnE,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,GAAG,SAOnD,CAAA;AAGD,eAAO,MAAM,OAAO,SAAU,MAAM,4DAQnC,CAAA;AAED,KAAK,SAAS,GAAG;IACf,UAAU,CAAC,EACP,OAAO,GACP;QACE,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACN,CAAA;AAED,eAAO,IAAI,SAAS,EAAE,SAAS,GAAG,SAAS,CAAA;AAE3C,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,QAIvC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,QAyBxE"}

package/types/contexts/ComponentContext.d.ts

@@ -1,4 +1,4 @@
 import type { ComponentContextI } from '../types';
-export declare const ComponentContext: import("../types").StyledContext<ComponentContextI>;
+export declare const ComponentContext: import("..").StyledContext<ComponentContextI, "animationDriver" | "disableSSR" | "inText" | "insets" | "language" | "setParentFocusState">;
 export declare const useConfiguration: () => ComponentContextI;
 //# sourceMappingURL=ComponentContext.d.ts.map

package/types/contexts/ComponentContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ComponentContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEjD,eAAO,MAAM,gBAAgB,qDAO3B,CAAA;AAEF,eAAO,MAAM,gBAAgB,yBAE5B,CAAA"}
+{"version":3,"file":"ComponentContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ComponentContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAWjD,eAAO,MAAM,gBAAgB,4IAe5B,CAAA;AAED,eAAO,MAAM,gBAAgB,yBAE5B,CAAA"}