@hanzogui/native 2.0.0-rc.41-hanzoai.5

package/src/safeAreaState.ts

@@ -0,0 +1,50 @@
+import { createGlobalState } from './globalState'
+import type { SafeAreaState, SafeAreaInsets, SafeAreaFrame } from './types'
+
+const state = createGlobalState<SafeAreaState>(`safe_area`, {
+  enabled: false,
+  useSafeAreaInsets: null,
+  useSafeAreaFrame: null,
+  initialMetrics: null,
+})
+
+const defaultInsets: SafeAreaInsets = { top: 0, right: 0, bottom: 0, left: 0 }
+const defaultFrame: SafeAreaFrame = { x: 0, y: 0, width: 0, height: 0 }
+
+export interface SafeAreaAccessor {
+  readonly isEnabled: boolean
+  readonly state: SafeAreaState
+  set(updates: Partial<SafeAreaState>): void
+  /** Get initial insets (non-reactive, for style resolution) */
+  getInsets(): SafeAreaInsets
+  /** Get initial frame (non-reactive) */
+  getFrame(): SafeAreaFrame
+}
+
+export function getSafeArea(): SafeAreaAccessor {
+  return {
+    get isEnabled() {
+      return state.get().enabled
+    },
+    get state() {
+      return state.get()
+    },
+    set(updates: Partial<SafeAreaState>) {
+      Object.assign(state.get(), updates)
+    },
+    getInsets() {
+      const s = state.get()
+      if (!s.enabled || !s.initialMetrics) {
+        return defaultInsets
+      }
+      return s.initialMetrics.insets
+    },
+    getFrame() {
+      const s = state.get()
+      if (!s.enabled || !s.initialMetrics) {
+        return defaultFrame
+      }
+      return s.initialMetrics.frame
+    },
+  }
+}

package/src/setup-burnt.ts

