@tamagui/web 2.2.0 → 2.3.1

package/src/createComponent.tsx

@@ -1,5 +1,6 @@
 import { composeRefs } from '@tamagui/compose-refs'
 import {
+  getPlatformDriver,
   isClient,
   isNativeDesktop,
   isServer,
@@ -445,6 +446,7 @@ export function createComponent<
       outputStyle,
       willBeAnimated,
       willBeAnimatedClient,
+      platformPseudo,
       startedUnhydrated,
     } = componentState
 
@@ -457,6 +459,25 @@ export function createComponent<
       // `nextState`, clear it. if they diverge (animated components' fast path never
       // calls into React), flush via componentState.setStateShallow here.
       useIsomorphicLayoutEffect(() => {
+        // first: refresh the emitter latch while a self pseudo is active. the driver
+        // keeps the last-emitted snapshot latched across re-renders (so an unrelated
+        // render doesn't snap a hovered style back to base), but a render can change
+        // the styles that FEED the pseudo merge — e.g. a row becoming active removes
+        // its hoverStyle while still hovered — and the stale snapshot would keep
+        // painting over the new base (hover-beats-active-during-scrub).
+        // `updateStyleListener` is rebuilt each render over fresh props/state and
+        // reads `nextState || state`, so re-invoking it re-emits the correct merged
+        // style: identical values when the render was truly unrelated (no visual
+        // change), fresh values when it wasn't. gate on the last-EMITTED pseudo state
+        // (prevPseudoState), not React state — React state can lag the emitter by a
+        // commit, and a stale-true `state.hover` here would resurrect a hover the
+        // emitter already cleared. this must run BEFORE the nextState flush below so
+        // the re-emit still sees the freshest pseudo state.
+        const emitted = stateRef.current.prevPseudoState
+        if (emitted && (emitted.hover || emitted.press || emitted.focus)) {
+          stateRef.current.updateStyleListener?.()
+        }
+
         const pendingState = stateRef.current.nextState
         if (!pendingState) return
         stateRef.current.nextState = undefined
@@ -466,6 +487,24 @@ export function createComponent<
       })
     }
 
+    // renderer-driven pseudo states (setupPlatformDriver): the platform resolves
+    // hover natively per hitbox and pushes flips here, replacing the
+    // mouseEnter/mouseLeave lane on such renderers. the flip applies through the
+    // same setStateShallow the event handlers use — under the (driver-opened)
+    // avoidReRenders gate that's the emitter path: zero React commits, animated
+    // per the declared transition or instant by default. press stays on the
+    // responder event path (it must fire onPress anyway); the driver only owns
+    // the hover trigger for now.
+    useIsomorphicLayoutEffect(() => {
+      if (!platformPseudo || props.disabled) return
+      const pseudoDriver = getPlatformDriver()?.pseudo
+      const host = stateRef.current.host
+      if (!pseudoDriver || !host) return
+      return pseudoDriver.subscribe(host, ({ hovered }) => {
+        stateRef.current.setStateShallow?.({ hover: hovered })
+      })
+    }, [platformPseudo, props.disabled])
+
     // create new context with groups, or else sublings will grab the same one
     const allGroupContexts = useMemo((): AllGroupContexts | null => {
       if (!groupName || props.passThrough) {
@@ -742,7 +781,7 @@ export function createComponent<
 
     if (
       !isPassthrough &&
-      (hasAnimationProp || groupName) &&
+      (hasAnimationProp || groupName || platformPseudo) &&
       animationDriver?.avoidReRenders &&
       !hasEnterExitTransition
     ) {
@@ -790,13 +829,30 @@ export function createComponent<
           stateRef.current.prevPseudoState,
           updatedState,
           nextStyles?.pseudoTransitions,
-          props.transition
+          // platform-pseudo with no declared transition = instant (CSS :hover semantics)
+          props.transition ?? (platformPseudo ? '0ms' : undefined)
         )
 
         // update prev state for next comparison (includes group states)
         stateRef.current.prevPseudoState = extractPseudoState(updatedState)
 
-        useStyleListener((nextStyles?.style || {}) as any, effectiveTransition)
+        // a self pseudo being active means the emitted style is a transient hover/press/focus
+        // override (it's not in React state under avoidReRenders), so the worklet must keep it
+        // latched across incidental re-renders; when none is active this is the base and renders
+        // own it again.
+        const hasActivePseudo = Boolean(
+          updatedState.hover ||
+          updatedState.press ||
+          updatedState.pressIn ||
+          updatedState.focus ||
+          updatedState.focusWithin
+        )
+
+        useStyleListener(
+          (nextStyles?.style || {}) as any,
+          effectiveTransition,
+          hasActivePseudo
+        )
       }
 
       function updateGroupListeners() {
@@ -1011,7 +1067,8 @@ export function createComponent<
         stateRef.current.prevPseudoState,
         state,
         splitStyles?.pseudoTransitions,
-        props.transition
+        // platform-pseudo with no declared transition = instant (CSS :hover semantics)
+        props.transition ?? (platformPseudo ? '0ms' : undefined)
       )
 
       // add effectiveTransition to splitStyles for drivers to consume
@@ -1254,7 +1311,12 @@ export function createComponent<
     )
 
     const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle
-    const needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle)
+    // with a platform pseudo driver the hover STATE is driver-sourced; only keep
+    // the JS hover listeners when something else needs them (dynamic group
+    // children, or the user's own onMouseEnter/Leave handlers below).
+    const needsHoverState = Boolean(
+      hasDynamicGroupChildren || (runtimeHoverStyle && !platformPseudo)
+    )
     const attachHover =
       (isWeb || isNativeDesktop) &&
       !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave)

