@tamagui/web 2.3.2 → 2.3.3-1782465561627

package/src/hooks/useThemeState.ts

@@ -1,10 +1,11 @@
 import { supportsDynamicColorIOS, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
   createContext,
-  useCallback,
   useContext,
+  useEffect,
   useId,
-  useSyncExternalStore,
+  useReducer,
+  useRef,
   type MutableRefObject,
 } from 'react'
 import { getConfig, getSetting } from '../config'
@@ -54,11 +55,22 @@ export const getRootThemeState = () => rootThemeState
 // extracts base name without scheme: "light_red_surface1" -> "red_surface1"
 const getThemeBaseName = (name: string) => name.replace(/^(light|dark)_/, '')
 
+// useReducer-based force-update; cheaper than useSyncExternalStore's internal
+// useState+useLayoutEffect+useEffect+useDebugValue chain on Hermes.
+const incReducer = (c: number): number => c + 1
+
 export const useThemeState = (
   props: UseThemeWithStateProps,
   isRoot = false,
   keys: MutableRefObject<Set<string> | null>,
-  schemeKeys?: MutableRefObject<Set<string> | null>
+  schemeKeys?: MutableRefObject<Set<string> | null>,
+  // when true, install the propsKey-watching useIsomorphicLayoutEffect that
+  // schedules descendant updates via listenersByParent[id]. Only <Theme>
+  // providers actually push their themeState.id into ThemeStateContext, so
+  // only they can have descendants subscribed under their id. Leaf styled
+  // components pass false (the default) and save one hook slot per mount.
+  // Stable per call-site (rule of hooks satisfied).
+  cascadeOnChange = false
 ): ThemeState => {
   'use no memo'
 
@@ -86,148 +98,257 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
     )
   }
 
+  // useId keeps theme-provider ids tied to the React tree. A process-wide
+  // counter can let children observe a provider context id whose matching
+  // states Map entry was never populated in multi-root/native surfaces.
   const id = useId()
-  const subscribe = useCallback(
-    (cb: Function) => {
-      listenersByParent[parentId] = listenersByParent[parentId] || new Set()
-      listenersByParent[parentId].add(id)
-      allListeners.set(id, () => {
-        PendingUpdate.set(id, shouldForce ? 'force' : true)
-        cb()
-      })
-      return () => {
-        allListeners.delete(id)
-        listenersByParent[parentId].delete(id)
-        localStates.delete(id)
-        states.delete(id)
-        PendingUpdate.delete(id)
-      }
-    },
-    [id, parentId]
-  )
-
   const propsKey = getPropsKey(props)
 