@@ -0,0 +1,38 @@
+/**
+ * Setup burnt for Hanzogui native toasts.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-burnt'
+ * ```
+ *
+ * This automatically detects and configures burnt for use with
+ * native Toast functionality.
+ */
+
+import { getBurnt } from './burntState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__hanzogui_native_burnt_setup) return
+  g.__hanzogui_native_burnt_setup = true
+
+  try {
+    const Burnt = require('burnt') as typeof import('burnt')
+
+    if (Burnt) {
+      getBurnt().set({
+        enabled: true,
+        toast: Burnt.toast,
+        dismissAllAlerts: Burnt.dismissAllAlerts,
+      })
+    }
+  } catch {
+    // burnt not installed
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-expo-linear-gradient.ts

@@ -0,0 +1,36 @@
+/**
+ * Setup expo-linear-gradient for Hanzogui.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-expo-linear-gradient'
+ * ```
+ *
+ * This automatically detects and configures expo-linear-gradient.
+ * If not installed, LinearGradient will log a warning on native.
+ */
+
+import { getLinearGradient } from './linearGradientState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__hanzogui_native_linear_gradient_setup) return
+  g.__hanzogui_native_linear_gradient_setup = true
+
+  try {
+    const expoLinearGradient = require('expo-linear-gradient')
+    if (expoLinearGradient?.LinearGradient) {
+      getLinearGradient().set({
+        enabled: true,
+        Component: expoLinearGradient.LinearGradient,
+      })
+    }
+  } catch {
+    // expo-linear-gradient not installed, will use CSS fallback
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-gesture-handler.ts

@@ -0,0 +1,78 @@
+/**
+ * Setup gesture handler for Hanzogui native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * // auto-setup with all features enabled
+ * import '@hanzogui/native/setup-gesture-handler'
+ *
+ * // or configure selectively
+ * import { setupGestureHandler } from '@hanzogui/native/setup-gesture-handler'
+ * setupGestureHandler({ pressEvents: true, sheet: false })
+ * ```
+ *
+ * This automatically detects and configures react-native-gesture-handler
+ * for use with Sheet and other gesture-aware components.
+ */
+
+import { getGestureHandler } from './gestureState'
+
+export interface GestureHandlerConfig {
+  /** use RNGH for press events on Hanzogui components (default: true) */
+  pressEvents?: boolean
+  /** use RNGH for Sheet drag gestures (default: true) */
+  sheet?: boolean
+}
+
+let currentConfig: GestureHandlerConfig = {
+  pressEvents: true,
+  sheet: true,
+}
+
+export function getGestureHandlerConfig(): GestureHandlerConfig {
+  return currentConfig
+}
+
+export function setupGestureHandler(config?: GestureHandlerConfig): void {
+  const g = globalThis as any
+
+  // override config if provided
+  if (config) {
+    currentConfig = config
+  }
+
+  // allow re-running setup to change config
+  const isFirstRun = !g.__hanzogui_native_gesture_setup_complete
+  g.__hanzogui_native_gesture_setup_complete = true
+
+  try {
+    // dynamically require RNGH - it should already be imported by the app
+    const rngh = require('react-native-gesture-handler')
+    const { Gesture, GestureDetector, ScrollView } = rngh
+
+    if (Gesture && GestureDetector) {
+      // only enable if pressEvents is true
+      getGestureHandler().set({
+        enabled: currentConfig.pressEvents !== false,
+        Gesture,
+        GestureDetector,
+        ScrollView: ScrollView || null,
+      })
+
+      // sheet state - only enable if sheet is true
+      g.__hanzogui_sheet_gesture_state__ = {
+        enabled: currentConfig.sheet !== false,
+        Gesture,
+        GestureDetector,
+        ScrollView: ScrollView || null,
+      }
+    }
+  } catch {
+    // RNGH not available, that's fine
+  }
+}
+
+// run setup immediately on import (can be overridden by calling setupGestureHandler)
+setupGestureHandler()

package/src/setup-keyboard-controller.ts

@@ -0,0 +1,60 @@
+/**
+ * Setup keyboard controller for Hanzogui native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-keyboard-controller'
+ * ```
+ *
+ * This automatically detects and configures react-native-keyboard-controller
+ * for use with Sheet and other keyboard-aware components.
+ *
+ * When enabled, Sheet gains:
+ * - Frame-by-frame keyboard tracking (60/120 FPS)
+ * - Smooth gesture + keyboard handoff
+ * - Interactive keyboard dismiss on sheet drag
+ */
+
+import { setKeyboardControllerState } from './keyboardControllerState'
+
+function setup() {
+  const g = globalThis as any
+  if (g.__hanzogui_native_keyboard_controller_setup_complete) {
+    return
+  }
+  g.__hanzogui_native_keyboard_controller_setup_complete = true
+
+  try {
+    // dynamically require keyboard-controller - it should already be imported by the app
+    const rnkc = require('react-native-keyboard-controller')
+    const {
+      KeyboardProvider,
+      KeyboardAwareScrollView,
+      useKeyboardHandler,
+      useReanimatedKeyboardAnimation,
+      KeyboardController,
+      KeyboardEvents,
+      KeyboardStickyView,
+    } = rnkc
+
+    if (useKeyboardHandler && KeyboardProvider) {
+      setKeyboardControllerState({
+        enabled: true,
+        KeyboardProvider: KeyboardProvider || null,
+        KeyboardAwareScrollView: KeyboardAwareScrollView || null,
+        useKeyboardHandler: useKeyboardHandler || null,
+        useReanimatedKeyboardAnimation: useReanimatedKeyboardAnimation || null,
+        KeyboardController: KeyboardController || null,
+        KeyboardEvents: KeyboardEvents || null,
+        KeyboardStickyView: KeyboardStickyView || null,
+      })
+    }
+  } catch {
+    // keyboard-controller not available, that's fine
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-keyboard-controller.web.ts

@@ -0,0 +1,6 @@
+/**
+ * Web stub for keyboard controller setup.
+ * No-op on web - keyboard-controller is native-only.
+ */
+
+// intentionally empty - web doesn't need keyboard-controller

package/src/setup-safe-area.ts

@@ -0,0 +1,56 @@
+/**
+ * Setup react-native-safe-area-context for Hanzogui native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-safe-area'
+ * ```
+ *
+ * This automatically detects and configures react-native-safe-area-context
+ * for use with Hanzogui components that need safe area awareness.
+ *
+ * Note: You must still wrap your app with SafeAreaProvider yourself:
+ * ```tsx
+ * import { SafeAreaProvider } from 'react-native-safe-area-context'
+ * <SafeAreaProvider>
+ *   <App />
+ * </SafeAreaProvider>
+ * ```
+ *
+ * On web, this is a no-op since CSS env(safe-area-inset-*) values work natively.
+ */
+
+import { getSafeArea } from './safeAreaState'
+
+function setup() {
+  // only run on native
+  if (process.env.TAMAGUI_TARGET !== 'native') {
+    return
+  }
+
+  const g = globalThis as any
+  if (g.__hanzogui_native_safe_area_setup_complete) {
+    return
+  }
+  g.__hanzogui_native_safe_area_setup_complete = true
+
+  try {
+    const safeAreaContext = require('react-native-safe-area-context')
+    const { useSafeAreaInsets, useSafeAreaFrame, initialWindowMetrics } = safeAreaContext
+
+    if (useSafeAreaInsets) {
+      getSafeArea().set({
+        enabled: true,
+        useSafeAreaInsets,
+        useSafeAreaFrame: useSafeAreaFrame || null,
+        initialMetrics: initialWindowMetrics || null,
+      })
+    }
+  } catch {
+    // react-native-safe-area-context not available
+  }
+}
+
+setup()

package/src/setup-teleport.ts

@@ -0,0 +1,36 @@
+/**
+ * Setup native portal support for Hanzogui.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-teleport'
+ * ```
+ *
+ * This automatically detects and configures react-native-teleport for portals.
+ * Falls back to legacy RN shims if teleport is not installed.
+ */
+
+import { getPortal } from './portalState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__hanzogui_native_portal_setup) return
+  g.__hanzogui_native_portal_setup = true
+
+  // try teleport first (preferred)
+  try {
+    const teleport = require('react-native-teleport')
+    if (teleport?.Portal && teleport?.PortalHost && teleport?.PortalProvider) {
+      g.__hanzogui_teleport = teleport
+      getPortal().set({ enabled: true, type: 'teleport' })
+      return
+    }
+  } catch {
+    // react-native-teleport not installed, that's ok
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-worklets.ts

@@ -0,0 +1,49 @@
+/**
+ * Setup worklets for Hanzogui native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-worklets'
+ * ```
+ *
+ * This automatically detects and configures react-native-worklets-core
+ * for use with Sheet and other components that benefit from synchronous
+ * native-thread execution.
+ *
+ * When combined with setup-gesture-handler, Sheet gets native-quality
+ * gesture coordination between sheet dragging and scroll views.
+ *
+ * @see https://docs.swmansion.com/react-native-worklets/docs/
+ */
+
+import { getWorklets } from './workletsState'
+
+function setup() {
+  const g = globalThis as any
+  if (g.__hanzogui_native_worklets_setup_complete) {
+    return
+  }
+  g.__hanzogui_native_worklets_setup_complete = true
+
+  try {
+    // dynamically require worklets-core
+    const worklets = require('react-native-worklets-core')
+
+    if (worklets) {
+      getWorklets().set({
+        enabled: true,
+        Worklets: worklets.Worklets,
+        useRunOnJS: worklets.useRunOnJS,
+        useWorklet: worklets.useWorklet,
+        createWorkletContextValue: worklets.createWorkletContextValue,
+      })
+    }
+  } catch {
+    // worklets not available, that's fine - will fall back to JS thread
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-zeego.ts

@@ -0,0 +1,42 @@
+/**
+ * Setup zeego for Hanzogui native menus.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-zeego'
+ * ```
+ *
+ * This automatically detects and configures zeego for use with
+ * Menu and ContextMenu native mode.
+ */
+
+import { getZeego } from './zeegoState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__hanzogui_native_zeego_setup) return
+  g.__hanzogui_native_zeego_setup = true
+
+  try {
+    const DropdownMenu = require('zeego/dropdown-menu')
+    const ContextMenu = require('zeego/context-menu')
+
+    if (DropdownMenu && ContextMenu) {
+      getZeego().set({
+        enabled: true,
+        DropdownMenu,
+        ContextMenu,
+      })
+    }
+  } catch (err) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`Error setting up Zeego`, err)
+    }
+    // zeego not installed
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/types.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react'
+
+export type NativePortalState = {
+  enabled: boolean
+  type: 'teleport' | 'legacy' | null
+}
+
+export interface GestureState {
+  enabled: boolean
+  Gesture: any
+  GestureDetector: any
+  ScrollView: any
+}
+
+export interface WorkletsState {
+  enabled: boolean
+  Worklets: any
+  useRunOnJS: any
+  useWorklet: any
+  createWorkletContextValue: any
+}
+
+export interface SafeAreaInsets {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface SafeAreaFrame {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface SafeAreaMetrics {
+  insets: SafeAreaInsets
+  frame: SafeAreaFrame
+}
+
+export interface SafeAreaState {
+  enabled: boolean
+  useSafeAreaInsets: (() => SafeAreaInsets) | null
+  useSafeAreaFrame: (() => SafeAreaFrame) | null
+  initialMetrics: SafeAreaMetrics | null
+}
+
+export type NativePortalProps = {
+  hostName?: string
+  children: ReactNode
+}
+
+export type NativePortalHostProps = {
+  name: string
+}
+
+export type NativePortalProviderProps = {
+  children: ReactNode
+}
+
+export interface LinearGradientState {
+  enabled: boolean
+  Component: any
+}
+
+export interface ZeegoState {
+  enabled: boolean
+  DropdownMenu: any
+  ContextMenu: any
+}
+
+export interface BurntState {
+  enabled: boolean
+  toast: ((options: any) => void) | null
+  dismissAllAlerts: (() => void) | null
+}
+
+export interface KeyboardControllerState {
+  enabled: boolean
+  KeyboardProvider: any
+  KeyboardAwareScrollView: any
+  useKeyboardHandler: any
+  useReanimatedKeyboardAnimation: any
+  KeyboardController: any
+  KeyboardEvents: any
+  KeyboardStickyView: any
+}

package/src/workletsState.ts

@@ -0,0 +1,30 @@
+import { createGlobalState } from './globalState'
+import type { WorkletsState } from './types'
+
+const state = createGlobalState<WorkletsState>(`worklets`, {
+  enabled: false,
+  Worklets: null,
+  useRunOnJS: null,
+  useWorklet: null,
+  createWorkletContextValue: null,
+})
+
+export interface WorkletsAccessor {
+  readonly isEnabled: boolean
+  readonly state: WorkletsState
+  set(updates: Partial<WorkletsState>): void
+}
+
+export function getWorklets(): WorkletsAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): WorkletsState {
+      return state.get()
+    },
+    set(updates: Partial<WorkletsState>): void {
+      Object.assign(state.get(), updates)
+    },
+  }
+}

package/src/zeegoState.ts

@@ -0,0 +1,28 @@
+import { createGlobalState } from './globalState'
+import type { ZeegoState } from './types'
+
+const state = createGlobalState<ZeegoState>(`zeego`, {
+  enabled: false,
+  DropdownMenu: null,
+  ContextMenu: null,
+})
+
+export interface ZeegoAccessor {
+  readonly isEnabled: boolean
+  readonly state: ZeegoState
+  set(newState: ZeegoState): void
+}
+
+export function getZeego(): ZeegoAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): ZeegoState {
+      return state.get()
+    },
+    set(newState: ZeegoState): void {
+      state.set(newState)
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "isolatedDeclarations": true
+  },
+  "exclude": [
+    "types",
+    "dist",
+    "**/__tests__"
+  ]
+}

package/types/PressBoundary.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, type ViewProps } from "react-native";
+export interface PressBoundaryProps extends ViewProps {
+	enabled?: boolean;
+	/**
+	* Alias for enabling the boundary. The behavior is limited to Hanzogui's
+	* shared press ownership and does not patch arbitrary RN bubbling.
+	*/
+	stopPropagation?: boolean;
+	debugName?: string | null;
+}
+export declare const PressBoundary: React.ForwardRefExoticComponent<PressBoundaryProps & React.RefAttributes<View>>;
+
+//# sourceMappingURL=PressBoundary.d.ts.map

package/types/PressBoundary.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,WAAW,iBAAiB;AAOrC,iBAAiB,2BAA2B,UAAU;CACpD;;;;;CAKA;CACA;;AAiBF,OAAO,cAAM,eAAe,MAAM,0BAChC,qBAAqB,MAAM,cAAc",
+  "names": [],
+  "sources": [
+    "src/PressBoundary.tsx"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import React from 'react'\nimport { View, type ViewProps } from 'react-native'\nimport {\n  claimExternalPressOwnership,\n  releaseExternalPressOwnership,\n  type ExternalPressOwnershipToken,\n} from './gestureState'\n\nexport interface PressBoundaryProps extends ViewProps {\n  enabled?: boolean\n  /**\n   * Alias for enabling the boundary. The behavior is limited to Hanzogui's\n   * shared press ownership and does not patch arbitrary RN bubbling.\n   */\n  stopPropagation?: boolean\n  debugName?: string | null\n}\n\nfunction composeFirst<T extends (...args: any[]) => void>(ours: T, theirs?: T) {\n  return (...args: Parameters<T>) => {\n    ours(...args)\n    theirs?.(...args)\n  }\n}\n\nfunction composeLast<T extends (...args: any[]) => void>(theirs: T | undefined, ours: T) {\n  return (...args: Parameters<T>) => {\n    theirs?.(...args)\n    ours(...args)\n  }\n}\n\nexport const PressBoundary: React.ForwardRefExoticComponent<\n  PressBoundaryProps & React.RefAttributes<View>\n> = React.forwardRef<View, PressBoundaryProps>(function PressBoundary(\n  {\n    enabled,\n    stopPropagation,\n    debugName,\n    onTouchStart,\n    onTouchEnd,\n    onTouchCancel,\n    onResponderGrant,\n    onResponderRelease,\n    onResponderTerminate,\n    ...props\n  },\n  forwardedRef\n) {\n  const tokenRef = React.useRef<ExternalPressOwnershipToken | null>(null)\n  const isEnabled = enabled ?? stopPropagation ?? true\n\n  const claim = React.useCallback((): void => {\n    if (!isEnabled) return\n    if (tokenRef.current) {\n      releaseExternalPressOwnership(tokenRef.current, debugName)\n    }\n    tokenRef.current = claimExternalPressOwnership(debugName)\n  }, [debugName, isEnabled])\n\n  const release = React.useCallback((): void => {\n    if (!tokenRef.current) return\n    releaseExternalPressOwnership(tokenRef.current, debugName)\n    tokenRef.current = null\n  }, [debugName])\n\n  React.useEffect(() => release, [release])\n\n  return (\n    <View\n      ref={forwardedRef}\n      {...props}\n      onTouchStart={composeFirst(claim, onTouchStart)}\n      onTouchEnd={composeLast(onTouchEnd, release)}\n      onTouchCancel={composeLast(onTouchCancel, release)}\n      onResponderGrant={composeFirst(claim, onResponderGrant)}\n      onResponderRelease={composeLast(onResponderRelease, release)}\n      onResponderTerminate={composeLast(onResponderTerminate, release)}\n    />\n  )\n})\n"
+  ]
+}

