@tamagui/toast 2.7.7 → 3.0.0-beta.643.1

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@tamagui/toast",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.643.1",
   "source": "src/index.ts",
   "files": [
     "src",
     "types",
-    "dist",
-    "v2"
+    "dist"
   ],
   "type": "module",
   "sideEffects": false,
@@ -23,15 +22,6 @@
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
-    },
-    "./v2": {
-      "types": "./types/v2.d.ts",
-      "react-native": "./dist/esm/v2.native.js",
-      "browser": "./dist/esm/v2.mjs",
-      "module": "./dist/esm/v2.mjs",
-      "import": "./dist/esm/v2.mjs",
-      "require": "./dist/cjs/v2.cjs",
-      "default": "./dist/esm/v2.mjs"
     }
   },
   "publishConfig": {
@@ -44,39 +34,32 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/animate-presence": "2.7.7",
-    "@tamagui/collection": "2.7.7",
-    "@tamagui/compose-refs": "2.7.7",
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/create-context": "2.7.7",
-    "@tamagui/dismissable": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/native": "2.7.7",
-    "@tamagui/polyfill-dev": "2.7.7",
-    "@tamagui/portal": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/start-transition": "2.7.7",
-    "@tamagui/text": "2.7.7",
-    "@tamagui/use-controllable-state": "2.7.7",
-    "@tamagui/visually-hidden": "2.7.7"
+    "@tamagui/animate-presence": "3.0.0-beta.643.1",
+    "@tamagui/collection": "3.0.0-beta.643.1",
+    "@tamagui/compose-refs": "3.0.0-beta.643.1",
+    "@tamagui/constants": "3.0.0-beta.643.1",
+    "@tamagui/core": "3.0.0-beta.643.1",
+    "@tamagui/create-context": "3.0.0-beta.643.1",
+    "@tamagui/dismissable": "3.0.0-beta.643.1",
+    "@tamagui/helpers": "3.0.0-beta.643.1",
+    "@tamagui/native": "3.0.0-beta.643.1",
+    "@tamagui/polyfill-dev": "3.0.0-beta.643.1",
+    "@tamagui/portal": "3.0.0-beta.643.1",
+    "@tamagui/stacks": "3.0.0-beta.643.1",
+    "@tamagui/start-transition": "3.0.0-beta.643.1",
+    "@tamagui/text": "3.0.0-beta.643.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.643.1",
+    "@tamagui/visually-hidden": "3.0.0-beta.643.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.643.1",
     "react": ">=19",
-    "react-native": "0.83.2"
+    "react-native": "0.86.2"
   },
   "peerDependencies": {
     "react": ">=19"
   },
   "module:jsx": "dist/jsx",
