@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/createStyledHOC.tsx

@@ -0,0 +1,88 @@
+import React, { type ReactNode, type Ref as ReactRef } from 'react'
+import {
+  componentDisplayName,
+  setComponentDisplayName,
+} from './helpers/componentDisplayName'
+import { themeable } from './helpers/themeable'
+import type {
+  GetFinalProps,
+  StaticConfig,
+  StyledHOCMergedProps,
+  StyledHOCOptions,
+  TamaguiComponent,
+  TamaDefer,
+} from './types'
+
+export function createStyledHOC<
+  Props,
+  Ref,
+  NonStyledProps,
+  BaseStyles extends object,
+  VariantProps,
+  ParentStaticProperties,
+  CustomProps extends object = {},
+>(
+  component: TamaguiComponent<
+    Props,
+    Ref,
+    NonStyledProps,
+    BaseStyles,
+    VariantProps,
+    ParentStaticProperties
+  >,
+  render: (
+    props: NoInfer<
+      Props extends TamaDefer
+        ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
+        : Props
+    > &
+      CustomProps,
+    ref?: ReactRef<NoInfer<Ref>>
+  ) => ReactNode,
+  options?: StyledHOCOptions
+): TamaguiComponent<
+  // with no custom props the wrapper adds nothing to the prop surface, so keep
+  // the base component's deferred props: styled() then composes it through the
+  // same lazy path as any styled component instead of re-expanding a fully
+  // computed prop type (which hits TS2590 "union too complex" downstream)
+  keyof CustomProps extends never
+    ? Props
+    : StyledHOCMergedProps<
+        Props extends TamaDefer
+          ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
+          : Props,
+        CustomProps
+      >,
+  Ref,
+  NonStyledProps & CustomProps,
+  BaseStyles,
+  VariantProps,
+  ParentStaticProperties
+> {
+  const staticConfig = component.staticConfig
+
+  const extendedConfig: StaticConfig = {
+    ...staticConfig,
+    ...options?.staticConfig,
+    neverFlatten: true,
+    isHOC: true,
+    isStyledHOC: false,
+  }
+
+  let out: any = function StyledHOCComponent(props: any) {
+    const { ref, ...rest } = props
+    return render(rest, ref)
+  }
+
+  out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
+
+  if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLED_HOC) {
+    out = React.memo(out)
+  }
+
+  const displayName = options?.displayName || (component as any)[componentDisplayName]
+  setComponentDisplayName(out, displayName)
+
+  out.staticConfig = extendedConfig
+  return out
+}

package/src/createTamagui.ts

@@ -9,10 +9,12 @@ import {
   createThemeCSS,
   createTokenCSS,
   getCSS as getCSSHelper,
+  type GetCSSState,
 } from './helpers/createDesignSystem'
 import { scanAllSheets } from './helpers/insertStyleRule'
 import { proxyThemesToParents } from './helpers/proxyThemeToParents'
 import { ensureThemeVariable } from './helpers/themes'
+import { mergeConfigVariablesIntoTheme } from './helpers/variables'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
 import { Tamagui } from './Tamagui'
@@ -26,7 +28,6 @@ import type {
   TamaguiInternalConfig,
   ThemeParsed,
   ThemesLikeObject,
-  TokensMerged,
   TokensParsed,
   Variable,
 } from './types'