-  const getSnapshot = () => {
-    let local = localStates.get(id)
-    const parentState = states.get(parentId)
-
-    // fast path: nothing changed since last snapshot
-    if (local && !PendingUpdate.has(id)) {
-      if (
-        parentState &&
-        (local as any)._parentName === parentState.name &&
-        (local as any)._propsKey === propsKey
-      ) {
-        return local
-      }
-    }
-
-    // check if this is a scheme-only change (light↔dark) where DynamicColorIOS handles it
-    const isSchemeOnlyChange =
-      process.env.TAMAGUI_TARGET === 'native' &&
-      supportsDynamicColorIOS &&
-      getSetting('fastSchemeChange') &&
-      local &&
-      parentState &&
-      local.scheme !== parentState.scheme &&
-      getThemeBaseName(local.name) === getThemeBaseName(parentState.name)
-
-    // all tracked keys are scheme-optimized = can skip re-render for scheme changes
-    const keysSize = keys?.current?.size ?? 0
-    const schemeKeysSize = schemeKeys?.current?.size ?? 0
-    const allKeysSchemeOptimized = schemeKeysSize === keysSize && keysSize > 0
-
-    const canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized
-
-    const needsUpdate = props.passThrough
-      ? false
-      : isRoot || props.name === 'light' || props.name === 'dark' || props.name === null
-        ? true
-        : !HasRenderedOnce.get(keys)
-          ? true
-          : canSkipForSchemeChange
-            ? false // skip re-render for scheme-only changes with DynamicColorIOS
-            : keys?.current?.size
-              ? true
-              : props.needsUpdate?.()
-
-    const [rerender, next] = getNextState(
-      local,
+  // stable ref-bag for render inputs and the optional subscription cleanup.
+  // lastSnap caches the last getSnapshot result for the subscription bailout.
+  const ref = useRef<ThemeStateRef>(null as any)
+  if (!ref.current) {
+    ref.current = {
+      id,
+      parentId,
       props,
       propsKey,
       isRoot,
-      id,
-      parentId,
-      needsUpdate,
-      PendingUpdate.get(id)
-    )
+      keys,
+      schemeKeys,
+      renderVersion: 0,
+    }
+  } else {
+    // refresh latest values for the stable closures to read
+    ref.current.props = props
+    ref.current.propsKey = propsKey
+    ref.current.isRoot = isRoot
+    ref.current.keys = keys
+    ref.current.schemeKeys = schemeKeys
+    ref.current.parentId = parentId
+  }
+  ref.current.renderVersion++
 
-    PendingUpdate.delete(id)
+  if (process.env.NODE_ENV === 'development' && globalThis.time)
+    globalThis.time`theme-prep-uses`
 
-    // we always create a new localState for every component
-    // that way we can use it to de-opt and avoid renders granularly
-    // we always return the localState object in each component
-    // the global state (states) should always be up to date with the latest
-    if (!local || rerender) {
-      local = { ...next }
-      localStates.set(id, local)
+  // manual subscription replaces useSyncExternalStore: same granular bailout
+  // (getSnapshot returning the same ref → React doesn't re-render), fewer
+  // React-internal hook slots on Hermes. We don't need tearing prevention
+  // here: theme/media updates are event-driven, not transition-driven, and
+  // useReducer in normal mode already gives same-tick batching.
+  const [, forceUpdate] = useReducer(incReducer, 0)
+  const state = getSnapshotImpl(ref.current)
+  ref.current.lastSnap = state
+
+  useEffect(() => {
+    const r = ref.current
+    const renderVersion = r.renderVersion
+
+    if (r.unsubscribe && r.subscribedParentId !== r.parentId) {
+      cleanupThemeSubscription(r)
     }
 
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-      console.groupCollapsed(` ${id} getSnapshot ${rerender}`, local.name, '>', next.name)
-      console.info({
-        props,
-        propsKey,
-        isRoot,
-        parentId,
-        local,
-        next,
-        needsUpdate,
-        isSchemeOnlyChange,
-        allKeysSchemeOptimized,
-        canSkipForSchemeChange,
-      })
-      console.groupEnd()
+    if (shouldSubscribeToTheme(r, cascadeOnChange)) {
+      if (!r.unsubscribe) {
+        const pid = r.parentId
+        const sid = r.id
+        const cb = () => {
+          const next = getSnapshotImpl(r)
+          if (next !== r.lastSnap) {
+            r.lastSnap = next
+            forceUpdate()
+          }
+        }
+
+        listenersByParent[pid] = listenersByParent[pid] || new Set()
+        listenersByParent[pid].add(sid)
+        allListeners.set(sid, () => {
+          PendingUpdate.set(sid, shouldForce ? 'force' : true)
+          cb()
+        })
+        r.subscribedParentId = pid
+        r.unsubscribe = () => {
+          allListeners.delete(sid)
+          listenersByParent[pid]?.delete(sid)
+          localStates.delete(sid)
+          states.delete(sid)
+          PendingUpdate.delete(sid)
+          r.unsubscribe = undefined
+          r.subscribedParentId = undefined
+        }
+      }
+    } else if (r.unsubscribe) {
+      cleanupThemeSubscription(r)
     }
 
-    if (next !== local) {
-      Object.assign(local, next)
-      local.id = id
+    return () => {
+      // react runs passive cleanup before the next effect as well as on unmount.
+      // a newer render bumps renderVersion before that cleanup, so equality here
+      // means this is the final unmount cleanup.
+      if (r.renderVersion === renderVersion) {
+        cleanupThemeState(r)
+      }
     }
-    ;(local as any)._parentName = parentState?.name
-    ;(local as any)._propsKey = propsKey
-    states.set(id, next)
+  })
 
-    return local
+  if (cascadeOnChange) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsomorphicLayoutEffect(() => {
+      if (!HasRenderedOnce.get(keys)) {
+        HasRenderedOnce.set(keys, true)
+        return
+      }
+      if (!propsKey) {
+        if (HadTheme.get(keys)) {
+          // we're removing the last theme, make sure to notify
+          scheduleUpdate(id)
+        }
+        HadTheme.set(keys, false)
+        return
+      }
+      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+        console.warn(` · useTheme(${id}) scheduleUpdate`, propsKey, states.get(id)?.name)
+      }
+      scheduleUpdate(id)
+      HadTheme.set(keys, true)
+    }, [keys, propsKey])
   }
 
-  if (process.env.NODE_ENV === 'development' && globalThis.time)
-    globalThis.time`theme-prep-uses`
+  return state
+}
 
