@hanzogui/web 3.0.6 → 4.4.0

package/src/createComponent.tsx

@@ -78,7 +78,7 @@ const avoidReRenderKeys = new Set([
   'group',
 ])
 
-if (process.env.HANZO_GUI_TARGET !== 'native' && typeof window !== 'undefined') {
+if (process.env.GUI_TARGET !== 'native' && typeof window !== 'undefined') {
   const cancelPresses = () => {
     // clear all press downs
     componentSetStates.forEach((setState) =>
@@ -248,7 +248,7 @@ export function createComponent<
       }
     }
 
-    if (process.env.HANZO_GUI_TARGET === 'native') {
+    if (process.env.GUI_TARGET === 'native') {
       // todo this could be moved to a cleaner location
       if (!hasSetupBaseViews) {
         hasSetupBaseViews = true
@@ -286,12 +286,12 @@ export function createComponent<
     // direct press events instead — GestureDetector consumes touches before they
     // reach MenuView's native handler, preventing the menu from opening
     const isInsideNativeMenu =
-      process.env.HANZO_GUI_TARGET === 'native'
+      process.env.GUI_TARGET === 'native'
         ? React.useContext(NativeMenuContext)
         : false
 
     if (
-      !process.env.HANZO_GUI_IS_CORE_NODE &&
+      !process.env.GUI_IS_CORE_NODE &&
       process.env.NODE_ENV === 'development' &&
       debugProp === 'profile' &&
       !time
@@ -304,7 +304,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && !time && (globalThis as any).time) {
       time = (globalThis as any).time
     }
-    if (process.env.NODE_ENV === 'development' && time) time`non-gui time (ignore)`
+    if (process.env.NODE_ENV === 'development' && time) time`non-tamagui time (ignore)`
 
     // React inserts default props after your props for some reason...
     // order important so we do loops, you can't just spread because JS does weird things
@@ -528,7 +528,7 @@ export function createComponent<
 
     // internal use only
     const disableThemeProp =
-      process.env.HANZO_GUI_TARGET === 'native' ? false : props['data-disable-theme']
+      process.env.GUI_TARGET === 'native' ? false : props['data-disable-theme']
 
     const disableTheme = disableThemeProp || isHOC
 
@@ -552,7 +552,7 @@ export function createComponent<
     // even when using raw colors (not tokens) since isListeningToTheme is set after useSplitStyles
     themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme
     // on native we optimize theme changes if fastSchemeChange is enabled, otherwise deopt
-    if (process.env.HANZO_GUI_TARGET === 'native') {
+    if (process.env.GUI_TARGET === 'native') {
       themeStateProps.deopt = willBeAnimated
     }
 
@@ -1210,6 +1210,7 @@ export function createComponent<
     const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle
     const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle
     const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle
+
     const attachFocus = Boolean(
       runtimePressStyle ||
       runtimeFocusStyle ||
@@ -1328,18 +1329,26 @@ export function createComponent<
                 }
               }
             : undefined,
+
           onPress: attachPress
             ? (e) => {
                 unPress()
-                // @ts-ignore
-                isWeb && onClick?.(e)
+                if (process.env.GUI_TARGET === 'web') {
+                  // @ts-ignore
+                  onClick?.(e)
+                  // matches RN pressable behavior - only when an explicit press
+                  // handler is set, so pressStyle alone doesn't swallow clicks
+                  if (onPress || onClick) {
+                    e.stopPropagation()
+                  }
+                }
                 onPress?.(e)
-                if (process.env.HANZO_GUI_TARGET === 'web') {
+                if (process.env.GUI_TARGET === 'web') {
                   onLongPress?.(e)
                 }
               }
             : undefined,
-          ...(process.env.HANZO_GUI_TARGET === 'native' &&
+          ...(process.env.GUI_TARGET === 'native' &&
             attachPress &&
             onLongPress && {
               onLongPress: (e) => {
@@ -1381,7 +1390,7 @@ export function createComponent<
         }
       : null
 
-    if (process.env.HANZO_GUI_TARGET === 'native' && events && !asChild) {
+    if (process.env.GUI_TARGET === 'native' && events && !asChild) {
       // replicating TouchableWithoutFeedback
       Object.assign(events, {
         cancelable: !viewProps.rejectResponderTermination,
@@ -1395,7 +1404,7 @@ export function createComponent<
       })
     }
 
-    if (process.env.HANZO_GUI_TARGET === 'web' && events && !isReactNative) {
+    if (process.env.GUI_TARGET === 'web' && events && !isReactNative) {
       Object.assign(viewProps, getWebEvents(events))
     }
 
@@ -1405,11 +1414,33 @@ export function createComponent<
       log(`events`, { events, attachHover, attachPress })
     }
 
+    const propsWithHref = props as typeof props & { href?: unknown }
+    const propsInWithHref = propsIn as typeof propsIn & { href?: unknown }
+
+    const pressDebugDetail =
+      props.testID ??
+      propsIn.testID ??
+      props.accessibilityLabel ??
+      propsIn.accessibilityLabel ??
+      (typeof propsWithHref.href === 'string' ? propsWithHref.href : null) ??
+      (typeof propsInWithHref.href === 'string' ? propsInWithHref.href : null)
+
+    const pressDebugName =
+      [componentName, pressDebugDetail].filter(Boolean).join(':') || null
+
     // EVENTS native - handles focus/blur, input special cases, and RNGH press handling
     // Skip gesture setup for HOC components - they may return null which crashes GestureDetector
     const pressGesture =
-      process.env.HANZO_GUI_TARGET === 'native'
-        ? useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu)
+      process.env.GUI_TARGET === 'native'
+        ? useEvents(
+            events,
+            viewProps,
+            stateRef,
+            staticConfig,
+            isHOC,
+            isInsideNativeMenu,
+            pressDebugName
+          )
         : null
 
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
@@ -1417,7 +1448,7 @@ export function createComponent<
     if (asChild) {
       elementType = Slot
       // on native this is already merged into viewProps in useEvents
-      if (process.env.HANZO_GUI_TARGET === 'web') {
+      if (process.env.GUI_TARGET === 'web') {
         const webStyleEvents = asChild === 'web' || asChild === 'except-style-web'
         const passEvents = getWebEvents(
           {
@@ -1490,9 +1521,16 @@ export function createComponent<
     }
 
     // wrap with GestureDetector for RNGH press handling (native only, no-op on web)
-    // Skip for HOC components - they pass press events to inner component instead
-    if (process.env.HANZO_GUI_TARGET === 'native') {
-      content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC)
+    // Skip for HOC and composite components - they pass press events to inner component instead
+    if (process.env.GUI_TARGET === 'native') {
+      const isCompositeComponent = !isHOC && Component && typeof Component !== 'string'
+      content = wrapWithGestureDetector(
+        content,
+        pressGesture,
+        stateRef,
+        isHOC,
+        isCompositeComponent
+      )
     }
 
     // needs to reset the presence state for nested children
@@ -1539,12 +1577,7 @@ export function createComponent<
     }
 
     // Text components set inText context for children so nested Text can inherit styles
-    if (
-      process.env.HANZO_GUI_TARGET === 'web' &&
-      !asChild &&
-      isText &&
-      !hasTextAncestor
-    ) {
+    if (process.env.GUI_TARGET === 'web' && !asChild && isText && !hasTextAncestor) {
       content = (
         <ComponentContext.Provider {...componentContext} inText={true}>
           {content}
@@ -1561,7 +1594,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 
-    if (process.env.HANZO_GUI_TARGET === 'web') {
+    if (process.env.GUI_TARGET === 'web') {
       if (isReactNative && !asChild) {
         content = (
           <span
@@ -1595,7 +1628,7 @@ export function createComponent<
 
     // SSR style support - for non compiled styles we render them inline until client takes over
     // on client we then switch over to our global sheet insert, because rendering inline is expensive
-    if (process.env.HANZO_GUI_TARGET === 'web' && startedUnhydrated && splitStyles) {
+    if (process.env.GUI_TARGET === 'web' && startedUnhydrated && splitStyles) {
       content = (
         <>
           {content}
@@ -1702,7 +1735,13 @@ export function createComponent<
     component.displayName = staticConfig.componentName
   }
 
-  type ComponentType = GuiComponent<ComponentPropTypes, Ref, BaseProps, BaseStyles, {}>
+  type ComponentType = GuiComponent<
+    ComponentPropTypes,
+    Ref,
+    BaseProps,
+    BaseStyles,
+    {}
+  >
 
   let res: ComponentType = component as any
 
@@ -1732,7 +1771,7 @@ export function createComponent<
 
     out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
 
-    if (extendedConfig.memo || process.env.HANZO_GUI_MEMOIZE_STYLEABLE) {
+    if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) {
       out = React.memo(out)
     }
 
@@ -1792,7 +1831,7 @@ const getCustomRender = (
 
 // avoid passing web-only elements to native
 function getRenderElementForPlatform(potential: ReactElement) {
-  if (process.env.HANZO_GUI_TARGET === 'native') {
+  if (process.env.GUI_TARGET === 'native') {
     if (isHTMLElement(potential)) {
       return
     }

package/src/createGui.ts

@@ -46,6 +46,13 @@ function shouldTokenCategoryHaveUnits(category: string): boolean {
   return UNIT_CATEGORIES.has(category)
 }
 
+// code optimizers were causing issues by not calling both of these as esbuild had compiled them
+// pulling them into a single initializeGuiConfig to prevent that
+function initializeGuiConfig(config: GuiInternalConfig) {
+  setConfig(config)
+  configureMedia(config)
+}
+
 export function createGui<Conf extends CreateGuiProps>(
   configIn: Conf
 ): InferGuiConfig<Conf> {
@@ -83,7 +90,7 @@ export function createGui<Conf extends CreateGuiProps>(
   let foundThemes: DedupedThemes | undefined
   if (configIn.themes) {
     const noThemes = Object.keys(configIn.themes).length === 0
-    if (noThemes && !process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    if (noThemes && !process.env.GUI_DID_OUTPUT_CSS) {
       foundThemes = scanAllSheets(noThemes, tokensParsed)
     }
   }
@@ -137,7 +144,7 @@ export function createGui<Conf extends CreateGuiProps>(
       }
     }
 
-    // CSS generation (tree-shaken when HANZO_GUI_DID_OUTPUT_CSS is set)
+    // CSS generation (tree-shaken when GUI_DID_OUTPUT_CSS is set)
     const declarations = createTokenCSS(tokens as any, shouldTokenCategoryHaveUnits)
     const fontDeclarations = createFontCSS(fontsParsed, registerFontVariables)
     const cssRuleSets = buildCSSRuleSets(declarations, fontDeclarations)
@@ -183,7 +190,7 @@ export function createGui<Conf extends CreateGuiProps>(
 
   const defaultProps = configIn.defaultProps || {}
   // apply defaultPosition via defaultProps when not static
-  if (process.env.HANZO_GUI_TARGET === 'web' && defaultPositionSetting !== 'static') {
+  if (process.env.GUI_TARGET === 'web' && defaultPositionSetting !== 'static') {
     defaultProps.View = {
       ...defaultProps.View,
       position: defaultPositionSetting,
@@ -244,16 +251,17 @@ export function createGui<Conf extends CreateGuiProps>(
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }
 
-  setConfig(config)
-  configureMedia(config)
+  initializeGuiConfig(config)
 
-  if (process.env.NODE_ENV === 'development') {
-    if (process.env.DEBUG?.startsWith('@hanzo/gui')) {
-      console.info('Gui config:', config)
-    }
-    if (!globalThis['Gui']) {
-      globalThis['Gui'] = Gui
-    }
+  if (process.env.NODE_ENV !== 'development') {
+    return config as any
+  }
+
+  if (process.env.DEBUG?.startsWith('@hanzo/gui')) {
+    console.info('Gui config:', config)
+  }
+  if (!globalThis['Gui']) {
+    globalThis['Gui'] = Gui
   }
 
   return config as any

package/src/createTokens.ts

@@ -2,7 +2,7 @@ import { createVariables } from './createVariables'
 import type { CreateTokens, Variable } from './types'
 
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
-  return createVariables(tokens, process.env.HANZO_GUI_TOKEN_PREFIX ?? 't') as any
+  return createVariables(tokens, process.env.GUI_TOKEN_PREFIX ?? 't') as any
 }
 
 type NormalizeTokens<A, Type = A[keyof A]> = {

package/src/createVariable.ts

@@ -10,7 +10,7 @@ import type { PxValue, TokenCategories, Variable } from './types'
  */
 
 function constructCSSVariableName(name: string) {
-  return `var(--${process.env.HANZO_GUI_CSS_VARIABLE_PREFIX || ''}${name})`
+  return `var(--${process.env.GUI_CSS_VARIABLE_PREFIX || ''}${name})`
 }
 
 type VariableIn<A = any> = Pick<Variable<A>, 'key' | 'name' | 'val'>

package/src/eventHandling.native.ts

@@ -1,5 +1,5 @@
 /**
- * Native event handling - uses RNGH when available, falls back to usePressability
+ * Native event handling - uses RNGH when available, falls back to responder system
  */
 
 import { composeEventHandlers } from '@hanzogui/helpers'
@@ -19,7 +19,8 @@ export function useEvents(
   stateRef: { current: GuiComponentStateRef },
   staticConfig: StaticConfig,
   isHOC?: boolean,
-  isInsideNativeMenu?: boolean
+  isInsideNativeMenu?: boolean,
+  debugName?: string | null
 ) {
   // focus/blur events always attached directly
   if (events) {
@@ -34,6 +35,9 @@ export function useEvents(
   const hasPressEvents =
     // its stable and always on if you have in/out/regular
     events?.onPress
+  const hasAnyPressCallbacks = Boolean(
+    events?.onPress || events?.onPressIn || events?.onPressOut || events?.onLongPress
+  )
 
   const gh = getGestureHandler()
 
@@ -72,7 +76,17 @@ export function useEvents(
   // HOC components may return null which crashes GestureDetector (it tries to access
   // _internalInstanceHandle on a null native view). By passing events down, the inner
   // component handles gesture detection at its own level.
-  if (isHOC) {
+  //
+  // Composite component special case - when styled() wraps a non-Tamagui component
+  // (e.g. React.forwardRef), the elementType becomes that composite component.
+  // GestureDetector/responder wrapping around a composite component breaks during
+  // re-renders triggered by pressStyle state changes (the gesture/responder loses
+  // attachment to the native view through the composite layers). Pass events as props
+  // so they flow through to the inner native View.
+  const isCompositeComponent =
+    !isHOC && staticConfig.Component && typeof staticConfig.Component !== 'string'
+
+  if (isHOC || isCompositeComponent) {
     if (events) {
       const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
       Object.assign(viewProps, {
@@ -83,7 +97,7 @@ export function useEvents(
         delayLongPress,
       })
     }
-    // HOCs don't use gesture handler at this level
+    // HOCs and composite components don't use gesture handler at this level
     return null
   }
 
@@ -127,6 +141,7 @@ export function useEvents(
           gestureRef.current = manual
         } else {
           gestureRef.current = gh.createPressGesture({
+            debugName,
             onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
             onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
             onPress: (e: any) => callbacksRef.current.onPress?.(e),
@@ -138,15 +153,21 @@ export function useEvents(
       }
       // TODO update viewProps.hitSlop / events.delayLongPress!
 
+      // Claim responder to block parent RN Pressable/TouchableOpacity from firing.
+      // RNGH handles the actual press, but we need to tell the responder system
+      // that we're handling this touch to prevent it bubbling to parent pressables.
+      if (hasPressEvents) {
+        viewProps.onStartShouldSetResponder = () => true
+        viewProps.onResponderTerminationRequest = () => false
+      }
+
       return gestureRef.current
     }
 
     return null
   }
 
-  // fallback - use usePressability when RNGH not enabled
-  // split into separate file to avoid deep import warnings
-  useMainThreadPressEvents(events, viewProps, hasPressEvents)
+  useMainThreadPressEvents(events, viewProps, hasPressEvents, debugName)
 
   return null
 }
@@ -155,11 +176,12 @@ export function wrapWithGestureDetector(
   content: any,
   gesture: any,
   stateRef: { current: GuiComponentStateRef },
-  isHOC?: boolean
+  isHOC?: boolean,
+  isCompositeComponent?: boolean
 ) {
-  // Skip wrapping for HOC components - they may return null which crashes GestureDetector
-  // (GestureDetector tries to access _internalInstanceHandle on a null native view)
-  if (isHOC) {
+  // Skip wrapping for HOC and composite components - they pass press events
+  // to the inner component via props instead of using GestureDetector
+  if (isHOC || isCompositeComponent) {
     return content
   }
 

package/src/eventHandling.ts

@@ -26,7 +26,8 @@ export function wrapWithGestureDetector(
   content: any,
   _gesture: any,
   _stateRef: { current: any },
-  _isHOC?: boolean
+  _isHOC?: boolean,
+  _isCompositeComponent?: boolean
 ) {
   return content
 }
@@ -38,7 +39,8 @@ export function useEvents(
   _stateRef: { current: any },
   _staticConfig: any,
   _isHOC?: boolean,
-  _isInsideNativeMenu?: boolean
+  _isInsideNativeMenu?: boolean,
+  _debugName?: string | null
 ) {
   return null
 }

package/src/helpers/createDesignSystem.ts

@@ -49,7 +49,7 @@ export function createTokenCSS(
   tokens: Record<string, Record<string, Variable>>,
   shouldTokenCategoryHaveUnits: (category: string) => boolean
 ): string[] {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     const declarations: string[] = []
     const sortedTokenKeys = Object.keys(tokens).sort()
 
@@ -83,7 +83,7 @@ export function createFontCSS(
   string,
   { name: string; declarations: string[]; language?: string; fontParsed: any }
 > {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     const fontDeclarations: Record<
       string,
       { name: string; declarations: string[]; language?: string; fontParsed: any }
@@ -120,7 +120,7 @@ export function buildCSSRuleSets(
   >,
   defaultFontToken: string = '$true'
 ): string[] {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
     const sep = ' '
 
@@ -173,7 +173,7 @@ export function createThemeCSS(
   dedupedThemes: Array<{ names: string[]; theme: any }>,
   configIn: CreateGuiProps
 ): string[] {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     let themeRuleSets: string[] = []
 
     if (isWeb) {
@@ -205,7 +205,7 @@ export function getCSS(
   } = {},
   lastIndex: { value: number }
 ): string {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS && process.env.HANZO_GUI_TARGET === 'web') {
+  if (!process.env.GUI_DID_OUTPUT_CSS && process.env.GUI_TARGET === 'web') {
     const { separator = '\n', sinceLastCall, exclude } = opts
 
     if (sinceLastCall && lastIndex.value >= 0) {

package/src/helpers/defaultAnimationDriver.tsx

@@ -17,6 +17,7 @@ const createEmptyAnimationDriver = (): AnimationDriver => ({
   ResetPresence: () => noAnimationDriver('ResetPresence'),
   useAnimatedNumber: () => noAnimationDriver('useAnimatedNumber'),
   useAnimatedNumberStyle: () => noAnimationDriver('useAnimatedNumberStyle'),
+  useAnimatedNumbersStyle: () => noAnimationDriver('useAnimatedNumbersStyle'),
   useAnimatedNumberReaction: () => noAnimationDriver('useAnimatedNumberReaction'),
 })
 

package/src/helpers/expandStyle.ts

@@ -17,7 +17,7 @@ const neg1Flex = [
 ] satisfies PropMappedValue
 
 export function expandStyle(key: string, value: any): PropMappedValue {
-  if (process.env.HANZO_GUI_TARGET === 'web') {
+  if (process.env.GUI_TARGET === 'web') {
     if (key === 'flex') {
       if (value === -1) {
         return neg1Flex
@@ -43,7 +43,7 @@ export function expandStyle(key: string, value: any): PropMappedValue {
     }
   }
 
-  if (process.env.HANZO_GUI_TARGET === 'native') {
+  if (process.env.GUI_TARGET === 'native') {
     if (isAndroid && key === 'elevationAndroid') {
       return [['elevation', value]]
     }

package/src/helpers/expandStyles.ts

@@ -2,7 +2,7 @@ import { isWeb } from '@hanzogui/constants'
 import { normalizeShadow } from './normalizeShadow'
 
 export function fixStyles(style: Record<string, any>) {
-  if (process.env.HANZO_GUI_TARGET === 'native') {
+  if (process.env.GUI_TARGET === 'native') {
     if ('elevationAndroid' in style) {
       // @ts-ignore
       style['elevation'] = style.elevationAndroid