-  "typesVersions": {
-    "*": {
-      "v2": [
-        "./types/v2.d.ts"
-      ]
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",

package/src/ToastComposable.tsx

@@ -1,3 +1,4 @@
+import { createStyledHOC, createRefComponent } from '@tamagui/core'
 import { AnimatePresence } from '@tamagui/animate-presence'
 import { isWeb } from '@tamagui/constants'
 import { getGestureHandler } from '@tamagui/native'
@@ -16,7 +17,7 @@ import { Portal } from '@tamagui/portal'
 import { XStack, YStack } from '@tamagui/stacks'
 import { SizableText } from '@tamagui/text'
 import * as React from 'react'
-import type { SwipeDirection } from './ToastProvider'
+import type { SwipeDirection } from './types'
 import type { ExternalToast, ToastT, ToastToDismiss, ToastType } from './ToastState'
 import { ToastState } from './ToastState'
 import type { BurntToastOptions } from './types'
@@ -85,10 +86,7 @@ interface ToastContextValue {
   icons?: ToastIcons
 }
 
-const ToastContext = createStyledContext<ToastContextValue>(
-  {} as ToastContextValue,
-  'Toast__'
-)
+const ToastContext = createStyledContext<ToastContextValue>({}, 'Toast__')
 
 const useToastContextValue = ToastContext.useStyledContext
 
@@ -151,6 +149,11 @@ export interface ToastIcons {
 
 export interface ToastRootProps {
   children: React.ReactNode
+  /**
+   * Only render toasts sent to this toaster id. Untargeted toasts render in
+   * roots without an id.
+   */
+  toasterId?: string
   /**
    * Position of the toasts on screen
    * @default 'bottom-right'
@@ -244,10 +247,11 @@ function resolveSwipeDirection(
   return 'horizontal'
 }
 
-const ToastRoot = React.forwardRef<TamaguiElement, ToastRootProps>(
+const ToastRoot = createRefComponent<TamaguiElement, ToastRootProps>(
   function ToastRoot(props, _ref) {
     const {
       children,
+      toasterId,
       position = 'bottom-right',
       duration = TOAST_LIFETIME,
       gap = TOAST_GAP,
@@ -352,6 +356,10 @@ const ToastRoot = React.forwardRef<TamaguiElement, ToastRootProps>(
           return
         }
 
+        if ((toast as ToastT).toasterId !== toasterId) {
+          return
+        }
+
         // Native dispatch: intercept before entering state so no in-app toast renders.
         // On failure (e.g. permission denied), falls through to in-app.
         if (native) {
@@ -375,7 +383,7 @@ const ToastRoot = React.forwardRef<TamaguiElement, ToastRootProps>(
           return [toast as ToastT, ...toasts]
         })
       })
-    }, [native, duration])
+    }, [native, duration, toasterId])
 
     // collapse when 1 toast left, or when a new toast is added while expanded
     const prevToastCountRef = React.useRef(toasts.length)
@@ -450,27 +458,16 @@ const ToastRoot = React.forwardRef<TamaguiElement, ToastRootProps>(
  * -----------------------------------------------------------------------------------------------*/
 
 const ToastViewportFrame = styled(View, {
-  name: 'ToastViewport',
-
-  variants: {
-    unstyled: {
-      false: {
-        position: isWeb ? ('fixed' as any) : 'absolute',
-        zIndex: 100000,
-        pointerEvents: 'box-none',
-        maxWidth: '100%',
-        ...(isWeb && { width: 356 }),
-        minHeight: 1,
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+  displayName: 'ToastViewport',
+  position: isWeb ? ('fixed' as any) : 'absolute',
+  zIndex: 100000,
+  pointerEvents: 'box-none',
+  maxWidth: '100%',
+  ...(isWeb && { width: 356 }),
+  minHeight: 1,
 })
 
-export interface ToastViewportProps extends GetProps<typeof ToastViewportFrame> {
+export type ToastViewportProps = GetProps<typeof ToastViewportFrame> & {
   /**
    * Offset from screen edge
    * @default 24
@@ -497,8 +494,9 @@ export interface ToastViewportProps extends GetProps<typeof ToastViewportFrame>
   portalZIndex?: number
 }
 
-const ToastViewport = ToastViewportFrame.styleable<ToastViewportProps>(
-  function ToastViewport(props, ref) {
+const ToastViewport = createStyledHOC(
+  ToastViewportFrame,
+  function ToastViewport(props: ToastViewportProps, ref) {
     const {
       offset = VIEWPORT_OFFSET,
       hotkey = DEFAULT_HOTKEY,
@@ -774,33 +772,27 @@ function DefaultToastContent({ toast }: { toast: ToastT }) {
     typeof toast.description === 'function' ? toast.description() : toast.description
 
   return (
-    <XStack alignItems="flex-start" gap="$3">
+    <XStack alignItems="flex-start" gap="3">
       <ToastIcon />
 
-      <YStack flex={1} gap="$1">
+      <YStack flex={1} gap="1">
         {title && <ToastTitle>{title}</ToastTitle>}
         {description && <ToastDescription>{description}</ToastDescription>}
 
         {(toast.action || toast.cancel) && (
-          <XStack gap="$2" marginTop="$2">
+          <XStack gap="2" marginTop="2">
             {toast.cancel && (
               <ToastActionFrame
-                backgroundColor="transparent"
                 onPress={(e: any) => {
                   toast.cancel?.onClick?.(e)
                   handleClose()
                 }}
               >
-                <SizableText size="$2" color="$color11">
-                  {toast.cancel.label}
-                </SizableText>
+                <SizableText size="2">{toast.cancel.label}</SizableText>
               </ToastActionFrame>
             )}
             {toast.action && (
               <ToastActionFrame
-                backgroundColor="$color12"
-                hoverStyle={{ backgroundColor: '$color11' }}
-                pressStyle={{ backgroundColor: '$color10' }}
                 onPress={(e: any) => {
                   toast.action?.onClick?.(e)
                   if (!(e as any).defaultPrevented) {
@@ -808,9 +800,7 @@ function DefaultToastContent({ toast }: { toast: ToastT }) {
                   }
                 }}
               >
-                <SizableText size="$2" fontWeight="600" color="$background">
-                  {toast.action.label}
-                </SizableText>
+                <SizableText size="2">{toast.action.label}</SizableText>
               </ToastActionFrame>
             )}
           </XStack>
@@ -893,14 +883,15 @@ function DragWrapper({
  * ToastItem (the wrapper with stacking/drag)
  * -----------------------------------------------------------------------------------------------*/
 
-export interface ToastItemProps extends GetProps<typeof ToastItemFrame> {
+export type ToastItemProps = GetProps<typeof ToastItemFrame> & {
   toast: ToastT
   index: number
   children: React.ReactNode
 }
 
-const ToastItemInner = ToastItemFrame.styleable<ToastItemProps>(
-  function ToastItem(props, ref) {
+const ToastItemInner = createStyledHOC(
+  ToastItemFrame,
+  function ToastItem(props: ToastItemProps, ref) {
     const { toast, index, children, ...rest } = props
     const ctx = useToastContext('Toast.Item')
 
@@ -1025,12 +1016,6 @@ const ToastItemInner = ToastItemFrame.styleable<ToastItemProps>(
       dragRef,
     } = useToastAnimations({
       reducedMotion: ctx.reducedMotion,
-      swipeAxis:
-        ctx.swipeDirection === 'up' ||
-        ctx.swipeDirection === 'down' ||
-        ctx.swipeDirection === 'vertical'
-          ? 'vertical'
-          : 'horizontal',
     })
 
     const { isDragging, gestureHandlers, gesture } = useAnimatedDragGesture({
@@ -1163,17 +1148,20 @@ const ToastItemInner = ToastItemFrame.styleable<ToastItemProps>(
       <ToastPositionWrapper
         ref={ref}
         testID={rest.testID}
-        accessibilityLabel={rest.accessibilityLabel}
+        aria-label={rest['aria-label']}
         {...dataAttributes}
         transition={
           isDragging || ctx.reducedMotion ? undefined : removed ? '200ms' : '400ms'
         }
-        animateOnly={
-          isWeb ? ['transform', 'opacity', 'height'] : ['transform', 'opacity']
+        y={
+          ctx.reducedMotion
+            ? stackY
+            : `${stackY} enter:${isTop ? -80 : 80}px exit:${
+                swipeOut ? (swipeExitYRef.current ?? stackY) : stackY
+              }px`
         }
-        y={stackY}
         scale={stackScale}
-        opacity={computedOpacity}
+        opacity={`${computedOpacity} enter:0 exit:0`}
         zIndex={computedZIndex}
         height={computedHeight}
         overflow="visible"
@@ -1184,15 +1172,8 @@ const ToastItemInner = ToastItemFrame.styleable<ToastItemProps>(
           !isFront && {
             style: { transformOrigin: isTop ? 'top center' : 'bottom center' },
           })}
-        enterStyle={
-          ctx.reducedMotion ? { opacity: 0 } : { opacity: 0, y: isTop ? -80 : 80 }
-        }
-        exitStyle={
-          ctx.reducedMotion
-            ? { opacity: 0 }
-            : swipeOut
-              ? { opacity: 0, y: swipeExitYRef.current ?? stackY, scale: stackScale }
-              : { opacity: 0, y: stackY, scale: stackScale }
+        animateOnly={
+          isWeb ? ['transform', 'opacity', 'height'] : ['transform', 'opacity']
         }
       >
         <DragWrapper
@@ -1252,50 +1233,26 @@ const ToastItemInner = ToastItemFrame.styleable<ToastItemProps>(
  * ToastTitle
  * -----------------------------------------------------------------------------------------------*/
 
+// Structural (unstyled) — text color/weight/size live in the tamagui skin
+// (code/ui/tamagui/src/components/Toast.tsx).
 const ToastTitle = styled(SizableText, {
-  name: 'ToastTitle',
-
-  variants: {
-    unstyled: {
-      false: {
-        color: '$color',
-        fontWeight: '600',
-        size: '$4',
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+  displayName: 'ToastTitle',
 })
 
 /* -------------------------------------------------------------------------------------------------
  * ToastDescription
  * -----------------------------------------------------------------------------------------------*/
 
+// Structural (unstyled) — text color/size live in the tamagui skin.
 const ToastDescription = styled(SizableText, {
-  name: 'ToastDescription',
-
-  variants: {
-    unstyled: {
-      false: {
-        color: '$color11',
-        size: '$2',
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+  displayName: 'ToastDescription',
 })
 
 /* -------------------------------------------------------------------------------------------------
  * ToastClose - auto-wired to dismiss current toast
  * -----------------------------------------------------------------------------------------------*/
 
-const ToastClose = ToastCloseFrame.styleable(function ToastClose(props, ref) {
+const ToastClose = createStyledHOC(ToastCloseFrame, function ToastClose(props, ref) {
   // try to get handleClose from context, but allow manual override
   let handleClose: (() => void) | undefined
   try {
@@ -1318,7 +1275,7 @@ const ToastClose = ToastCloseFrame.styleable(function ToastClose(props, ref) {
  * ToastAction
  * -----------------------------------------------------------------------------------------------*/
 
-const ToastAction = ToastActionFrame.styleable(function ToastAction(props, ref) {
+const ToastAction = createStyledHOC(ToastActionFrame, function ToastAction(props, ref) {
   return <ToastActionFrame ref={ref} {...props} />
 })
 
@@ -1343,7 +1300,7 @@ function ToastIcon(props: { children?: React.ReactNode }) {
   // if custom icon provided on toast, use it
   if (toast.icon !== undefined) {
     return (
-      <View flexShrink={0} marginTop="$0.5">
+      <View flexShrink={0} marginTop="0-5">
         {toast.icon}
       </View>
     )
@@ -1356,7 +1313,7 @@ function ToastIcon(props: { children?: React.ReactNode }) {
   if (!icon) return null
 
   return (
-    <View flexShrink={0} marginTop="$0.5">
+    <View flexShrink={0} marginTop="0-5">
       {icon}
     </View>
   )
@@ -1372,6 +1329,7 @@ export function useToasts() {
     toasts: ctx.toasts,
     expanded: ctx.expanded,
     position: ctx.position,
+    closeButton: ctx.closeButton,
   }
 }
 

package/src/ToastItemFrame.tsx

@@ -1,6 +1,12 @@
 /**
- * Shared visual styled components for toast items.
+ * Structural (unstyled) frames for toast items — the behavior-first primitives.
  * Shared across web and native — imported by ToastComposable.
+ *
+ * These keep ONLY the structural allowlist (layout, hit targets, positioning,
+ * cursor/userSelect, native `render:'button'`). The v2-look skin (background,
+ * border, radius, padding, shadow, hover/press/focus color styling, text color)
+ * lives in the tamagui skin (code/ui/tamagui/src/components/Toast.tsx), which is
+ * also the shadcn registry source.
  */
 
 import { styled } from '@tamagui/core'
@@ -9,12 +15,12 @@ import { SizableText } from '@tamagui/text'
 
 /* -------------------------------------------------------------------------------------------------
  * ToastPositionWrapper - handles absolute positioning and stacking animations
- * On web: uses Tamagui transition/enterStyle/exitStyle
+ * On web: uses Tamagui transition plus enter/exit clauses
  * On native: replaced by Animated.View with useAnimatedStyle
  * -----------------------------------------------------------------------------------------------*/
 
 export const ToastPositionWrapper = styled(YStack, {
-  name: 'ToastPositionWrapper',
+  displayName: 'ToastPositionWrapper',
   pointerEvents: 'auto',
   position: 'absolute',
   left: 0,
@@ -26,111 +32,46 @@ export const ToastPositionWrapper = styled(YStack, {
 })
 
 /* -------------------------------------------------------------------------------------------------
- * ToastItemFrame - visual styling for the toast
- * Shared across web and native — the visual appearance of the toast card.
+ * ToastItemFrame - structural frame for the toast card (the visual skin lives in
+ * the tamagui Toast skin).
  * -----------------------------------------------------------------------------------------------*/
 
 export const ToastItemFrame = styled(YStack, {
-  name: 'ToastItem',
+  displayName: '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.TAMAGUI_HEADLESS === '1',
-  },
+  tabIndex: 0,
 })
 
 /* -------------------------------------------------------------------------------------------------
- * ToastCloseFrame
+ * ToastCloseFrame - structural button (layout + hit target only).
  * -----------------------------------------------------------------------------------------------*/
 
 export const ToastCloseFrame = styled(XStack, {
-  name: 'ToastClose',
+  displayName: '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.TAMAGUI_HEADLESS === '1',
-  },
+  width: 18,
+  height: 18,
 })
 
 /* -------------------------------------------------------------------------------------------------
- * ToastActionFrame - for action/cancel buttons with text
+ * ToastActionFrame - structural button for action/cancel buttons with text.
  * -----------------------------------------------------------------------------------------------*/
 
 export const ToastActionFrame = styled(XStack, {
-  name: 'ToastAction',
+  displayName: '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.TAMAGUI_HEADLESS === '1',
-  },
+  height: 24,
 })
 
 /* -------------------------------------------------------------------------------------------------
- * DefaultCloseIcon
+ * DefaultCloseIcon - dependency-free glyph (inherits color; the skin sets it).
  * -----------------------------------------------------------------------------------------------*/
 
-export const DefaultCloseIcon = () => (
-  <SizableText size="$1" color="$color11">
-    ✕
-  </SizableText>
-)
+export const DefaultCloseIcon = () => <SizableText size="1">✕</SizableText>

package/src/ToastState.ts

@@ -8,6 +8,7 @@ export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | '
 
 export interface ToastT {
   id: string | number
+  toasterId?: string
   title: React.ReactNode | (() => React.ReactNode)
   description?: React.ReactNode | (() => React.ReactNode)
   type?: ToastType

package/src/index.ts

@@ -1,3 +1,35 @@
-export * from './Toast'
-export type { SwipeDirection } from './ToastProvider'
+// @tamagui/toast — the unstyled composable + imperative toast API. Most apps
+// should import the styled version from `tamagui` instead; this package is the
+// behavior layer the skin is built on.
+//
+// The old imperative surface (ToastProvider/ToastViewport/useToastController/
+// useToastState) was removed in v3; see the upgrade guide. Native OS toasts are
+// optional — install `burnt` and pass `native` only if you want them.
+
+// composable component API
+export { Toast, useToasts, useToastItem } from './ToastComposable'
+export type {
+  ToastRootProps,
+  ToastViewportProps,
+  ToastItemProps,
+  ToastItemRenderProps,
+  ToastListProps,
+  ToastPosition,
+  ToastIcons,
+} from './ToastComposable'
+
+// imperative API
+export { toast } from './ToastState'
+export type {
+  ToastT,
+  ToastType,
+  ToastToDismiss,
+  ExternalToast,
+  PromiseT,
+  PromiseData,
+  ToastAction,
+} from './ToastState'
+
+export type { SwipeDirection } from './types'
 export type { BurntToastOptions, CreateNativeToastOptions, NativeToastRef } from './types'
+export { requestNotificationPermission } from './createNativeToast'

package/src/types.ts

@@ -1,3 +1,14 @@
+// swipe-to-dismiss direction for the composable toast viewport (relocated here
+// from the removed v1 ToastProvider so the v2 drag-gesture code can share it).
+export type SwipeDirection =
+  | 'vertical'
+  | 'up'
+  | 'down'
+  | 'horizontal'
+  | 'left'
+  | 'right'
+  | 'auto'
+
 // from `burnt`
 type BurntLayout = {
   iconSize?: {

package/src/useAnimatedDragGesture.native.ts

@@ -13,7 +13,7 @@ import { getGestureHandler } from '@tamagui/native'
 import * as React from 'react'
 import type { PanResponderGestureState } from 'react-native'
 import { PanResponder } from 'react-native'
-import type { SwipeDirection } from './ToastProvider'
+import type { SwipeDirection } from './types'
 
 export interface UseAnimatedDragGestureOptions {
   direction: SwipeDirection

package/src/useAnimatedDragGesture.ts

@@ -4,7 +4,7 @@
  */
 
 import * as React from 'react'
-import type { SwipeDirection } from './ToastProvider'
+import type { SwipeDirection } from './types'
 
 export interface UseAnimatedDragGestureOptions {
   direction: SwipeDirection