@hanzogui/toast 3.0.2 → 7.0.0

package/src/ToastImpl.tsx

@@ -1,7 +1,7 @@
 import { useIsPresent } from '@hanzogui/animate-presence'
 import { useComposedRefs } from '@hanzogui/compose-refs'
 import { isWeb } from '@hanzogui/constants'
-import type { GetProps, GuiElement } from '@hanzogui/core'
+import type { GetProps, HanzoguiElement } from '@hanzogui/core'
 import {
   View,
   Theme,
@@ -21,8 +21,17 @@ import type {
   Animated,
   GestureResponderEvent,
   PanResponderGestureState,
+  PanResponder as PanResponderType,
 } from 'react-native'
-import { PanResponder } from 'react-native'
+
+// Lazy load PanResponder only on native to avoid SSR issues
+const getPanResponder = (): typeof PanResponderType | null => {
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require('react-native').PanResponder
+  }
+  return null
+}
 import { TOAST_CONTEXT, TOAST_NAME } from './constants'
 import { ToastAnnounce } from './ToastAnnounce'
 import type { ScopedProps, SwipeDirection } from './ToastProvider'
@@ -53,7 +62,7 @@ const ToastImplFrame = styled(YStack, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
   },
 })
 
@@ -152,7 +161,7 @@ type ToastImplProps = ScopedProps<
   ToastImplPrivateProps & ToastImplFrameProps & ToastExtraProps
 >
 