-  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+type SnapshotRef = {
+  id: string
+  parentId: string
+  props: UseThemeWithStateProps
+  propsKey: string
+  isRoot: boolean
+  keys: MutableRefObject<Set<string> | null>
+  schemeKeys?: MutableRefObject<Set<string> | null>
+}
 
-  useIsomorphicLayoutEffect(() => {
-    if (!HasRenderedOnce.get(keys)) {
-      HasRenderedOnce.set(keys, true)
-      return
-    }
-    if (!propsKey) {
-      if (HadTheme.get(keys)) {
-        // we're removing the last theme, make sure to notify
-        scheduleUpdate(id)
-      }
-      HadTheme.set(keys, false)
-      return
-    }
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-      console.warn(` · useTheme(${id}) scheduleUpdate`, propsKey, states.get(id)?.name)
+type ThemeStateRef = SnapshotRef & {
+  renderVersion: number
+  unsubscribe?: () => void
+  subscribedParentId?: string
+  lastSnap?: ThemeState
+}
+
+const shouldSubscribeToTheme = (r: ThemeStateRef, cascadeOnChange: boolean): boolean =>
+  r.isRoot ||
+  cascadeOnChange ||
+  hasThemeUpdatingProps(r.props) ||
+  !!r.keys.current?.size ||
+  !!r.props.needsUpdate?.()
+
+function cleanupThemeSubscription(r: ThemeStateRef) {
+  r.unsubscribe?.()
+}
+
+function cleanupThemeState(r: ThemeStateRef) {
+  if (r.unsubscribe) {
+    cleanupThemeSubscription(r)
+  } else {
+    localStates.delete(r.id)
+    states.delete(r.id)
+    PendingUpdate.delete(r.id)
+  }
+}
+
+const getSnapshotImpl = (r: SnapshotRef): ThemeState => {
+  const { id, parentId, props, propsKey, isRoot, keys, schemeKeys } = r
+  let local = localStates.get(id)
+  const parentState = states.get(parentId)
+
+  // fast path: nothing changed since last snapshot
+  if (local && !PendingUpdate.has(id)) {
+    if (
+      parentState &&
+      (local as any)._parentName === parentState.name &&
+      (local as any)._propsKey === propsKey
+    ) {
+      return local
     }
-    scheduleUpdate(id)
-    HadTheme.set(keys, true)
-  }, [keys, propsKey])
+  }
 
-  return state
+  // check if this is a scheme-only change (light↔dark) where DynamicColorIOS handles it
+  const isSchemeOnlyChange =
+    process.env.TAMAGUI_TARGET === 'native' &&
+    supportsDynamicColorIOS &&
+    getSetting('fastSchemeChange') &&
+    local &&
+    parentState &&
+    local.scheme !== parentState.scheme &&
+    getThemeBaseName(local.name) === getThemeBaseName(parentState.name)
+
+  // all tracked keys are scheme-optimized = can skip re-render for scheme changes
+  const keysSize = keys?.current?.size ?? 0
+  const schemeKeysSize = schemeKeys?.current?.size ?? 0
+  const allKeysSchemeOptimized = schemeKeysSize === keysSize && keysSize > 0
+
+  const canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized
+
+  const needsUpdate = props.passThrough
+    ? false
+    : isRoot || props.name === 'light' || props.name === 'dark' || props.name === null
+      ? true
+      : !HasRenderedOnce.get(keys)
+        ? true
+        : canSkipForSchemeChange
+          ? false // skip re-render for scheme-only changes with DynamicColorIOS
+          : keys?.current?.size
+            ? true
+            : props.needsUpdate?.()
+
+  const [rerender, next] = getNextState(
+    local,
+    props,
+    propsKey,
+    isRoot,
+    id,
+    parentId,
+    needsUpdate,
+    PendingUpdate.get(id)
+  )
+
+  PendingUpdate.delete(id)
+
+  // we always create a new localState for every component
+  // that way we can use it to de-opt and avoid renders granularly
+  // we always return the localState object in each component
+  // the global state (states) should always be up to date with the latest
+  if (!local || rerender) {
+    local = { ...next }
+    localStates.set(id, local)
+  }
+
+  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+    console.groupCollapsed(` ${id} getSnapshot ${rerender}`, local.name, '>', next.name)
+    console.info({
+      props,
+      propsKey,
+      isRoot,
+      parentId,
+      local,
+      next,
+      needsUpdate,
+      isSchemeOnlyChange,
+      allKeysSchemeOptimized,
+      canSkipForSchemeChange,
+    })
+    console.groupEnd()
+  }
+
+  if (next !== local) {
+    Object.assign(local, next)
+    local.id = id
+  }
+  ;(local as any)._parentName = parentState?.name
+  ;(local as any)._propsKey = propsKey
+  states.set(id, next)
+
+  return local
 }
 
 const getNextState = (

package/src/index.ts

@@ -77,10 +77,16 @@ export {
   _disableMediaTouch,
   configureMedia,
   mediaKeyMatch,
+  updateMediaListeners,
   useMedia,
 } from './hooks/useMedia'
 export { mediaObjectToString } from './helpers/mediaObjectToString'
-export { getMedia, mediaQueryConfig, mediaState } from './helpers/mediaState'
+export {
+  getMedia,
+  mediaQueryConfig,
+  mediaState,
+  setMediaState,
+} from './helpers/mediaState'
 export * from './hooks/useProps'
 export * from './hooks/useTheme'
 export * from './hooks/useThemeName'

package/src/types.tsx

@@ -1884,12 +1884,56 @@ export type GetThemeValueForKey<K extends string | symbol | number> =
         : never
       : never)
 
