@tamagui/web 3.0.0-beta.661.1 → 3.0.0-beta.719.1

package/src/hooks/useAnimationDriver.ts

@@ -1,6 +1,7 @@
 import { useConfiguration } from '../contexts/ComponentContext'
 import type {
   AnimationDriver,
+  AnimationDriverWithAnimatedNumbers,
   UniversalAnimatedNumber,
   UseAnimatedNumberReaction,
   UseAnimatedNumberStyle,
@@ -13,25 +14,39 @@ import type {
 // `animatedBy` multi-driver setups).
 export function useAnimationDriver(): AnimationDriver {
   const { animationDriver } = useConfiguration()
-  if (process.env.NODE_ENV === 'development') {
-    if (!animationDriver || animationDriver.isStub) {
-      throw new Error(
-        `No animation driver configured. To use the animation hooks (useAnimatedNumber, useAnimatedNumberStyle, ...), pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
-      )
-    }
+  if (!animationDriver || animationDriver.isStub) {
+    throw new Error(
+      `No animation driver configured. Pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
+    )
   }
-  return animationDriver!
+  return animationDriver
+}
+
+function useAnimatedNumberDriver(): AnimationDriverWithAnimatedNumbers {
+  const driver = useAnimationDriver()
+  const animatedDriver = driver as Partial<AnimationDriverWithAnimatedNumbers>
+  if (
+    typeof animatedDriver.useAnimatedNumber !== 'function' ||
+    typeof animatedDriver.useAnimatedNumberStyle !== 'function' ||
+    typeof animatedDriver.useAnimatedNumbersStyle !== 'function' ||
+    typeof animatedDriver.useAnimatedNumberReaction !== 'function'
+  ) {
+    throw new Error(
+      `The configured animation driver does not include animated-number hooks. When using the CSS driver, import \`createAnimations\` from \`@tamagui/animations-css/extras\` instead of \`@tamagui/animations-css\`. See: https://tamagui.dev/docs/core/animations-css`
+    )
+  }
+  return animatedDriver as AnimationDriverWithAnimatedNumbers
 }
 
 export function useAnimatedNumber(initial: number): UniversalAnimatedNumber<any> {
-  return useAnimationDriver().useAnimatedNumber(initial)
+  return useAnimatedNumberDriver().useAnimatedNumber(initial)
 }
 
 export const useAnimatedNumberStyle: UseAnimatedNumberStyle = (value, getStyle) =>
-  useAnimationDriver().useAnimatedNumberStyle(value, getStyle)
+  useAnimatedNumberDriver().useAnimatedNumberStyle(value, getStyle)
 
 export const useAnimatedNumbersStyle: UseAnimatedNumbersStyle = (values, getStyle) =>
-  useAnimationDriver().useAnimatedNumbersStyle(values, getStyle)
+  useAnimatedNumberDriver().useAnimatedNumbersStyle(values, getStyle)
 
 export const useAnimatedNumberReaction: UseAnimatedNumberReaction = (opts, onValue) =>
-  useAnimationDriver().useAnimatedNumberReaction(opts, onValue)
+  useAnimatedNumberDriver().useAnimatedNumberReaction(opts, onValue)

package/src/hooks/useComponentState.ts

@@ -1,6 +1,10 @@
 import { getPlatformDriver, isServer, isWeb } from '@tamagui/constants'
 import { stylePropsAll } from '@tamagui/helpers'
-import { canonicalClauseModifier, scanFlatValue } from '@tamagui/style-grammar/runtime'
+import {
+  canonicalClauseModifier,
+  scanFlatValue,
+  type FlatValueHandler,
+} from '@tamagui/style-grammar/runtime'
 import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
 import { useDidFinishSSR, useIsClientOnly } from '@tamagui/use-did-finish-ssr'
 import { useRef, useState } from 'react'
@@ -31,34 +35,31 @@ import type { ViewProps } from '../views/View'
 const platformPseudoModifiers = new Set(['hover', 'press', 'focus'])
 const enterModifier = new Set(['enter'])
 
-// One live scan at a time, so the visitor and its state are hoisted rather than
-// rebuilt per prop: this runs on every render of every component, and the whole
-// point of an index-based scanner is that asking the question costs nothing.
-let scanSource = ''
-let scanWanted: ReadonlySet<string> = enterModifier
-let scanFound = false
-let scanRefused = false
-
-const lifecycleVisitor = {
-  segment(start: number, end: number, isBase: boolean) {
-    // a clause with no payload is a value parseValue refuses, so nothing in it
-    // reaches the style object and nothing in it can start an animation
-    if (start === end && !isBase) scanRefused = true
+type LifecycleScanContext = TamaguiComponentStateRef & {
+  // source, wanted modifiers, found, and pending match. created once per
+  // component and reused by both lifecycle questions on every render.
+  flatScan?: [string, ReadonlySet<string>, boolean, boolean]
+}
+
+const lifecycleHandler: FlatValueHandler<LifecycleScanContext> = {
+  segment(ctx, start, end, isBase, valid) {
+    const scan = ctx.flatScan!
+    if (!isBase && valid && start < end && scan[3]) scan[2] = true
+    scan[3] = false
   },
-  chain(start: number, end: number) {
-    if (scanRefused) return false
+  chain(ctx, start, end, valid) {
+    const scan = ctx.flatScan!
+    scan[3] = false
+    if (!valid) return true
     for (let index = start; index <= end; index++) {
-      if (index !== end && scanSource.charCodeAt(index) !== 58) continue
-      if (scanWanted.has(canonicalClauseModifier(scanSource.slice(start, index)))) {
-        scanFound = true
+      if (index !== end && scan[0].charCodeAt(index) !== 58) continue
+      if (scan[1].has(canonicalClauseModifier(scan[0].slice(start, index)))) {
+        scan[3] = true
       }
       start = index + 1
     }
     return true
   },
-  error() {
-    scanRefused = true
-  },
 }
 
 /**
@@ -72,19 +73,21 @@ const lifecycleVisitor = {
 function hasFlatModifier(
   props: Record<string, any>,
   config: TamaguiInternalConfig,
-  modifiers: ReadonlySet<string>
+  modifiers: ReadonlySet<string>,
+  ctx: LifecycleScanContext
 ): boolean {
+  const scan = (ctx.flatScan ||= ['', enterModifier, false, false])
   for (const key in props) {
     const value = props[key]
     if (typeof value !== 'string' || value.indexOf(':') === -1) continue
     const property = config.shorthands[key] || key
     if (!(property in stylePropsAll) && property !== 'transition') continue
-    scanSource = value
-    scanWanted = modifiers
-    scanFound = false
-    scanRefused = false
-    scanFlatValue(value, lifecycleVisitor)
-    if (scanFound && !scanRefused) return true
+    scan[0] = value
+    scan[1] = modifiers
+    scan[2] = false
+    scan[3] = false
+    scanFlatValue(value, lifecycleHandler, ctx)
+    if (scan[2]) return true
   }
   return false
 }
@@ -143,7 +146,12 @@ export const useComponentState = (
     useAnimations &&
     animationDriver?.avoidReRenders &&
     getPlatformDriver()?.pseudo &&
-    hasFlatModifier(props, config, platformPseudoModifiers)
+    hasFlatModifier(
+      props,
+      config,
+      platformPseudoModifiers,
+      curStateRef as LifecycleScanContext
+    )
   )
 
   const willBeAnimatedClient = (() => {
@@ -172,7 +180,12 @@ export const useComponentState = (
   const isExiting = presenceState?.isPresent === false
   const isEntering = presenceState?.isPresent === true && presenceState.initial !== false
 
-  const hasEnterStyle = hasFlatModifier(props, config, enterModifier)
+  const hasEnterStyle = hasFlatModifier(
+    props,
+    config,
+    enterModifier,
+    curStateRef as LifecycleScanContext
+  )
 
   const hasAnimationThatNeedsHydrate =
     hasAnimationProp &&

package/src/hooks/usePortalThemeState.ts

@@ -1,32 +1,32 @@
 import { useContext } from 'react'
 
 import {
-  getInlineThemeLayer,
+  getThemeUpdateLayer,
   getThemeProviderParent,
   ThemeStateContext,
-  type InlineThemeLayer,
 } from './useThemeState'
 import { useThemeName } from './useThemeName'
+import type { ThemeUpdateState } from '../helpers/themeUpdateState'
 
 export type PortalThemeState = {
   name: string
   /** Root-most first, so a consumer can replay them in authored order. */
-  layers: InlineThemeLayer[]
+  layers: ThemeUpdateState[]
 }
 
 /**
  * The theme state a portal must carry across the mount boundary.
  *
- * A name alone is not enough: `<Theme name="dark" background="#0b2545">` puts
- * its direct values on a CSS custom-property node in the mount ancestry, and
- * portaled content is not a descendant of that node.
+ * A name alone is not enough: `<ThemeUpdate background="#0b2545">` puts its
+ * values on a CSS custom-property node in the mount ancestry, and portaled
+ * content is not a descendant of that node.
  */
 export function usePortalThemeState(): PortalThemeState {
   const name = useThemeName()
-  const layers: InlineThemeLayer[] = []
+  const layers: ThemeUpdateState[] = []
   let cursor: string | undefined = useContext(ThemeStateContext)
   while (cursor) {
-    const layer = getInlineThemeLayer(cursor)
+    const layer = getThemeUpdateLayer(cursor)
     if (layer) layers.unshift(layer)
     cursor = getThemeProviderParent(cursor)
   }

package/src/hooks/useThemeState.ts

@@ -10,7 +10,6 @@ import {
 } from 'react'
 import { getConfig, getSetting } from '../config'
 import { formatDiagnostic } from '../helpers/formatDiagnostic'
-import { getInlineValuesKey, getMergedInlineTheme } from '../helpers/variables'
 import { MISSING_THEME_MESSAGE } from '../constants/constants'
 import type {
   ThemeParsed,
@@ -18,6 +17,7 @@ import type {
   ThemeState,
   UseThemeWithStateProps,
 } from '../types'
+import type { ThemeUpdateState } from '../helpers/themeUpdateState'
 
 type ID = string
 
@@ -44,11 +44,11 @@ export const forceUpdateThemes = () => {
 export const getThemeState = (id: ID) => states.get(id)
 
 /**
- * Direct theme-value layers and the provider chain, both keyed by the id a
+ * ThemeUpdate layers and the provider chain, both keyed by the id a
  * `<Theme>` pushes into `ThemeStateContext`.
  *
  * A portal renders outside its mount ancestry, so it cannot inherit the CSS
- * custom properties a `<Theme background="...">` put on an ancestor node. The
+ * custom properties a `<ThemeUpdate background="...">` put on an ancestor node. The
  * portal bridge walks this chain and replays exactly those layers. It cannot
  * use `ThemeState.parentId`: a state that resolves to the same theme as its
  * parent is a copy of the parent state, so its `parentId` skips a level.
@@ -56,20 +56,15 @@ export const getThemeState = (id: ID) => states.get(id)
  * Only `<Theme>` providers are recorded, which is also the only kind of state
  * whose id can appear in `ThemeStateContext`.
  */
-const inlineThemeLayers = new Map<ID, InlineThemeLayer>()
+const themeUpdateLayers = new Map<ID, ThemeUpdateState>()
 const themeProviderParents = new Map<ID, ID>()
 
-export type InlineThemeLayer = {
-  inlineValues: NonNullable<UseThemeWithStateProps['inlineValues']>
-  inlineClassName: string | undefined
-}
-
-export const getInlineThemeLayer = (id: ID) => inlineThemeLayers.get(id)
+export const getThemeUpdateLayer = (id: ID) => themeUpdateLayers.get(id)
 export const getThemeProviderParent = (id: ID) => themeProviderParents.get(id)
 
 /** introspection for devtools and leak probes: entries retained per map */
 export const getThemeProviderChainSizes = () => ({
-  layers: inlineThemeLayers.size,
+  layers: themeUpdateLayers.size,
   parents: themeProviderParents.size,
 })
 
@@ -79,13 +74,10 @@ const registerThemeProviderChain = (
   props: UseThemeWithStateProps
 ) => {
   themeProviderParents.set(id, parentId)
-  if (props.inlineValues) {
-    inlineThemeLayers.set(id, {
-      inlineValues: props.inlineValues,
-      inlineClassName: props.inlineClassName,
-    })
+  if (props._themeUpdate) {
+    themeUpdateLayers.set(id, props._themeUpdate)
   } else {
-    inlineThemeLayers.delete(id)
+    themeUpdateLayers.delete(id)
   }
 }
 
@@ -347,7 +339,7 @@ function cleanupThemeState(r: ThemeStateRef) {
   // both branches retire the id, and a subscribed <Theme> provider only ever
   // takes the first one, so the portal-bridge chain has to be cleared here
   // rather than inside the unsubscribed branch.
-  inlineThemeLayers.delete(r.id)
+  themeUpdateLayers.delete(r.id)
   themeProviderParents.delete(r.id)
 }
 
@@ -421,21 +413,16 @@ const getSnapshotImpl = (r: SnapshotRef): ThemeState => {
     PendingUpdate.get(id)
   )
 
-  // inline <Theme> layer: swap in the merged theme so descendants
+  // ThemeUpdate layer: swap in the merged theme so descendants
   // (which read states.get(parentId).theme) see the patched values. The base
   // is always the PARENT state's theme, never this state's own theme —
   // getNextState can return our previous (already-merged) state, and merging
   // over own output would keep removed patch keys alive. Merged objects are
   // identity-cached per (base theme, values, scheme) so bailouts stay stable.
   let next = nextRaw
-  if (props.inlineValues && nextRaw?.theme) {
+  if (props._themeUpdate && nextRaw?.theme) {
     const parentTheme = states.get(parentId)?.theme || nextRaw.theme
-    const merged = getMergedInlineTheme(
-      parentTheme,
-      props.inlineValues,
-      nextRaw.name,
-      getConfig()
-    )
+    const merged = props._themeUpdate.getTheme(parentTheme, nextRaw.name, getConfig())
     if (merged !== nextRaw.theme) {
       next = { ...nextRaw, theme: merged as ThemeParsed }
     }
@@ -763,14 +750,12 @@ const getPropsKey = ({
   name,
   reset,
   forceClassName,
-  inlineValues,
+  _themeUpdate,
 }: UseThemeWithStateProps) =>
-  `${name || ''}${reset || ''}${forceClassName || ''}${
-    inlineValues ? getInlineValuesKey(inlineValues) : ''
-  }`
+  `${name || ''}${reset || ''}${forceClassName || ''}${_themeUpdate?.key || ''}`
 
 export const hasThemeUpdatingProps = (props: UseThemeWithStateProps) =>
   'name' in props ||
   'reset' in props ||
   'forceClassName' in props ||
-  'inlineValues' in props
+  '_themeUpdate' in props

package/src/index.ts

@@ -24,7 +24,6 @@ export {
   type NativeViewStateUpdate,
 } from './helpers/nativeStyleEngine'
 export * from './helpers/getThemeCSSRules'
-export * from './helpers/variables'
 export * from './helpers/getVariantExtras'
 export {
   autoVariables,

package/src/theme-update.ts

@@ -0,0 +1,2 @@
+export * from './helpers/variables'
+export * from './views/ThemeUpdate'

package/src/types.tsx

@@ -1055,14 +1055,8 @@ export type ThemeParsed = {
   [key in ThemeKeys]: CoerceToVariable<ThemeDefinition[key]>
 }
 
-type InlineThemeValues = {
-  [Key in ThemeKeys]?: VariableValIn
-}
-
 /**
- * Prop names `<Theme>` owns. Every other prop it receives is read as a theme
- * key, so a theme key or a `createTamagui({ variables })` entry can't use one
- * of these names. development builds report the collision.
+ * Prop names `<Theme>` owns. Inline values are authored on `<ThemeUpdate>`.
  */
 export type ReservedThemePropName =
   | '_isRoot'
@@ -1074,8 +1068,7 @@ export type ReservedThemePropName =
   | 'disable'
   | 'disable-child-theme'
   | 'forceClassName'
-  | 'inlineClassName'
-  | 'inlineValues'
+  | '_themeUpdate'
   | 'name'
   | 'nativeUpdate'
   | 'needsUpdate'
@@ -1159,13 +1152,8 @@ export type UseThemeWithStateProps = ThemeProps & {
   passThrough?: boolean
   disable?: boolean
   needsUpdate?: () => boolean
-  /** inline theme layer: patches merged over the parent theme */
-  inlineValues?: {
-    values?: InlineThemeValues
-    themes?: { [Name in ThemeName]?: InlineThemeValues }
-  }
-  /** the `tvar_` class carrying this layer's custom properties on web */
-  inlineClassName?: string
+  /** opaque internal value patch created by `<ThemeUpdate>` */
+  _themeUpdate?: import('./helpers/themeUpdateState').ThemeUpdateState
   /**
    * native fast path (experimental): called on a theme update instead of
    * re-rendering; return true when the update was committed natively so the
@@ -3373,7 +3361,6 @@ export type SplitStyleProps = {
   noMergeStyle?: boolean
   resolveValues?: ResolveVariableAs
   disableExpandShorthands?: boolean
-  fallbackProps?: Record<string, any>
   hasTextAncestor?: boolean
   // for animations
   willBeAnimated?: boolean // we need to track media queries even before animation
@@ -3474,12 +3461,17 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> =
       children?: React.ReactNode
       disabled?: boolean
     }) => React.ReactNode
-    useAnimatedNumber: UseAnimatedNumber
-    useAnimatedNumberStyle: UseAnimatedNumberStyle
-    useAnimatedNumbersStyle: UseAnimatedNumbersStyle
-    useAnimatedNumberReaction: UseAnimatedNumberReaction
   }
 
+export type AnimationDriverWithAnimatedNumbers<
+  A extends AnimationConfig = AnimationConfig,
+> = AnimationDriver<A> & {
+  useAnimatedNumber: UseAnimatedNumber
+  useAnimatedNumberStyle: UseAnimatedNumberStyle
+  useAnimatedNumbersStyle: UseAnimatedNumbersStyle
+  useAnimatedNumberReaction: UseAnimatedNumberReaction
+}
+
 export type AnimationDriverStub<A extends AnimationConfig = AnimationConfig> =
   AnimationDriverBase<A> & {
     isStub: true

package/src/views/Theme.tsx

@@ -1,60 +1,25 @@
 import { createRefComponent } from '@tamagui/compose-refs'
 import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { getThemeClassNames } from '@tamagui/helpers'
+import { getThemeClassNames, reservedThemeProps } from '@tamagui/helpers'
 import type { MutableRefObject } from 'react'
 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 { warnOnce } from '../helpers/warnOnce'
 import { useThemeWithState } from '../hooks/useTheme'
 import {
   getThemeState,
   hasThemeUpdatingProps,
   ThemeStateContext,
 } from '../hooks/useThemeState'
-import type {
-  ReservedThemePropName,
-  RulesToInsert,
-  ThemeKeys,
-  ThemeProps,
-  ThemeState,
-  UseThemeWithStateProps,
-  VariableValIn,
-} from '../types'
+import type { ThemeProps, ThemeState, UseThemeWithStateProps } from '../types'
 import { ThemeDebug } from './ThemeDebug'
 
-/**
- * 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
-  : () => {}
+type ThemeComponentPropsOnly = UseThemeWithStateProps & { contain?: boolean }
 
 export const Theme = createRefComponent(function Theme(
   props: ThemeComponentPropsOnly,
@@ -66,48 +31,25 @@ export const Theme = createRefComponent(function Theme(
     return props.children
   }
 
-  const { passThrough } = props
-
-  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,
-        ],
+  if (process.env.NODE_ENV === 'development') {
+    for (const key in props) {
+      if (!reservedThemeProps[key]) {
+        warnOnce(
+          `theme-update:${key}`,
+          `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`
+        )
       }
     }
   }
 
-  useInsertEffectCompat(() => {
-    if (rulesToInsert) insertStyleRules(rulesToInsert)
-  }, [inlineCSS?.identifier])
+  const { passThrough } = props
 
-  const themeProps: ThemeComponentPropsOnly = inlineValues
-    ? { ...props, inlineValues, inlineClassName: inlineCSS?.identifier }
-    : props
+  const isRoot = !!props['_isRoot']
 
   // 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(themeProps, isRoot, true)
+  const [_, themeState] = useThemeWithState(props, isRoot, true)
 
   useIsomorphicLayoutEffect(() => {
     if (process.env.TAMAGUI_TARGET !== 'native') return
@@ -142,7 +84,7 @@ export const Theme = createRefComponent(function Theme(
   return getThemedChildren(
     themeState,
     finalChildren,
-    themeProps,
+    props,
     isRoot,
     stateRef,
     passThrough
@@ -261,10 +203,9 @@ 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
+    // ThemeUpdate values ride the anonymous Theme span it creates, and land
+    // even when the resolved theme name itself did not change
+    const inlineClassName = passThrough ? undefined : props._themeUpdate?.className
 
     children = (
       <span

package/src/views/ThemeUpdate.tsx

@@ -0,0 +1,88 @@
+import { createRefComponent, type RefComponent } from '@tamagui/compose-refs'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import React from 'react'
+import { getConfig } from '../config'
+import {
+  insertStyleRules,
+  shouldInsertStyleRules,
+  updateRules,
+} from '../helpers/insertStyleRule'
+import type { ThemeUpdateState } from '../helpers/themeUpdateState'
+import {
+  getInlineValuesFromProps,
+  getInlineValuesKey,
+  getMergedInlineTheme,
+  getVariablesCSSRules,
+  type InlineValues,
+} from '../helpers/variables'
+import type {
+  ReservedThemePropName,
+  RulesToInsert,
+  ThemeKeys,
+  VariableValIn,
+} from '../types'
+import { Theme } from './Theme'
+
+type ThemeUpdateValues = string extends ThemeKeys
+  ? {}
+  : {
+      [Key in Exclude<ThemeKeys, ReservedThemePropName>]?: VariableValIn
+    }
+
+export type ThemeUpdateProps = ThemeUpdateValues & { children?: React.ReactNode }
+
+const useInsertEffectCompat = isWeb
+  ? React.useInsertionEffect || useIsomorphicLayoutEffect
+  : () => {}
+
+const updateStates = new WeakMap<InlineValues, ThemeUpdateState>()
+
+export function createThemeUpdateState(
+  values: InlineValues,
+  className?: string
+): ThemeUpdateState {
+  const cached = updateStates.get(values)
+  if (cached) return cached
+  const state: ThemeUpdateState = {
+    key: getInlineValuesKey(values),
+    className,
+    values,
+    getTheme(parentTheme, themeName, config) {
+      return getMergedInlineTheme(parentTheme, values, themeName, config) as any
+    },
+  }
+  updateStates.set(values, state)
+  return state
+}
+
+export const ThemeUpdate: RefComponent<unknown, ThemeUpdateProps> = createRefComponent(
+  function ThemeUpdate(props: ThemeUpdateProps, ref) {
+    'use no memo'
+
+    const config = getConfig()
+    const values = getInlineValuesFromProps(props, config)
+    const css =
+      process.env.TAMAGUI_TARGET === 'native' || !values
+        ? null
+        : getVariablesCSSRules(values, config)
+    let rulesToInsert: RulesToInsert | null = null
+    if (css && shouldInsertStyleRules(css.identifier)) {
+      updateRules(css.identifier, css.rules)
+      rulesToInsert = {
+        [css.identifier]: ['variables', '', css.identifier, undefined, css.rules],
+      }
+    }
+
+    useInsertEffectCompat(() => {
+      if (rulesToInsert) insertStyleRules(rulesToInsert)
+    }, [css?.identifier])
+
+    if (!values) return props.children
+
+    return (
+      <Theme ref={ref} _themeUpdate={createThemeUpdateState(values, css?.identifier)}>
+        {props.children}
+      </Theme>
+    )
+  }
+)