-const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>(
+const ToastImpl = React.forwardRef<HanzoguiElement, ToastImplProps>(
   (props, forwardedRef) => {
     const {
       scope,
@@ -172,7 +181,7 @@ const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>(
     } = props
     const isPresent = useIsPresent()
     const context = useToastProviderContext(scope)
-    const [node, setNode] = React.useState<GuiElement | null>(null)
+    const [node, setNode] = React.useState<HanzoguiElement | null>(null)
     const composedRefs = useComposedRefs(forwardedRef, setNode)
     const duration = durationProp || context.duration
     const closeTimerStartTimeRef = React.useRef(0)
@@ -261,7 +270,7 @@ const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>(
 
     const { animationDriver } = useConfiguration()
     if (!animationDriver) {
-      throw new Error('Must set animations in gui.config.ts')
+      throw new Error('Must set animations in hanzogui.config.ts')
     }
 
     const { useAnimatedNumber, useAnimatedNumberStyle } = animationDriver
@@ -281,6 +290,8 @@ const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>(
     })
 
     const panResponder = React.useMemo(() => {
+      const PanResponder = getPanResponder()
+      if (!PanResponder) return null
       return PanResponder.create({
         onMoveShouldSetPanResponder: (e, gesture) => {
           const shouldMove = shouldGrantGestureMove(context.swipeDirection, gesture)
@@ -330,7 +341,8 @@ const ToastImpl = React.forwardRef<GuiElement, ToastImplProps>(
         {announceTextContent && (
           <ToastAnnounce
             scope={scope}
-            // toasts are always role=status to avoid stuttering issues with role=alert in SRs
+            // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+            // biome-ignore lint/a11y/useSemanticElements: <explanation>
             role="status"
             aria-live={type === 'foreground' ? 'assertive' : 'polite'}
             aria-atomic

package/src/ToastItemFrame.tsx

@@ -0,0 +1,136 @@
+/**
+ * Shared visual styled components for toast items.
+ * Shared across web and native — imported by ToastComposable.
+ */
+
+import { styled } from '@hanzogui/core'
+import { XStack, YStack } from '@hanzogui/stacks'
+import { SizableText } from '@hanzogui/text'
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastPositionWrapper - handles absolute positioning and stacking animations
+ * On web: uses Hanzogui transition/enterStyle/exitStyle
+ * On native: replaced by Animated.View with useAnimatedStyle
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastPositionWrapper = styled(YStack, {
+  name: 'ToastPositionWrapper',
+  pointerEvents: 'auto',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  opacity: 1,
+  scale: 1,
+  y: 0,
+  x: 0,
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastItemFrame - visual styling for the toast
+ * Shared across web and native — the visual appearance of the toast card.
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastItemFrame = styled(YStack, {
+  name: 'ToastItem',
+  userSelect: 'none',
+  cursor: 'default',
+  focusable: true,
+
+  variants: {
+    unstyled: {
+      false: {
+        backgroundColor: '$background',
+        borderRadius: '$6',
+        paddingHorizontal: '$4',
+        paddingVertical: '$3',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+        shadowColor: 'rgba(0, 0, 0, 0.15)',
+        shadowOffset: { width: 0, height: 4 },
+        shadowRadius: 12,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineColor: '$color8',
+          outlineStyle: 'solid',
+        },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastCloseFrame
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastCloseFrame = styled(XStack, {
+  name: 'ToastClose',
+  render: 'button',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+
+  variants: {
+    unstyled: {
+      false: {
+        width: 18,
+        height: 18,
+        borderRadius: '$10',
+        backgroundColor: '$background',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+        shadowColor: 'rgba(0, 0, 0, 0.08)',
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 3,
+        hoverStyle: { backgroundColor: '$color3' },
+        pressStyle: { backgroundColor: '$color4' },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastActionFrame - for action/cancel buttons with text
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastActionFrame = styled(XStack, {
+  name: 'ToastAction',
+  render: 'button',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+
+  variants: {
+    unstyled: {
+      false: {
+        borderRadius: '$2',
+        paddingHorizontal: '$2',
+        height: 24,
+        backgroundColor: '$color5',
+        hoverStyle: { backgroundColor: '$color6' },
+        pressStyle: { backgroundColor: '$color7' },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultCloseIcon
+ * -----------------------------------------------------------------------------------------------*/
+
+export const DefaultCloseIcon = () => (
+  <SizableText size="$1" color="$color11">
+    ✕
+  </SizableText>
+)

package/src/ToastPortal.tsx

@@ -1,6 +1,6 @@
+import { isWeb } from '@hanzogui/constants'
 import { Portal } from '@hanzogui/portal'
 import type { ReactNode } from 'react'
-import { Platform } from 'react-native'
 import { ReprogapateToastProvider, type ToastProviderContextValue } from './ToastProvider'
 
 export function ToastPortal(props: {
@@ -10,7 +10,7 @@ export function ToastPortal(props: {
 }) {
   const { context, children, zIndex } = props
   let content = children
-  if (Platform.OS === 'android' || Platform.OS === 'ios') {
+  if (!isWeb) {
     content = (
       <ReprogapateToastProvider context={context}>{children}</ReprogapateToastProvider>
     )

package/src/ToastProvider.tsx

@@ -1,5 +1,5 @@
 import { createCollection } from '@hanzogui/collection'
-import type { NativeValue, GuiElement } from '@hanzogui/core'
+import type { NativeValue, HanzoguiElement } from '@hanzogui/core'
 import { createStyledContext } from '@hanzogui/core'
 import { startTransition } from '@hanzogui/start-transition'
 import * as React from 'react'
@@ -15,9 +15,16 @@ import type { BurntToastOptions } from './types'
 
 const PROVIDER_NAME = 'ToastProvider'
 
-const [Collection, useCollection] = createCollection<GuiElement>('Toast')
+const [Collection, useCollection] = createCollection<HanzoguiElement>('Toast')
 
-export type SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'
+export type SwipeDirection =
+  | 'vertical'
+  | 'up'
+  | 'down'
+  | 'horizontal'
+  | 'left'
+  | 'right'
+  | 'auto'
 
 export type ToastProviderContextValue = {
   id: string
@@ -27,8 +34,8 @@ export type ToastProviderContextValue = {
   swipeDirection: SwipeDirection
   swipeThreshold: number
   toastCount: number
-  viewports: Record<string, GuiElement | null>
-  onViewportChange(name: string, viewport: GuiElement): void
+  viewports: Record<string, HanzoguiElement | null>
+  onViewportChange(name: string, viewport: HanzoguiElement): void
   onToastAdd(): void
   onToastRemove(): void
   isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>
@@ -114,7 +121,7 @@ const ToastProvider: React.FC<ToastProviderProps> = (
   const isClosePausedRef = React.useRef(false)
 
   const handleViewportChange = React.useCallback(
-    (name: string, viewport: GuiElement | null) => {
+    (name: string, viewport: HanzoguiElement | null) => {
       startTransition(() => {
         setViewports((prev) => ({ ...prev, [name]: viewport }))
       })

package/src/ToastState.ts

@@ -0,0 +1,398 @@
+import type React from 'react'
+import type { CreateNativeToastOptions, NativeToastRef } from './types'
+
+// counter for generating unique toast ids
+let toastsCounter = 1
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading'
+
+export interface ToastT {
+  id: string | number
+  title: React.ReactNode | (() => React.ReactNode)
+  description?: React.ReactNode | (() => React.ReactNode)
+  type?: ToastType
+  icon?: React.ReactNode
+  jsx?: React.ReactElement
+  dismissible?: boolean
+  duration?: number
+  promise?: PromiseT
+  action?: ToastAction
+  cancel?: ToastAction
+  closeButton?: boolean
+  onDismiss?: (toast: ToastT) => void
+  onAutoClose?: (toast: ToastT) => void
+  // internal
+  delete?: boolean
+  // style overrides
+  style?: React.CSSProperties
+  className?: string
+  // native options
+  burntOptions?: CreateNativeToastOptions['burntOptions']
+  notificationOptions?: CreateNativeToastOptions['notificationOptions']
+  /** Custom user data */
+  data?: Record<string, unknown>
+}
+
+export interface ToastAction {
+  label: string
+  onClick?: (event: React.MouseEvent) => void
+}
+
+export interface ToastToDismiss {
+  id: string | number
+  dismiss: true
+}
+
+export type ExternalToast = Omit<
+  ToastT,
+  'id' | 'title' | 'type' | 'delete' | 'promise'
+> & {
+  id?: string | number
+}
+
+export type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>)
+
+export interface PromiseData<Data = any> {
+  loading?: React.ReactNode | (() => React.ReactNode)
+  success?: React.ReactNode | ((data: Data) => React.ReactNode)
+  error?: React.ReactNode | ((error: any) => React.ReactNode)
+  description?: React.ReactNode | ((data: any) => React.ReactNode)
+  finally?: () => void
+}
+
+type TitleT = React.ReactNode | (() => React.ReactNode)
+
+/**
+ * Observer class that manages toast state globally.
+ * Follows the pattern from Sonner for a clean, decoupled architecture.
+ */
+class Observer {
+  subscribers: Array<(toast: ToastT | ToastToDismiss) => void> = []
+  toasts: ToastT[] = []
+  dismissedToasts: Set<string | number> = new Set()
+
+  /**
+   * Subscribe to toast state changes.
+   * Returns an unsubscribe function.
+   */
+  subscribe = (subscriber: (toast: ToastT | ToastToDismiss) => void) => {
+    this.subscribers.push(subscriber)
+
+    return () => {
+      const index = this.subscribers.indexOf(subscriber)
+      if (index > -1) {
+        this.subscribers.splice(index, 1)
+      }
+    }
+  }
+
+  /**
+   * Publish a toast to all subscribers
+   */
+  publish = (data: ToastT) => {
+    this.subscribers.forEach((subscriber) => subscriber(data))
+  }
+
+  /**
+   * Add a new toast to the internal array and publish to subscribers
+   */
+  addToast = (data: ToastT) => {
+    this.publish(data)
+    this.toasts = [...this.toasts, data]
+  }
+
+  /**
+   * Create or update a toast
+   */
+  create = (
+    data: ExternalToast & {
+      title?: TitleT
+      type?: ToastType
+      promise?: PromiseT
+      jsx?: React.ReactElement
+    }
+  ) => {
+    const { title, ...rest } = data
+    const id =
+      typeof data?.id === 'number' || (typeof data?.id === 'string' && data.id.length > 0)
+        ? data.id
+        : toastsCounter++
+
+    const alreadyExists = this.toasts.find((toast) => toast.id === id)
+    const dismissible = data.dismissible ?? true
+
+    // if this toast was previously dismissed, clear that
+    if (this.dismissedToasts.has(id)) {
+      this.dismissedToasts.delete(id)
+    }
+
+    if (alreadyExists) {
+      // update existing toast
+      this.toasts = this.toasts.map((toast) => {
+        if (toast.id === id) {
+          this.publish({ ...toast, ...data, id, title, dismissible })
+          return { ...toast, ...data, id, title, dismissible }
+        }
+        return toast
+      })
+    } else {
+      this.addToast({ title, ...rest, dismissible, id } as ToastT)
+    }
+
+    return id
+  }
+
+  /**
+   * Dismiss a toast by id, or all toasts if no id provided
+   */
+  dismiss = (id?: string | number) => {
+    if (id !== undefined) {
+      this.dismissedToasts.add(id)
+      // use requestAnimationFrame to batch updates
+      requestAnimationFrame(() => {
+        this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }))
+      })
+    } else {
+      // dismiss all
+      this.toasts.forEach((toast) => {
+        this.subscribers.forEach((subscriber) =>
+          subscriber({ id: toast.id, dismiss: true })
+        )
+      })
+    }
+
+    return id
+  }
+
+  /**
+   * Show a basic toast message
+   */
+  message = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'default' })
+  }
+
+  /**
+   * Show a success toast
+   */
+  success = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'success' })
+  }
+
+  /**
+   * Show an error toast
+   */
+  error = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'error' })
+  }
+
+  /**
+   * Show a warning toast
+   */
+  warning = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'warning' })
+  }
+
+  /**
+   * Show an info toast
+   */
+  info = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'info' })
+  }
+
+  /**
+   * Show a loading toast
+   */
+  loading = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'loading' })
+  }
+
+  /**
+   * Show a toast for a promise, automatically transitioning through
+   * loading -> success/error states
+   */
+  promise = <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => {
+    if (!data) {
+      return
+    }
+
+    let id: string | number | undefined = undefined
+
+    // show loading state if provided
+    if (data.loading !== undefined) {
+      id = this.create({
+        promise,
+        type: 'loading',
+        title: data.loading,
+        description:
+          typeof data.description !== 'function' ? data.description : undefined,
+        // loading toasts shouldn't auto-dismiss
+        duration: Number.POSITIVE_INFINITY,
+      })
+    }
+
+    const p = Promise.resolve(promise instanceof Function ? promise() : promise)
+
+    let shouldDismiss = id !== undefined
+    let result: ['resolve', ToastData] | ['reject', unknown]
+
+    const originalPromise = p
+      .then(async (response) => {
+        result = ['resolve', response]
+
+        // check if response is an HTTP error
+        if (isHttpResponse(response) && !response.ok) {
+          shouldDismiss = false
+          const errorMsg =
+            typeof data.error === 'function'
+              ? await data.error(`HTTP error! status: ${response.status}`)
+              : data.error
+          const description =
+            typeof data.description === 'function'
+              ? await data.description(`HTTP error! status: ${response.status}`)
+              : data.description
+
+          this.create({ id, type: 'error', title: errorMsg, description })
+        } else if (data.success !== undefined) {
+          shouldDismiss = false
+          const successMsg =
+            typeof data.success === 'function'
+              ? await data.success(response)
+              : data.success
+          const description =
+            typeof data.description === 'function'
+              ? await data.description(response)
+              : data.description
+
+          this.create({ id, type: 'success', title: successMsg, description })
+        }
+      })
+      .catch(async (error) => {
+        result = ['reject', error]
+
+        if (data.error !== undefined) {
+          shouldDismiss = false
+          const errorMsg =
+            typeof data.error === 'function' ? await data.error(error) : data.error
+          const description =
+            typeof data.description === 'function'
+              ? await data.description(error)
+              : data.description
+
+          this.create({ id, type: 'error', title: errorMsg, description })
+        }
+      })
+      .finally(() => {
+        if (shouldDismiss) {
+          // toast is still in load state, dismiss it
+          this.dismiss(id)
+          id = undefined
+        }
+        data.finally?.()
+      })
+
+    // return a promise that can be unwrapped
+    const unwrap = () =>
+      new Promise<ToastData>((resolve, reject) =>
+        originalPromise
+          .then(() => (result[0] === 'reject' ? reject(result[1]) : resolve(result[1])))
+          .catch(reject)
+      )
+
+    if (typeof id !== 'string' && typeof id !== 'number') {
+      return { unwrap }
+    } else {
+      return Object.assign(id, { unwrap })
+    }
+  }
+
+  /**
+   * Show a custom JSX toast
+   */
+  custom = (jsx: (id: string | number) => React.ReactElement, data?: ExternalToast) => {
+    const id = data?.id ?? toastsCounter++
+    this.create({ jsx: jsx(id), ...data, id })
+    return id
+  }
+
+  /**
+   * Get all active (non-dismissed) toasts
+   */
+  getActiveToasts = () => {
+    return this.toasts.filter((toast) => !this.dismissedToasts.has(toast.id))
+  }
+
+  /**
+   * Get full toast history
+   */
+  getHistory = () => {
+    return this.toasts
+  }
+}
+
+function isHttpResponse(data: any): data is Response {
+  return (
+    data &&
+    typeof data === 'object' &&
+    'ok' in data &&
+    typeof data.ok === 'boolean' &&
+    'status' in data &&
+    typeof data.status === 'number'
+  )
+}
+
+// singleton instance
+export const ToastState = new Observer()
+
+// basic toast function
+const toastFunction = (title: TitleT, data?: ExternalToast) => {
+  return ToastState.create({ ...data, title })
+}
+
+// getters
+const getHistory = () => ToastState.getHistory()
+const getToasts = () => ToastState.getActiveToasts()
+
+/**
+ * Main toast API - call directly or use methods like toast.success()
+ *
+ * @example
+ * // basic usage
+ * toast('Hello world')
+ *
+ * // with type
+ * toast.success('Saved!')
+ * toast.error('Something went wrong')
+ *
+ * // with options
+ * toast('Hello', { duration: 5000 })
+ *
+ * // promise toast
+ * toast.promise(fetch('/api'), {
+ *   loading: 'Loading...',
+ *   success: 'Done!',
+ *   error: 'Failed'
+ * })
+ *
+ * // custom JSX
+ * toast.custom((id) => <MyToast id={id} />)
+ *
+ * // dismiss
+ * const id = toast('Hello')
+ * toast.dismiss(id)
+ * toast.dismiss() // dismiss all
+ */
+export const toast = Object.assign(toastFunction, {
+  success: ToastState.success,
+  error: ToastState.error,
+  warning: ToastState.warning,
+  info: ToastState.info,
+  loading: ToastState.loading,
+  promise: ToastState.promise,
+  custom: ToastState.custom,
+  dismiss: ToastState.dismiss,
+  message: ToastState.message,
+  getHistory,
+  getToasts,
+})
+
+export type { NativeToastRef }