+// keys that accept the first-class "safe" value (-> env(safe-area-inset-*) on
+// web, numeric insets on native). must mirror propEdges in resolveSafeArea.ts.
+// only the longhands are listed; shorthands (pt, mt, ...) inherit via WithShorthands.
+export type SafeAreaValueKeys =
+  | 'padding'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingRight'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'paddingStart'
+  | 'paddingEnd'
+  | 'paddingBlock'
+  | 'paddingInline'
+  | 'paddingBlockStart'
+  | 'paddingBlockEnd'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
+  | 'margin'
+  | 'marginTop'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'marginStart'
+  | 'marginEnd'
+  | 'marginBlock'
+  | 'marginInline'
+  | 'marginBlockStart'
+  | 'marginBlockEnd'
+  | 'marginInlineStart'
+  | 'marginInlineEnd'
+  | 'inset'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'start'
+  | 'end'
+
 export type WithThemeValues<T extends object> = {
-  [K in keyof T]: ThemeValueGet<K> extends never
-    ? K extends keyof ExtraBaseProps
-      ? T[K]
-      : T[K] | 'unset'
-    : GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset'
+  [K in keyof T]:
+    | (ThemeValueGet<K> extends never
+        ? K extends keyof ExtraBaseProps
+          ? T[K]
+          : T[K] | 'unset'
+        : GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset')
+    | (K extends SafeAreaValueKeys ? 'safe' : never)
 }
 
 export type NarrowShorthands = Narrow<Shorthands>

package/src/views/Theme.tsx

@@ -26,7 +26,10 @@ export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, r
 
   const isRoot = !!props['_isRoot']
 
-  const [_, themeState] = useThemeWithState(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(props, isRoot, true)
 
   const disableDirectChildTheme = props['disable-child-theme']
 

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA6B/D,OAAO,KAAK,EAQV,YAAY,EAEZ,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EAOf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AA8J9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEA+lD3B"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA6B/D,OAAO,KAAK,EAQV,YAAY,EAEZ,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EAOf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAwK9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEA+nD3B"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEf,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAIb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AA0BjB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAE9B,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAIhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,EAEjB,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,KACrC,IAAI,GAAG,cAAc,CAAA;AAE1B,eAAO,MAAM,UAAU,MAAM,CAAA;AAoD7B,eAAO,MAAM,cAAc,EAAE,aAo0C5B,CAAA;AA+DD,eAAO,MAAM,WAAW,GACtB,YAAY,aAAa,EACzB,QAAQ,MAAM,EACd,SAAS,MAAM,EACf,sBAAsB,OAAO,KAC5B,SA6HF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAc5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEf,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAIb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,SAAS,EACT,WAAW,EAEZ,MAAM,UAAU,CAAA;AA0BjB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAE9B,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAIhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAC3B,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAEtC,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,EAC3B,KAAK,CAAC,EAAE,SAAS,EAEjB,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,KACrC,IAAI,GAAG,cAAc,CAAA;AAE1B,eAAO,MAAM,UAAU,MAAM,CAAA;AA6D7B,eAAO,MAAM,cAAc,EAAE,aA41C5B,CAAA;AA+DD,eAAO,MAAM,WAAW,GACtB,YAAY,aAAa,EACzB,QAAQ,MAAM,EACd,SAAS,MAAM,EACf,sBAAsB,OAAO,KAC5B,SA6HF,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,aAc5B,CAAA"}

package/types/helpers/pointerEvents.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pointerEvents.native.d.ts","sourceRoot":"","sources":["../../src/helpers/pointerEvents.native.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QAqI1D"}
+{"version":3,"file":"pointerEvents.native.d.ts","sourceRoot":"","sources":["../../src/helpers/pointerEvents.native.ts"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QA4I1D"}

package/types/hooks/useMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,WAAW,EAEX,qBAAqB,EACrB,aAAa,EACb,WAAW,EACZ,MAAM,UAAU,CAAA;AAKjB,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,KAAG,OAKxC,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,WAMzC,CAAA;AAOD,eAAO,MAAM,qBAAqB,GAAI,KAAK,MAAM,WAShD,CAAA;AAMD,eAAO,MAAM,cAAc,GAAI,QAAQ,qBAAqB,SAe3D,CAAA;AAaD,wBAAgB,mBAAmB,SAkClC;AAID,wBAAgB,oBAAoB,SAEnC;AAED,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA;CAC1B,CAAA;AAID,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,GAAG,EACR,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,QAW1B;AASD,wBAAgB,QAAQ,CACtB,gBAAgB,CAAC,EAAE,iBAAiB,EACpC,KAAK,CAAC,EAAE,SAAS,GAChB,aAAa,CAyEf;AAKD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,OAAO,QAE9C;AAED,wBAAgB,aAAa,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,WAAW,2BAa1E;AAED,eAAO,MAAM,iCAAiC,GAC5C,UAAU,MAAM,EAChB,KAAK,MAAM,EACX,YAAY,aAAa,EACzB,aAAa,OAAO,kBAOrB,CAAA;AAID,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,UAK1C;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAY9C"}
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,WAAW,EAEX,qBAAqB,EACrB,aAAa,EACb,WAAW,EACZ,MAAM,UAAU,CAAA;AAKjB,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,KAAG,OAKxC,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,WAMzC,CAAA;AAOD,eAAO,MAAM,qBAAqB,GAAI,KAAK,MAAM,WAShD,CAAA;AAMD,eAAO,MAAM,cAAc,GAAI,QAAQ,qBAAqB,SAiB3D,CAAA;AAaD,wBAAgB,mBAAmB,SAkClC;AAID,wBAAgB,oBAAoB,SAEnC;AAED,KAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA;CAC1B,CAAA;AA6CD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,GAAG,EACR,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,QAW1B;AASD,wBAAgB,QAAQ,CACtB,gBAAgB,CAAC,EAAE,iBAAiB,EACpC,KAAK,CAAC,EAAE,SAAS,GAChB,aAAa,CAqIf;AAOD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,OAAO,QAE9C;AAED,wBAAgB,aAAa,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,WAAW,2BAa1E;AAED,eAAO,MAAM,iCAAiC,GAC5C,UAAU,MAAM,EAChB,KAAK,MAAM,EACX,YAAY,aAAa,EACzB,aAAa,OAAO,kBAOrB,CAAA;AAID,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,UAK1C;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAY9C"}

package/types/hooks/useTheme.d.ts

@@ -5,5 +5,5 @@ export type ThemeWithState = [ThemeParsed, ThemeState];
 /**
  * Adds a proxy around themeState that tracks update keys
  */
-export declare const useThemeWithState: (props: UseThemeWithStateProps, isRoot?: boolean) => ThemeWithState;
+export declare const useThemeWithState: (props: UseThemeWithStateProps, isRoot?: boolean, forThemeView?: boolean) => ThemeWithState;
 //# sourceMappingURL=useTheme.d.ts.map

package/types/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKtE,eAAO,MAAM,QAAQ,QAKL,YACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;AAEtD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,OAAO,sBAAsB,EAC7B,gBAAc,KACb,cAwBF,CAAA"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAUtE,eAAO,MAAM,QAAQ,QAKL,YACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;AAEtD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,OAAO,sBAAsB,EAC7B,gBAAc,EAQd,sBAAoB,KACnB,cAiCF,CAAA"}

package/types/hooks/useThemeState.d.ts

@@ -5,7 +5,7 @@ export declare const ThemeStateContext: import("react").Context<string>;
 export declare const forceUpdateThemes: () => void;
 export declare const getThemeState: (id: ID) => ThemeState | undefined;
 export declare const getRootThemeState: () => ThemeState | null;
-export declare const useThemeState: (props: UseThemeWithStateProps, isRoot: boolean | undefined, keys: MutableRefObject<Set<string> | null>, schemeKeys?: MutableRefObject<Set<string> | null>) => ThemeState;
+export declare const useThemeState: (props: UseThemeWithStateProps, isRoot: boolean | undefined, keys: MutableRefObject<Set<string> | null>, schemeKeys?: MutableRefObject<Set<string> | null>, cascadeOnChange?: boolean) => ThemeState;
 export declare const hasThemeUpdatingProps: (props: ThemeProps) => boolean;
 export {};
 //# sourceMappingURL=useThemeState.d.ts.map

package/types/hooks/useThemeState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAEV,UAAU,EACV,UAAU,EACV,sBAAsB,EACvB,MAAM,UAAU,CAAA;AAEjB,KAAK,EAAE,GAAG,MAAM,CAAA;AAEhB,eAAO,MAAM,iBAAiB,iCAAwB,CAAA;AAatD,eAAO,MAAM,iBAAiB,YAK7B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,IAAI,EAAE,2BAAmB,CAAA;AAWvD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AAKrD,eAAO,MAAM,aAAa,GACxB,OAAO,sBAAsB,EAC7B,2BAAc,EACd,MAAM,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EAC1C,aAAa,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAChD,UAyKF,CAAA;AAsUD,eAAO,MAAM,qBAAqB,GAAI,OAAO,UAAU,YACW,CAAA"}
+{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAEV,UAAU,EACV,UAAU,EACV,sBAAsB,EACvB,MAAM,UAAU,CAAA;AAEjB,KAAK,EAAE,GAAG,MAAM,CAAA;AAEhB,eAAO,MAAM,iBAAiB,iCAAwB,CAAA;AAatD,eAAO,MAAM,iBAAiB,YAK7B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,IAAI,EAAE,2BAAmB,CAAA;AAWvD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AASrD,eAAO,MAAM,aAAa,GACxB,OAAO,sBAAsB,EAC7B,2BAAc,EACd,MAAM,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EAC1C,aAAa,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EAOjD,yBAAuB,KACtB,UAiJF,CAAA;AA2cD,eAAO,MAAM,qBAAqB,GAAI,OAAO,UAAU,YACW,CAAA"}

package/types/index.d.ts

@@ -52,9 +52,9 @@ export { getConfig, getSetting, getStyleCompat, getThemes, getToken, getTokens,
 export { setNonce } from './helpers/insertStyleRule';
 export * from './constants/constants';
 export * from './hooks/useIsTouchDevice';
-export { _disableMediaTouch, configureMedia, mediaKeyMatch, useMedia, } from './hooks/useMedia';
+export { _disableMediaTouch, configureMedia, mediaKeyMatch, updateMediaListeners, useMedia, } from './hooks/useMedia';
 export { mediaObjectToString } from './helpers/mediaObjectToString';
-export { getMedia, mediaQueryConfig, mediaState } from './helpers/mediaState';
+export { getMedia, mediaQueryConfig, mediaState, setMediaState, } from './helpers/mediaState';
 export * from './hooks/useProps';
 export * from './hooks/useTheme';
 export * from './hooks/useThemeName';

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/types/types.d.ts

@@ -1035,8 +1035,9 @@ export type ThemeValueGet<K extends string | number | symbol> = K extends 'theme
 export type GetThemeValueForKey<K extends string | symbol | number> = ThemeValueGet<K> | ThemeValueFallback | (TamaguiSettings extends {
     autocompleteSpecificTokens: infer Val;
 } ? Val extends true | undefined ? SpecificTokens : never : never);
+export type SafeAreaValueKeys = 'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingHorizontal' | 'paddingVertical' | 'paddingStart' | 'paddingEnd' | 'paddingBlock' | 'paddingInline' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'margin' | 'marginTop' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginHorizontal' | 'marginVertical' | 'marginStart' | 'marginEnd' | 'marginBlock' | 'marginInline' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInlineStart' | 'marginInlineEnd' | 'inset' | 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end';
 export type WithThemeValues<T extends object> = {
-    [K in keyof T]: ThemeValueGet<K> extends never ? K extends keyof ExtraBaseProps ? T[K] : T[K] | 'unset' : GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset';
+    [K in keyof T]: (ThemeValueGet<K> extends never ? K extends keyof ExtraBaseProps ? T[K] : T[K] | 'unset' : GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset') | (K extends SafeAreaValueKeys ? 'safe' : never);
 };
 export type NarrowShorthands = Narrow<Shorthands>;
 export type Longhands = NarrowShorthands[keyof NarrowShorthands];