@tamagui/web 2.7.7 → 3.0.0-beta.1097.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

@@ -5,8 +5,9 @@ import { getSetting } from '../config'
 import { ComponentContext } from '../contexts/ComponentContext'
 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'
 
@@ -28,15 +29,17 @@ export function TamaguiProvider({
   config,
   className,
   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()
     updateMediaListeners()
+    if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
+      return stopAccumulatingRules()
+    }
   }, [])
 
   const memoizedInsets = React.useMemo(
@@ -44,13 +47,11 @@ export function TamaguiProvider({
     [insets?.top, insets?.right, insets?.bottom, insets?.left]
   )
 
-  // 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 configuredAnimationDriver = config?.animations as AnimationDriver | undefined
+  const defaultAnimationDriver =
+    !configuredAnimationDriver || configuredAnimationDriver.isStub
+      ? null
+      : configuredAnimationDriver
 
   useEffect(() => {
     defaultAnimationDriver?.onMount?.()
@@ -61,7 +62,11 @@ export function TamaguiProvider({
       animationDriver={defaultAnimationDriver}
       insets={memoizedInsets}
     >
-      <ThemeProvider defaultTheme={defaultTheme} reset={reset} className={className}>
+      <ThemeProvider
+        defaultTheme={defaultTheme}
+        className={className}
+        isSubtreeRoot={isSubtreeRoot}
+      >
         <TamaguiRoot theme={defaultTheme} isRootRoot>
           {children}
         </TamaguiRoot>
@@ -76,20 +81,27 @@ export function TamaguiProvider({
 
   return (
     <>
-      {contents}
+      {!process.env.TAMAGUI_DID_OUTPUT_CSS &&
+        process.env.TAMAGUI_TARGET !== 'native' &&
+        config &&
+        !disableInjectCSS && (
+          <style
+            // react 19 feature to hoist style tags to header:
+            // https://react.dev/reference/react-dom/components/style
+            // @ts-ignore
+            precedence="default"
+            href="tamagui-css"
+            key="tamagui-css"
+          >
+            {config.getCSS()}
+          </style>
+        )}
 
-      {process.env.TAMAGUI_TARGET !== 'native' && config && !disableInjectCSS && (
-        <style
-          // react 19 feature to hoist style tags to header:
-          // https://react.dev/reference/react-dom/components/style
-          // @ts-ignore
-          precedence="default"
-          href="tamagui-css"
-          key="tamagui-css"
-        >
-          {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 { styledDynamic } from '../helpers/styledDynamic'
 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,25 +39,29 @@ export const Text = createComponent<
           suppressHighlighting: true,
         },
 
-  inlineWhenUnflattened: new Set(['fontFamily']),
   inlineProps: new Set(['maxFontSizeMultiplier']),
 
   variants: {
     ...(process.env.TAMAGUI_TARGET === 'web' && {
-      numberOfLines: {
-        1: ellipsisStyle,
-
-        ':number': (numberOfLines) =>
-          numberOfLines >= 1
-            ? {
-                maxWidth: '100%',
-                WebkitLineClamp: numberOfLines,
-                WebkitBoxOrient: 'vertical',
-                display: '-webkit-box',
-                overflow: 'hidden',
-              }
-            : null,
-      },
+      numberOfLines: styledDynamic<number>((numberOfLines) => {
+        if (numberOfLines === 1) {
+          return {
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }
+        }
+        return numberOfLines >= 1
+          ? {
+              maxWidth: '100%',
+              WebkitLineClamp: numberOfLines,
+              WebkitBoxOrient: 'vertical',
+              display: '-webkit-box',
+              overflow: 'hidden',
+            }
+          : null
+      }),
     }),
 
     ellipsis: {
@@ -70,4 +73,11 @@ export const Text = createComponent<
     ...validStyles,
     ...stylePropsTextOnly,
   },
-})
+}
+
+export const Text = createComponent<
+  TextProps,
+  Text,
+  TextNonStyleProps,
+  TextStylePropsBase
+>({ ...textStaticConfig, displayName: 'Text' })

package/src/views/Theme.tsx

@@ -1,27 +1,49 @@
-import { isWeb } from '@tamagui/constants'
+import { createRefComponent } from '@tamagui/compose-refs'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { getThemeClassNames, reservedThemeProps } 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 { variableToString } from '../createVariable'
+import { formatDiagnostic } from '../helpers/formatDiagnostic'
+import {
+  removeNativeStyleScope,
+  updateNativeStyleScope,
+} from '../helpers/nativeStyleEngine'
+import { warnOnce } from '../helpers/warnOnce'
 import { useThemeWithState } from '../hooks/useTheme'
 import {
   getThemeState,
   hasThemeUpdatingProps,
   ThemeStateContext,
 } from '../hooks/useThemeState'
-import type { ThemeProps, ThemeState } from '../types'
+import type { ThemeProps, ThemeState, UseThemeWithStateProps } from '../types'
 import { ThemeDebug } from './ThemeDebug'
 
-type ThemeComponentPropsOnly = ThemeProps & { passThrough?: boolean; contain?: boolean }
+type ThemeComponentPropsOnly = UseThemeWithStateProps & { contain?: boolean }
 
-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
   }
 
+  if (process.env.NODE_ENV === 'development') {
+    for (const key in props) {
+      // bundler dev tooling stamps source locations onto every element
+      // (`data-one-source` on web, `srcloc` on native); those are not values
+      if (!reservedThemeProps[key] && key !== 'srcloc' && !key.startsWith('data-')) {
+        warnOnce(
+          `theme-update:${key}`,
+          `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`
+        )
+      }
+    }
+  }
+
   const { passThrough } = props
 
   const isRoot = !!props['_isRoot']
@@ -31,6 +53,12 @@ export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, r
   // under this id and need to be notified when our propsKey changes.
   const [_, themeState] = useThemeWithState(props, 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']
 
   let finalChildren = disableDirectChildTheme
@@ -41,14 +69,8 @@ export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, r
       )
     : props.children
 
-  if (ref) {
-    try {
-      React.Children.only(finalChildren)
-      // TODO deprecate react 18 and then avoid clone here and just pass prop
-      finalChildren = cloneElement(finalChildren, { ref })
-    } catch {
-      //ok
-    }
+  if (ref && isValidElement(finalChildren)) {
+    finalChildren = cloneElement(finalChildren, { ref } as any)
   }
 
   const stateRef = useRef({
@@ -103,7 +125,7 @@ export function getThemedChildren(
     </ThemeStateContext.Provider>
   )
 
-  const { isInverse, name } = themeState
+  const { isInverse } = themeState
   const requiresExtraWrapper = isInverse || forceClassName
 
   // it only ever progresses from false => true => 'wrapped'
@@ -128,7 +150,20 @@ export function getThemedChildren(
       const parentState = getThemeState(
         themeState.isNew ? themeState.id : themeState.parentId
       )
-      if (!parentState) throw new Error(`‼️010`)
+      if (!parentState) {
+        throw new Error(
+          process.env.NODE_ENV !== 'production'
+            ? 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 }
+              )
+            : '❌ Error 014'
+        )
+      }
       children = Children.toArray(children).map((child) => {
         return isValidElement(child)
           ? passThrough
@@ -166,9 +201,13 @@ export function getThemedChildren(
       ? {}
       : getThemeClassNameAndColor(themeState, props, isRoot)
 
+    // 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
-        className={`${className} is_Theme`}
+        className={`${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : ''}`}
         style={passThrough ? baseStyle : { color, ...baseStyle }}
       >
         {children}
@@ -177,12 +216,9 @@ export function getThemedChildren(
 
     // to prevent tree structure changes always render this if inverse is true or false
     if (state.hasEverThemed === 'wrapped') {
-      // but still calculate if we need the classnames
-      const className = requiresExtraWrapper
-        ? `${
-            name.startsWith('light') ? 't_light' : name.startsWith('dark') ? 't_dark' : ''
-          } _dsp_contents`
-        : `_dsp_contents`
+      const scheme =
+        requiresExtraWrapper && themeState.schemeAuthored && themeState.scheme
+      const className = scheme ? `t_${scheme} _dsp_contents` : '_dsp_contents'
       children = <span className={className}>{children}</span>
     }
 
@@ -206,7 +242,7 @@ const empty = { className: '', color: undefined }
 function getThemeClassNameAndColor(
   themeState: ThemeState,
   props: ThemeProps,
-  isRoot = false
+  isRoot?: boolean
 ) {
   if (!themeState.isNew && !props.forceClassName) {
     return empty
@@ -216,34 +252,8 @@ 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(' ')
+  return {
+    color: themeColor,
+    className: getThemeClassNames(themeState.name, isRoot, themeState.schemeAuthored),
   }
-
-  const className = `${isRoot ? '' : 't_sub_theme'} ${themeClasses}`
-
-  return { color: themeColor, className }
 }
-
-const schemePrefix = /^(dark|light)_/

package/src/views/ThemeDebug.tsx

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

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/ThemeUpdate.tsx

@@ -0,0 +1,90 @@
+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_DID_OUTPUT_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>
+    )
+  }
+)

package/src/views/View.tsx

@@ -5,6 +5,7 @@ import type {
   StackNonStyleProps,
   StackStyle,
   StackStyleBase,
+  StaticConfig,
   TamaguiElement,
 } from '../types'
 
@@ -14,12 +15,19 @@ export type ViewStylePropsBase = StackStyleBase
 export type ViewStyle = StackStyle
 export type ViewProps = ViewNonStyleProps & ViewStyle
 
+/**
+ * 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 = createComponent<
   ViewProps,
   View,
   ViewNonStyleProps,
   ViewStylePropsBase
->({
-  acceptsClassName: true,
-  validStyles,
-})
+>({ ...viewStaticConfig, displayName: '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"}