update toast

packages/components/src/toast/toast-container.tsx

@@ -7,33 +7,51 @@ import { create } from 'zustand'
 import { Toast } from './toast'
 
 import type { ToastProps } from './toast'
+import type { ToastProps as RootProps } from '@radix-ui/react-toast'
+
+type ToastRootProps = Partial<Pick<RootProps, 'duration' | 'type'>>
 
 type ToastState = {
-  toast: ToastProps | null
+  toast: (ToastProps & { rootProps?: ToastRootProps }) | null
   dismiss: () => void
-  positive: (
-    message: string,
+  positive: (args: {
+    message: string
     actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
-  negative: (
-    message: string,
+    rootProps?: ToastRootProps
+  }) => void
+  negative: (args: {
+    message: string
     actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
-  custom: (
-    message: string,
-    icon: React.ReactElement,
+    rootProps?: ToastRootProps
+  }) => void
+  custom: (args: {
+    message: string
+    icon: React.ReactElement
     actionProps?: Pick<ToastProps, 'action' | 'onAction'>
-  ) => void
+    rootProps?: ToastRootProps
+  }) => void
 }
 
 const useStore = create<ToastState>()(set => ({
   toast: null,
-  positive: (message, actionProps) =>
-    set({ toast: { ...actionProps, message, type: 'positive' } }),
-  negative: (message, actionProps) =>
-    set({ toast: { ...actionProps, message, type: 'negative' } }),
-  custom: (message, icon, actionProps) =>
-    set({ toast: { ...actionProps, message, icon } }),
+  positive: args =>
+    set({
+      toast: {
+        ...args,
+        type: 'positive',
+      },
+    }),
+  negative: args =>
+    set({
+      toast: {
+        ...args,
+        type: 'negative',
+      },
+    }),
+  custom: args =>
+    set({
+      toast: { ...args },
+    }),
   dismiss: () => set({ toast: null }),
 }))
 
@@ -50,14 +68,22 @@ const ToastContainer = () => {
     }
   }
 
+  const { rootProps, ...restProps } = store.toast
+
   return (
     <Provider>
       <ToastRoot
         defaultOpen
         onOpenChange={handleOpenChange}
         style={{ position: 'fixed' }}
+        // note: prevent swipe gestures from closing the toast until animation is implemented
+        onSwipeStart={event => event.preventDefault()}
+        onSwipeMove={event => event.preventDefault()}
+        onSwipeCancel={event => event.preventDefault()}
+        onSwipeEnd={event => event.preventDefault()}
+        {...rootProps}
       >
-        <Toast {...store.toast} />
+        <Toast {...restProps} />
       </ToastRoot>
       <Viewport />
     </Provider>
@@ -72,6 +98,7 @@ const useToast = () => {
       positive: store.positive,
       negative: store.negative,
       custom: store.custom,
+      dismiss: store.dismiss,
     }),
     [store]
   )

packages/components/src/toast/toast.stories.tsx

@@ -26,7 +26,9 @@ const ToastWithHook = () => {
   return (
     <Button
       size={32}
-      onPress={() => toast.positive('Great success! This means good stuff!')}
+      onPress={() =>
+        toast.positive({ message: 'Great success! This means good stuff!' })
+      }
     >
       Show Toast
     </Button>

packages/components/src/toast/toast.tsx

@@ -38,7 +38,7 @@ const Toast = (props: Props) => {
 
   return (
     <Base action={Boolean(action)}>
-      <Stack flex={1} flexDirection="row" gap={4}>
+      <Stack flex={1} flexDirection="row" gap={4} alignItems="center">
         <Stack width={20}>{renderIcon()}</Stack>
         <Description asChild>
           <Text size={13} weight={'medium'} color="$white-100">