@@ -36,6 +37,18 @@ import type {
  * Following the principle: only add px to predefined categories that need them.
  * Custom categories default to unitless.
  */
+// css keywords are case-insensitive, so the rejection is too
+const reservedCssIdentsLower: ReadonlySet<string> = new Set([
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'none',
+  'auto',
+  'transparent',
+  'currentcolor',
+])
+
 function shouldTokenCategoryHaveUnits(category: string): boolean {
   // From TokenCategories type: 'color' | 'space' | 'size' | 'radius' | 'zIndex'
   // These are the only predefined categories that should get px units
@@ -53,9 +66,49 @@ function initializeTamaguiConfig(config: TamaguiInternalConfig) {
   configureMedia(config)
 }
 
+export function installTamaguiConfig(config: TamaguiInternalConfig) {
+  setTokens(config.tokensParsed)
+  initializeTamaguiConfig(config)
+  return config
+}
+
+function createParsedTokens(tokensIn: CreateTamaguiProps['tokens']): TokensParsed {
+  const parsed: Record<string, any> = createVariables(tokensIn || {})
+  for (const category of ['color', 'space', 'size', 'radius', 'zIndex'] as const) {
+    parsed[category] ||= {}
+  }
+  return parsed as TokensParsed
+}
+
+function isNamesOnlyThemeProjection(
+  themes: Record<string, Record<string, unknown>>
+): boolean {
+  const names = Object.keys(themes)
+  if (names.length === 0) return false
+
+  return names.every((name) => {
+    const theme = themes[name]
+    if (!theme || typeof theme !== 'object') return false
+    const variables = Object.keys(theme)
+    return variables.length > 0 && variables.every((key) => theme[key] === undefined)
+  })
+}
+
 export function createTamagui<Conf extends CreateTamaguiProps>(
   configIn: Conf
 ): InferTamaguiConfig<Conf> {
+  // Zero-runtime mode: config parsing and CSS generation run in the separate
+  // 'full' evaluation environment that produces the owned CSS artifact, so
+  // reaching this from a zero client graph means a config reference survived
+  // compilation. Reference erasure is what removes the module; this throw is the
+  // loud secondary failure and the seam Vite and webpack fold the body at. The
+  // full `process.env` comparison is written out here on purpose.
+  if (process.env.TAMAGUI_RUNTIME === 'zero') {
+    throw new Error(
+      `[tamagui zero-runtime] createTamagui ran in a zero-runtime graph. Config parsing and CSS generation happen at build time in this mode and the bundler loads the generated CSS artifact. Remove the client config reference or make this entry full-runtime.`
+    )
+  }
+
   // if config already exists (e.g., from another copy of tamagui in vite ssr), reuse it
   const existingConfig = getConfigMaybe()
 
@@ -66,32 +119,34 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   }
 
   // ensure variables
-  const tokensParsed: TokensParsed = {} as any
-  const tokens = createVariables(configIn.tokens || {})
+  const tokensParsed = createParsedTokens(configIn.tokens)
+  const tokens = tokensParsed
 
   if (configIn.tokens) {
-    // faster lookups
-    const tokensMerged: TokensMerged = {} as any
     for (const cat in tokens) {
-      tokensParsed[cat] = {}
-      tokensMerged[cat] = {}
       const tokenCat = tokens[cat]
       for (const key in tokenCat) {
-        const val = tokenCat[key]
-        const prefixedKey = `$${key}`
-        tokensParsed[cat][prefixedKey] = val as any
-        tokensMerged[cat][prefixedKey] = val as any
-        tokensMerged[cat][key] = val as any
+        // determinism rule: CSS-wide keywords are reserved, so a token by one
+        // of these names is unreachable (the resolver short-circuits reserved
+        // idents before any lookup) and would silently render the CSS keyword
+        if (reservedCssIdentsLower.has(key.toLowerCase())) {
+          throw new Error(
+            `Token tokens.${cat}.${key} takes a reserved CSS-wide keyword name. These always resolve as literal CSS ("${key.toLowerCase()}"), so this token could never be referenced. Rename it.`
+          )
+        }
       }
     }
-    setTokens(tokensMerged)
+    setTokens(tokensParsed)
   }
 
   let foundThemes: DedupedThemes | undefined
   if (configIn.themes) {
     const noThemes = Object.keys(configIn.themes).length === 0
-    if (noThemes && !process.env.TAMAGUI_DID_OUTPUT_CSS) {
-      foundThemes = scanAllSheets(noThemes, tokensParsed)
+    const namesOnlyThemes = isNamesOnlyThemeProjection(configIn.themes)
+    if ((noThemes || namesOnlyThemes) && !process.env.TAMAGUI_DID_OUTPUT_CSS) {
+      // A names-only client projection keeps the grammar/config revision
+      // deterministic while the CSS remains authoritative for actual values.
+      foundThemes = scanAllSheets(true, tokensParsed)
     }
   }
 
@@ -114,7 +169,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
       for (const familyName in fontTokens) {
         const font = fontTokens[familyName]
         const fontParsed = parseFont(font)
-        res[`$${familyName}`] = fontParsed
+        res[familyName] = fontParsed
         if (!fontSizeTokens && fontParsed.size) {
           fontSizeTokens = new Set(Object.keys(fontParsed.size))
         }
@@ -123,34 +178,40 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     })()
   }
 
-  const specificTokens = {}
+  const {
+    defaultSize: _removedDefaultSize,
+    defaultTokens: _removedDefaultTokens,
+    ...settingsIn
+  } = (configIn.settings || {}) as NonNullable<CreateTamaguiProps['settings']> & {
+    defaultSize?: unknown
+    defaultTokens?: unknown
+  }
+  const defaultFontSetting = configIn.settings?.defaultFont
+  const defaultFont = defaultFontSetting
+  const defaultFontToken =
+    (defaultFont
+      ? defaultFont
+      : fontsParsed?.body
+        ? 'body'
+        : Object.keys(fontsParsed || {})[0]) || ''
+  if (defaultFont && !fontsParsed?.[defaultFontToken]) {
+    throw new Error(
+      `settings.defaultFont points to missing font "${defaultFontToken}". Configure fonts.${defaultFont} or choose an existing default.`
+    )
+  }
 
   const themeConfig = (() => {
-    // populate specificTokens (needed for runtime)
-    const sortedTokenKeys = Object.keys(tokens).sort()
-    for (const key of sortedTokenKeys) {
-      const sortedSubKeys = Object.keys(tokens[key]).sort()
-      for (const skey of sortedSubKeys) {
-        const variable = tokens[key][skey] as any as Variable
-        specificTokens[`$${key}.${skey}`] = variable
-
-        if (process.env.NODE_ENV === 'development') {
-          if (typeof variable === 'undefined') {
-            throw new Error(
-              `No value for tokens.${key}.${skey}:\n${JSON.stringify(variable, null, 2)}`
-            )
-          }
-        }
-      }
-    }
-
     // CSS generation (tree-shaken when TAMAGUI_DID_OUTPUT_CSS is set)
     const declarations = createTokenCSS(tokens as any, shouldTokenCategoryHaveUnits)
     const fontDeclarations = createFontCSS(fontsParsed, registerFontVariables)
-    const cssRuleSets = buildCSSRuleSets(declarations, fontDeclarations)
+    const cssRuleSets = buildCSSRuleSets(declarations, fontDeclarations, defaultFontToken)
 
     const themesIn = configIn.themes as ThemesLikeObject
-    const dedupedThemes = foundThemes ?? getThemesDeduped(themesIn, tokens.color)
+    const dedupedThemes =
+      foundThemes ??
+      getThemesDeduped(themesIn, tokens.color, configIn.variables, {
+        tokensParsed,
+      })
     const themes = proxyThemesToParents(dedupedThemes)
 
     return {
@@ -168,38 +229,14 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   // Merge built-in shorthands with user shorthands (user takes precedence)
   const shorthands = { ...builtinShorthands, ...userShorthands }
 
-  const lastCSSIndex = { value: -1 }
+  const cssState: GetCSSState = { lastIndex: -1, static: null }
 
   const getCSS: GetCSS = (opts = {}) => {
-    return getCSSHelper(themeConfig, opts, lastCSSIndex)
+    return getCSSHelper(themeConfig, opts, cssState)
   }
 
   const getNewCSS: GetCSS = (opts) => getCSS({ ...opts, sinceLastCall: true })
 
-  const defaultFontSetting = configIn.settings?.defaultFont
-
-  const defaultFont = (() => {
-    let val = defaultFontSetting
-    if (val?.[0] === '$') {
-      val = val.slice(1)
-    }
-    return val
-  })()
-
-  const defaultPositionSetting = configIn.settings?.defaultPosition || 'static'
-
-  const defaultProps = configIn.defaultProps || {}
-  // apply defaultPosition via defaultProps when not static
-  if (process.env.TAMAGUI_TARGET === 'web' && defaultPositionSetting !== 'static') {
-    defaultProps.View = {
-      ...defaultProps.View,
-      position: defaultPositionSetting,
-    }
-  }
-
-  // ensure prefixed with $
-  const defaultFontToken = defaultFont ? `$${defaultFont}` : ''
-
   // Text inherits font from root via CSS, no need for default fontFamily
   // only explicit fontFamily prop should add font_* class
 
@@ -224,10 +261,9 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     // normalized animations (resolved from multi-driver format if needed)
     animations: resolvedAnimations ?? defaultAnimationDriver,
     animationDrivers,
-    defaultProps,
     settings: {
       webContainerType: 'inline-size',
-      ...configIn.settings,
+      ...settingsIn,
     },
     tokens: tokens as any,
     // vite made this into a function if it wasn't set
@@ -245,7 +281,6 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     getCSS,
     defaultFont,
     fontSizeTokens: fontSizeTokens || new Set(),
-    specificTokens,
     defaultFontToken,
     // const tokens = [...getToken(tokens.size[0])]
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
@@ -270,28 +305,28 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 // dedupes the themes if given them via JS config
 function getThemesDeduped(
   themes: ThemesLikeObject,
-  colorTokens?: Record<string, any>
+  colorTokens?: Record<string, any>,
+  variables?: CreateTamaguiProps['variables'],
+  variablesCtx?: {
+    tokensParsed: TokensParsed
+  }
 ): DedupedThemes {
   const dedupedThemes: DedupedThemes = []
   const existing = new Map<string, DedupedTheme>()
 
-  // Sort theme names for deterministic CSS output order
-  const sortedThemeNames = Object.keys(themes).sort()
+  // keep base themes first so inverse aliases share their declaration blocks
+  const sortedThemeNames = Object.keys(themes).sort((a, b) => {
+    const aIsBase = a === 'light' || a === 'dark'
+    const bIsBase = b === 'light' || b === 'dark'
+    return aIsBase === bIsBase ? a.localeCompare(b) : aIsBase ? -1 : 1
+  })
 
   // first, de-dupe and parse them
   for (const themeName of sortedThemeNames) {
-    // forces us to separate the dark/light themes (otherwise we generate bad t_light prefix selectors)
-    const darkOrLightSpecificPrefix = themeName.startsWith('dark')
-      ? 'dark'
-      : themeName.startsWith('light')
-        ? 'light'
-        : ''
-
     const rawTheme = themes[themeName]
 
     // dont force referential equality but may need something more consistent than JSON.stringify
-    // separate between dark/light
-    const key = darkOrLightSpecificPrefix + JSON.stringify(rawTheme)
+    const key = JSON.stringify(rawTheme)
 
     // if existing, avoid
     if (existing.has(key)) {
@@ -311,6 +346,18 @@ function getThemesDeduped(
       ensureThemeVariable(theme, key)
     }
 
+    // custom variables merge into base themes only; sub-themes inherit them
+    // via proxyThemesToParents (native) and the CSS cascade (web), so a
+    // inline <Theme> patch survives sub-theme switches below it
+    if (variables && variablesCtx && !themeName.includes('_')) {
+      mergeConfigVariablesIntoTheme(
+        theme as any,
+        themeName,
+        variables,
+        variablesCtx.tokensParsed
+      )
+    }
+
     // set deduped
     const deduped: DedupedTheme = {
       names: [themeName],

package/src/createTokens.ts

@@ -2,9 +2,25 @@ import { createVariables } from './createVariables'
 import type { CreateTokens, Variable } from './types'
 
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  if (process.env.NODE_ENV !== 'production') {
+    validateNoTrueTokenKeys(tokens)
+  }
   return createVariables(tokens, process.env.TAMAGUI_TOKEN_PREFIX ?? 't') as any
 }
 
+function validateNoTrueTokenKeys(tokens: CreateTokens) {
+  for (const category in tokens) {
+    const tokenSet = tokens[category]
+    if (!tokenSet || typeof tokenSet !== 'object') continue
+
+    if (Object.prototype.hasOwnProperty.call(tokenSet, 'true')) {
+      throw new Error(
+        `tokens.${category}.true is reserved because boolean values select component defaults. Use an explicit token name instead.`
+      )
+    }
+  }
+}
+
 type NormalizeTokens<A, Type = A[keyof A]> = {
   [Key in keyof A as Key extends number ? `${Key}` : Key]: Variable<Type>
 }

package/src/createVariable.ts

@@ -15,23 +15,38 @@ function constructCSSVariableName(name: string) {
 
 type VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>
 
+// literal "Npx" string values (e.g. "17px") are treated as exact pixel values:
+// parsed to the number for native / arithmetic, flagged needsPx so web keeps
+// the px unit.
+const pxStringRe = /^-?\d*\.?\d+px$/
+
 export const createVariable = <A extends string | number | Variable = any>(
   props: VariableIn<A>,
   skipHash = false
 ): Variable<A> => {
   if (!skipHash && isVariable(props)) return props
   const { key, name, val } = props
-  return {
+  let finalVal: any = val
+  let needsPx = false
+  if (typeof val === 'string' && pxStringRe.test(val)) {
+    finalVal = Number.parseFloat(val)
+    needsPx = true
+  }
+  const variable: Variable<A> = {
     isVar: true,
     key,
     name: skipHash ? name : simpleHash(name, 40),
-    val,
+    val: finalVal,
     variable: isWeb
       ? skipHash
         ? constructCSSVariableName(name)
         : createCSSVariable(name)
       : '',
   }
+  if (needsPx && isWeb) {
+    variable.needsPx = true
+  }
+  return variable
 }
 
 // could do weakmap cache

package/src/createVariables.ts

@@ -27,13 +27,8 @@ export const createVariables = <A extends DeepTokenObject>(
   if (cache.has(tokens)) return tokens
 
   const res: any = {}
-  let i = 0
-  for (let keyIn in tokens) {
-    i++
-    const val = tokens[keyIn]
-    const isPrefixed = keyIn[0] === '$'
-    const keyWithPrefix = isPrefixed ? keyIn : `$${keyIn}`
-    const key = isPrefixed ? keyWithPrefix.slice(1) : keyIn
+  for (const key in tokens) {
+    const val = tokens[key]
 
     if (isVariable(val)) {
       res[key] = val
@@ -48,7 +43,7 @@ export const createVariables = <A extends DeepTokenObject>(
       const finalValue = createVariable({
         val: val.val,
         name,
-        key: keyWithPrefix,
+        key,
       })
       // Only set needsPx flag on web platform, avoid on native
       if (isWeb) {
@@ -60,17 +55,10 @@ export const createVariables = <A extends DeepTokenObject>(
 
     if (val && typeof val === 'object') {
       // recurse
-      res[key] = createVariables(
-        tokens[key] as any,
-        name,
-        false /* note: don't pass isFont down, we want to avoid it past the first level */
-      )
+      res[key] = createVariables(tokens[key] as any, name)
       continue
     }
-    const finalValue = isVariable(val)
-      ? val
-      : createVariable({ val, name, key: keyWithPrefix })
-    res[key] = finalValue
+    res[key] = createVariable({ val, name, key })
   }
 
   cache.set(res, true)

package/src/dom/adapters.ts

@@ -0,0 +1,99 @@
+import type {
+  DOMChangeEvent,
+  DOMClickEvent,
+  DOMImageErrorEvent,
+  DOMImageLoadEvent,
+  DOMInputEvent,
+  DOMKeyEvent,
+} from '@tamagui/dom'
+
+/**
+ * Event payload adapters for the native DOM primitives.
+ *
+ * These are the whole reason a primitive exists rather than the compiler
+ * emitting a bare react native host: a payload can only be built once the
+ * event happens. Each adapter takes the react native event and returns the
+ * cross-platform payload in `@tamagui/dom`'s event types.
+ *
+ * Every adapter is a module-level function taking the author's handler, so the
+ * per-element cost is one closure and only when that handler was passed. An
+ * element with no `onClick` allocates nothing here.
+ */
+
+const noop = () => {}
+const returnFalse = () => false
+
+/** the shape react native reports for a press */
+type PressEvent = { nativeEvent: { pageX?: number; pageY?: number } }
+/** the shape react native reports for text entry and key presses */
+type TextEvent = { nativeEvent: { text?: string; key?: string } }
+type ImageEvent = { nativeEvent: { source?: { width?: number; height?: number } } }
+
+/**
+ * A press carries no modifier keys, no mouse button and nothing to cancel, so
+ * those fields are the values a primary-button click would have on web and the
+ * two cancel methods do nothing. `compatibility.ts` records this.
+ */
+export const clickFromPress =
+  (onClick: (event: DOMClickEvent) => void) => (event: PressEvent) => {
+    onClick({
+      altKey: false,
+      button: 0,
+      ctrlKey: false,
+      defaultPrevented: false,
+      getModifierState: returnFalse,
+      metaKey: false,
+      pageX: event.nativeEvent.pageX ?? 0,
+      pageY: event.nativeEvent.pageY ?? 0,
+      preventDefault: noop,
+      shiftKey: false,
+      stopPropagation: noop,
+      type: 'click',
+    })
+  }
+
+export const changeFromText =
+  (onChange: (event: DOMChangeEvent) => void) => (event: TextEvent) => {
+    onChange({ target: { value: event.nativeEvent.text ?? '' }, type: 'change' })
+  }
+
+export const inputFromText =
+  (onInput: (event: DOMInputEvent) => void) => (event: TextEvent) => {
+    onInput({ target: { value: event.nativeEvent.text ?? '' }, type: 'input' })
+  }
+
+/** react native reports the key that was pressed, and reports submit as Enter */
+export const keyFromKeyPress =
+  (onKeyDown: (event: DOMKeyEvent) => void) => (event: TextEvent) => {
+    onKeyDown({ key: event.nativeEvent.key ?? '', type: 'keydown' })
+  }
+
+export const loadFromImage =
+  (onLoad: (event: DOMImageLoadEvent) => void) => (event: ImageEvent) => {
+    const source = event.nativeEvent.source
+    onLoad({
+      target: { naturalHeight: source?.height, naturalWidth: source?.width },
+      type: 'load',
+    })
+  }
+
+export const errorFromImage = (onError: (event: DOMImageErrorEvent) => void) => () => {
+  onError({ type: 'error' })
+}
+
+/**
+ * Both text-entry change events come from the one react native `onChange`, so
+ * they combine into a single handler rather than each wrapping the other.
+ */
+export const textEntryChange = (
+  onChange: ((event: DOMChangeEvent) => void) | undefined,
+  onInput: ((event: DOMInputEvent) => void) | undefined
+) => {
+  if (!onChange) return onInput && inputFromText(onInput)
+  if (!onInput) return changeFromText(onChange)
+  return (event: TextEvent) => {
+    const value = event.nativeEvent.text ?? ''
+    onChange({ target: { value }, type: 'change' })
+    onInput({ target: { value }, type: 'input' })
+  }
+}

package/src/dom/contract.ts

@@ -0,0 +1,60 @@
+import type {
+  DOMChangeEvent,
+  DOMClickEvent,
+  DOMImageErrorEvent,
+  DOMImageLoadEvent,
+  DOMInputEvent,
+  DOMKeyEvent,
+} from '@tamagui/dom'
+import type { ReactNode, Ref } from 'react'
+
+/**
+ * What the compiler emits for a DOM element on native.
+ *
+ * DOM elements now remain ordinary lowering candidates after structural
+ * validation. The candidate resolves element and authored defaults, block/flex
+ * layout, style() programs, native prop aliases and nested accessibility
+ * objects before it replaces the semantic tag with one of these primitives.
+ * Literal text inside a View-backed tag is wrapped in DOMText transactionally.
+ *
+ * The static primitive owns only work whose value does not exist at build time:
+ * adapting event payloads, exposing the documented DOM-shaped ref facade and
+ * carrying compiler-marked inherited text. Dynamic style() clauses lower to
+ * separate runtime variants that subscribe to Tamagui theme, media and
+ * interaction state. The ref-free, static common path stays hook-free. The
+ * compiler is the fast path rather than a requirement: where it did not run,
+ * the generated `html.native` renders these same primitives through a regular
+ * Tamagui component (see `htmlRuntime.native.tsx`).
+ */
+
+/**
+ * Props already resolved by the compiler and forwarded to the native host.
+ */
+export type ResolvedNativeProps = Readonly<Record<string, unknown>>
+
+export type DOMViewProps = ResolvedNativeProps & {
+  children?: ReactNode
+  ref?: Ref<unknown>
+  /**
+   * Adapted to `onPress`. A view with a click handler renders a Pressable,
+   * because a react native View has no press handling of its own; without one
+   * it stays a plain View and costs nothing.
+   */
+  onClick?: (event: DOMClickEvent) => void
+}
+
+export type DOMTextProps = DOMViewProps
+
+export type DOMImageProps = ResolvedNativeProps & {
+  ref?: Ref<unknown>
+  onClick?: (event: DOMClickEvent) => void
+  onLoad?: (event: DOMImageLoadEvent) => void
+  onError?: (event: DOMImageErrorEvent) => void
+}
+
+export type DOMTextInputProps = ResolvedNativeProps & {
+  ref?: Ref<unknown>
+  onChange?: (event: DOMChangeEvent) => void
+  onInput?: (event: DOMInputEvent) => void
+  onKeyDown?: (event: DOMKeyEvent) => void
+}