package/types/burntState.d.ts

@@ -0,0 +1,9 @@
+import type { BurntState } from "./types";
+export interface BurntAccessor {
+	readonly isEnabled: boolean;
+	readonly state: BurntState;
+	set(newState: BurntState): void;
+}
+export declare function getBurnt(): BurntAccessor;
+
+//# sourceMappingURL=burntState.d.ts.map

package/types/burntState.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AACA,cAAc,kBAAkB;AAQhC,iBAAiB,cAAc;UACpB;UACA,OAAO;CAChB,IAAI,UAAU;;AAGhB,OAAO,iBAAS,YAAY",
+  "names": [],
+  "sources": [
+    "src/burntState.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import { createGlobalState } from './globalState'\nimport type { BurntState } from './types'\n\nconst state = createGlobalState<BurntState>(`burnt`, {\n  enabled: false,\n  toast: null,\n  dismissAllAlerts: null,\n})\n\nexport interface BurntAccessor {\n  readonly isEnabled: boolean\n  readonly state: BurntState\n  set(newState: BurntState): void\n}\n\nexport function getBurnt(): BurntAccessor {\n  return {\n    get isEnabled(): boolean {\n      return state.get().enabled\n    },\n    get state(): BurntState {\n      return state.get()\n    },\n    set(newState: BurntState): void {\n      state.set(newState)\n    },\n  }\n}\n"
+  ]
+}