@hanzogui/web 3.0.5 → 4.3.1

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,10 @@ 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'
-        ? React.useContext(NativeMenuContext)
-        : false
+      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
@@ -528,7 +526,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 +550,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
     }
 
@@ -1334,12 +1332,12 @@ export function createComponent<
                 // @ts-ignore
                 isWeb && onClick?.(e)
                 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 +1379,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 +1393,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))
     }
 
@@ -1408,7 +1406,7 @@ export function createComponent<
     // 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'
+      process.env.GUI_TARGET === 'native'
         ? useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu)
         : null
 
@@ -1417,7 +1415,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 +1488,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 +1544,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 +1561,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 +1595,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}
@@ -1732,7 +1732,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.GUI_MEMOIZE_STYLEABLE) {
       out = React.memo(out)
     }
 
@@ -1792,7 +1792,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'
@@ -72,7 +72,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 +93,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
   }
 
@@ -144,8 +154,7 @@ export function useEvents(
     return null
   }
 
-  // fallback - use usePressability when RNGH not enabled
-  // split into separate file to avoid deep import warnings
+  // fallback - direct responder system when RNGH not enabled
   useMainThreadPressEvents(events, viewProps, hasPressEvents)
 
   return null
@@ -155,11 +164,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
 }

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