package/src/helpers/mainThreadPressEvents.native.ts

@@ -80,9 +80,23 @@ export function useMainThreadPressEvents(
     ref.current.longPressTimer = null
   }
 
-  viewProps.onStartShouldSetResponder = () => !events.disabled
+  // user-supplied responder props (the View's raw RN gesture API) must keep
+  // working: blindly overwriting them here silently killed any press-hold-drag
+  // gesture built on onResponderMove/onResponderRelease whenever the element
+  // also had hover/press events. compose instead — user handler first, then
+  // the press synthesis.
+  const userStartShouldSet = viewProps.onStartShouldSetResponder
+  const userGrant = viewProps.onResponderGrant
+  const userRelease = viewProps.onResponderRelease
+  const userTerminate = viewProps.onResponderTerminate
+  const userTerminationRequest = viewProps.onResponderTerminationRequest
+  const userMove = viewProps.onResponderMove
+
+  viewProps.onStartShouldSetResponder = (e: any) =>
+    Boolean(userStartShouldSet?.(e)) || !events.disabled
 
   viewProps.onResponderGrant = (e: any) => {
+    userGrant?.(e)
     cleanup()
     ref.current.state = 'pressing'
 
@@ -103,6 +117,7 @@ export function useMainThreadPressEvents(
   }
 
   viewProps.onResponderRelease = (e: any) => {
+    userRelease?.(e)
     const wasLongPressed = ref.current.state === 'longPressed'
     cleanup()
 
@@ -120,6 +135,7 @@ export function useMainThreadPressEvents(
   }
 
   viewProps.onResponderTerminate = (e: any) => {
+    userTerminate?.(e)
     cleanup()
     if (ref.current.state === 'active' || ref.current.state === 'longPressed') {
       deactivate(e)
@@ -127,11 +143,13 @@ export function useMainThreadPressEvents(
     ref.current.state = 'idle'
   }
 
-  viewProps.onResponderTerminationRequest = () => {
+  viewProps.onResponderTerminationRequest = (e: any) => {
+    if (userTerminationRequest) return userTerminationRequest(e)
     return events.cancelable !== false
   }
 
   viewProps.onResponderMove = (e: any) => {
+    userMove?.(e)
     events.onPressMove?.(e)
   }
 }

package/src/hooks/useComponentState.ts

@@ -1,4 +1,4 @@
-import { isServer, isWeb } from '@tamagui/constants'
+import { getPlatformDriver, isServer, isWeb } from '@tamagui/constants'
 import { useCreateShallowSetState } from '@tamagui/is-equal-shallow'
 import { useDidFinishSSR, useIsClientOnly } from '@tamagui/use-did-finish-ssr'
 import { useRef, useState } from 'react'
@@ -63,8 +63,22 @@ export const useComponentState = (
     curStateRef.hasAnimated = true
   }
 
+  // a renderer platform driver with native pseudo states (react-native-gpui)
+  // makes ANY component with runtime pseudo styles ride the animation-driver
+  // emitter path — no per-site transition/animation prop required. the flip is
+  // driver-sourced (hover) or event-sourced (press/focus) but either way applies
+  // through the emitter with zero React commits; with no transition declared it
+  // resolves instant (see createComponent's effectiveTransition default).
+  const platformPseudo = Boolean(
+    !isHOC &&
+    useAnimations &&
+    animationDriver?.avoidReRenders &&
+    getPlatformDriver()?.pseudo &&
+    ('hoverStyle' in props || 'pressStyle' in props || 'focusStyle' in props)
+  )
+
   const willBeAnimatedClient = (() => {
-    const next = !!(hasAnimationProp && !isHOC && useAnimations)
+    const next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations)
     return Boolean(next || curStateRef.hasAnimated)
   })()
 
@@ -247,6 +261,7 @@ export const useComponentState = (
     outputStyle,
     willBeAnimated,
     willBeAnimatedClient,
+    platformPseudo,
   }
 }
 

package/src/opacityModifier.test-d.ts

@@ -0,0 +1,65 @@
+/**
+ * type tests for the opacity modifier syntax (e.g., $color/50)
+ *
+ * the runtime already supports this syntax in getTokenForKey, but the types
+ * were not accepting it. these tests verify that color tokens with opacity
+ * modifiers are now type-safe.
+ */
+
+import { expectTypeOf, describe, test } from 'vitest'
+import type { ColorTokens, FontColorTokens, GetThemeValueForKey } from './types'
+
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
+type ColorTokenKey = `color${Digit}${Digit}${Digit}`
+
+describe('opacity modifier types', () => {
+  test('ColorTokens accepts opacity modifier syntax', () => {
+    // should accept token with opacity modifier
+    const colorWithOpacity: ColorTokens = '$color/50'
+    const colorWithFullOpacity: ColorTokens = '$color/100'
+    const colorWithLowOpacity: ColorTokens = '$color/10'
+
+    // should still accept regular tokens
+    const regularToken: ColorTokens = '$color'
+    const colorName: ColorTokens = 'red'
+
+    expectTypeOf(colorWithOpacity).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(colorWithFullOpacity).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(colorWithLowOpacity).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(regularToken).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(colorName).toMatchTypeOf<ColorTokens>()
+  })
+
+  test('FontColorTokens accepts opacity modifier syntax', () => {
+    const fontColorNumber: FontColorTokens = 42
+    const fontColorWithOpacity: FontColorTokens = '$bodyColor/50'
+
+    expectTypeOf(fontColorNumber).toMatchTypeOf<FontColorTokens>()
+    expectTypeOf(fontColorWithOpacity).toMatchTypeOf<FontColorTokens>()
+    expectTypeOf<number>().toMatchTypeOf<FontColorTokens>()
+  })
+
+  test('opacity modifier requires token prefix', () => {
+    const validOpacity: ColorTokens = '$color/75'
+    expectTypeOf(validOpacity).toMatchTypeOf<ColorTokens>()
+
+    // @ts-expect-error opacity modifiers only apply to token-like values.
+    const cssColorWithOpacity: ColorTokens = 'red/75'
+    expectTypeOf(cssColorWithOpacity).toMatchTypeOf<ColorTokens>()
+  })
+
+  test('color props accept opacity without expanding large token unions', () => {
+    type LargeColorTokens = `$${ColorTokenKey}` | ColorTokens
+
+    const colorToken: LargeColorTokens = '$color123'
+    const colorTokenWithOpacity: LargeColorTokens = '$color123/50'
+    const propColorTokenWithOpacity: GetThemeValueForKey<'backgroundColor'> =
+      '$color123/50'
+
+    expectTypeOf(colorToken).toMatchTypeOf<LargeColorTokens>()
+    expectTypeOf(colorTokenWithOpacity).toMatchTypeOf<LargeColorTokens>()
+    expectTypeOf(propColorTokenWithOpacity).toMatchTypeOf<
+      GetThemeValueForKey<'backgroundColor'>
+    >()
+  })
+})

package/src/types.tsx

@@ -1699,11 +1699,21 @@ export type SpaceTokens =
   | GetTokenString<keyof Tokens['space']>
   | ThemeValueFallbackSpace
 
-export type ColorTokens =
+// base color token strings (before opacity modifier)
+type ColorTokenBase =
   | SpecificTokensSpecial
   | GetTokenString<keyof Tokens['color']>
   | GetTokenString<keyof ThemeParsed>
+
+// keep this non-expanded. using `${ColorTokenBase}/${number}` preserves stricter
+// token names, but large user token/theme unions hit TS2590.
+type TokenWithOpacity = `$${string}/${number}`
+
+export type ColorTokens =
+  | ColorTokenBase
   | CSSColorNames
+  // opacity modifier: $token/50 → parsed at runtime in getTokenForKey
+  | TokenWithOpacity
 
 export type ZIndexTokens =
   | SpecificTokensSpecial
@@ -1769,7 +1779,9 @@ export type FontWeightValues =
   | 'bold'
   | 'normal'
 export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightValues
-export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
+// font color tokens also support the opacity modifier
+type FontColorTokenBase = `$${GetTokenFontKeysFor<'color'>}`
+export type FontColorTokens = FontColorTokenBase | number | TokenWithOpacity
 export type FontLetterSpacingTokens =
   | `$${GetTokenFontKeysFor<'letterSpacing'>}`
   | number
@@ -3253,7 +3265,11 @@ export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
 type UseStyleListener = (
   nextStyle: Record<string, unknown>,
-  effectiveTransition?: TransitionProp | null
+  effectiveTransition?: TransitionProp | null,
+  // true while a self pseudo (hover/press/focus) is active. lets avoidReRenders drivers know
+  // the emitted style is a transient pseudo override that a real re-render must not be allowed
+  // to reconcile away, vs the no-pseudo base which renders own again.
+  pseudoActive?: boolean
 ) => void
 export type UseStyleEmitter = (cb: UseStyleListener) => void
 

package/types/config.d.ts.map

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

package/types/createComponent.d.ts.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"mainThreadPressEvents.native.d.ts","sourceRoot":"","sources":["../../src/helpers/mainThreadPressEvents.native.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,GAAG,EACd,OAAO,UAAO,EACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,QAyG1B"}
+{"version":3,"file":"mainThreadPressEvents.native.d.ts","sourceRoot":"","sources":["../../src/helpers/mainThreadPressEvents.native.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,GAAG,EACd,OAAO,UAAO,EACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,QA2H1B"}

package/types/hooks/useComponentState.d.ts

@@ -21,5 +21,6 @@ export declare const useComponentState: (props: ViewProps | TextProps | Record<s
     outputStyle: "css" | "inline";
     willBeAnimated: boolean;
     willBeAnimatedClient: boolean;
+    platformPseudo: boolean;
 };
 //# sourceMappingURL=useComponentState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useComponentState.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentState.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EAEV,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C,eAAO,MAAM,iBAAiB,GAC5B,OAAO,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAClD,iBAAiB,iBAAiB,CAAC,iBAAiB,CAAC,EACrD,cAAc,YAAY,EAC1B,QAAQ,qBAAqB;;;;;;;;;;;;;;;;;;;;;CA+N9B,CAAA"}
+{"version":3,"file":"useComponentState.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentState.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EAEV,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE9C,eAAO,MAAM,iBAAiB,GAC5B,OAAO,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAClD,iBAAiB,iBAAiB,CAAC,iBAAiB,CAAC,EACrD,cAAc,YAAY,EAC1B,QAAQ,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CA8O9B,CAAA"}

package/types/types.d.ts

@@ -983,7 +983,9 @@ export type SpecificTokensSpecial = TamaguiSettings extends {
 } ? Val extends 'except-special' | undefined ? never : SpecificTokens : SpecificTokens;
 export type SizeTokens = SpecificTokensSpecial | ThemeValueFallbackSize | GetTokenString<keyof Tokens['size']>;
 export type SpaceTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['space']> | ThemeValueFallbackSpace;
-export type ColorTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed> | CSSColorNames;
+type ColorTokenBase = SpecificTokensSpecial | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed>;
+type TokenWithOpacity = `$${string}/${number}`;
+export type ColorTokens = ColorTokenBase | CSSColorNames | TokenWithOpacity;
 export type ZIndexTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['zIndex']> | ThemeValueFallbackZIndex | number;
 export type RadiusTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['radius']> | ThemeValueFallbackRadius | number | RemString;
 export type NonSpecificTokens = GetTokenString<keyof Tokens['radius']> | GetTokenString<keyof Tokens['zIndex']> | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof Tokens['space']> | GetTokenString<keyof Tokens['size']>;
@@ -1001,7 +1003,8 @@ export type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | numbe
 export type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number | RemString;
 export type FontWeightValues = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | 'bold' | 'normal';
 export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightValues;
-export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number;
+type FontColorTokenBase = `$${GetTokenFontKeysFor<'color'>}`;
+export type FontColorTokens = FontColorTokenBase | number | TokenWithOpacity;
 export type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number | RemString;
 export type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | RNTextStyle['fontStyle'];
 export type FontTransformTokens = `$${GetTokenFontKeysFor<'transform'>}` | RNTextStyle['textTransform'];
@@ -1850,7 +1853,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
     Text?: any;
 };
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>;
-type UseStyleListener = (nextStyle: Record<string, unknown>, effectiveTransition?: TransitionProp | null) => void;
+type UseStyleListener = (nextStyle: Record<string, unknown>, effectiveTransition?: TransitionProp | null, pseudoActive?: boolean) => void;
 export type UseStyleEmitter = (cb: UseStyleListener) => void;
 export type UseAnimationHook = (props: {
     style: Record<string, any>;