Split out into macro component

src/components/Toast/Toast.tsx

@@ -4,9 +4,10 @@ import {View} from 'react-native'
 import {atoms as a, select, useAlf, useTheme} from '#/alf'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import {type ToastType} from '#/components/Toast/types'
-import {Text} from '#/components/Typography'
+import {Text as BaseText} from '#/components/Typography'
 import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '../icons/CircleCheck'
 
 type ContextType = {
@@ -15,7 +16,7 @@ type ContextType = {
 
 export type ToastComponentProps = {
   type?: ToastType
-  content: React.ReactNode
+  content: string
 }
 
 export const ICONS = {
@@ -31,20 +32,24 @@ const Context = createContext<ContextType>({
 })
 Context.displayName = 'ToastContext'
 
-export function Toast({type = 'default', content}: ToastComponentProps) {
+export function Default({type = 'default', content}: ToastComponentProps) {
-  const {fonts} = useAlf()
+  return (
+    <Outer type={type}>
+      <Icon />
+      <Text>{content}</Text>
+    </Outer>
+  )
+}
+
+export function Outer({
+  children,
+  type = 'default',
+}: {
+  children: React.ReactNode
+  type?: ToastType
+}) {
   const t = useTheme()
   const styles = useToastStyles({type})
-  const Icon = ICONS[type]
-  /**
-   * Vibes-based number, adjusts `top` of `View` that wraps the text to
-   * compensate for different type sizes and keep the first line of text
-   * aligned with the icon. - esb
-   */
-  const fontScaleCompensation = useMemo(
-    () => parseInt(fonts.scale) * -1 * 0.65,
-    [fonts.scale],
-  )
 
   return (
     <Context.Provider value={useMemo(() => ({type}), [type])}>
@@ -64,43 +69,54 @@ export function Toast({type = 'default', content}: ToastComponentProps) {
             borderColor: styles.borderColor,
           },
         ]}>
-        <Icon size="md" fill={styles.iconColor} />
+        {children}
-
-        <View
-          style={[
-            a.flex_1,
-            {
-              top: fontScaleCompensation,
-            },
-          ]}>
-          {typeof content === 'string' ? (
-            <ToastText>{content}</ToastText>
-          ) : (
-            content
-          )}
-        </View>
       </View>
     </Context.Provider>
   )
 }
 
-export function ToastText({children}: {children: React.ReactNode}) {
+export function Icon({icon}: {icon?: React.ComponentType<SVGIconProps>}) {
+  const {type} = useContext(Context)
+  const styles = useToastStyles({type})
+  const IconComponent = icon || ICONS[type]
+  return <IconComponent size="md" fill={styles.iconColor} />
+}
+
+export function Text({children}: {children: React.ReactNode}) {
+  const {fonts} = useAlf()
   const {type} = useContext(Context)
   const {textColor} = useToastStyles({type})
+  /**
+   * Vibes-based number, adjusts `top` of `View` that wraps the text to
+   * compensate for different type sizes and keep the first line of text
+   * aligned with the icon. - esb
+   */
+  const fontScaleCompensation = useMemo(
+    () => parseInt(fonts.scale) * -1 * 0.65,
+    [fonts.scale],
+  )
   return (
-    <Text
+    <View
-      selectable={false}
       style={[
-        a.text_md,
+        a.flex_1,
-        a.font_medium,
-        a.leading_snug,
-        a.pointer_events_none,
         {
-          color: textColor,
+          top: fontScaleCompensation,
         },
       ]}>
-      {children}
+      <BaseText
-    </Text>
+        selectable={false}
+        style={[
+          a.text_md,
+          a.font_medium,
+          a.leading_snug,
+          a.pointer_events_none,
+          {
+            color: textColor,
+          },
+        ]}>
+        {children}
+      </BaseText>
+    </View>
   )
 }
 

src/components/Toast/index.tsx

@@ -1,15 +1,17 @@
+import React from 'react'
 import {View} from 'react-native'
 import {toast as sonner, Toaster} from 'sonner-native'
 
 import {atoms as a} from '#/alf'
 import {DURATION} from '#/components/Toast/const'
 import {
-  Toast as BaseToast,
+  Default as DefaultToast,
   type ToastComponentProps,
 } from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
 export {DURATION} from '#/components/Toast/const'
+export {Icon, Outer, Text} from '#/components/Toast/Toast'
 
 /**
  * Toasts are rendered in a global outlet, which is placed at the top of the
@@ -22,10 +24,10 @@ export function ToastOutlet() {
 /**
  * The toast UI component
  */
-export function Toast({type, content}: ToastComponentProps) {
+export function Default({type, content}: ToastComponentProps) {
   return (
     <View style={[a.px_xl, a.w_full]}>
-      <BaseToast content={content} type={type} />
+      <DefaultToast content={content} type={type} />
     </View>
   )
 }
@@ -42,8 +44,15 @@ export function show(
   content: React.ReactNode,
   {type, ...options}: BaseToastOptions = {},
 ) {
-  sonner.custom(<Toast content={content} type={type} />, {
+  if (typeof content === 'string') {
-    ...options,
+    sonner.custom(<Default content={content} type={type} />, {
-    duration: options?.duration ?? DURATION,
+      ...options,
-  })
+      duration: options?.duration ?? DURATION,
+    })
+  } else if (React.isValidElement(content)) {
+    sonner.custom(content, {
+      ...options,
+      duration: options?.duration ?? DURATION,
+    })
+  }
 }

src/components/Toast/index.web.tsx

@@ -1,10 +1,14 @@
+import React from 'react'
 import {toast as sonner, Toaster} from 'sonner'
 
 import {atoms as a} from '#/alf'
 import {DURATION} from '#/components/Toast/const'
-import {Toast} from '#/components/Toast/Toast'
+import {Default as DefaultToast} from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
+export {DURATION} from '#/components/Toast/const'
+export * from '#/components/Toast/Toast'
+
 /**
  * Toasts are rendered in a global outlet, which is placed at the top of the
  * component tree.
@@ -32,9 +36,17 @@ export function show(
   content: React.ReactNode,
   {type, ...options}: BaseToastOptions = {},
 ) {
-  sonner(<Toast content={content} type={type} />, {
+  if (typeof content === 'string') {
-    unstyled: true, // required on web
+    sonner(<DefaultToast content={content} type={type} />, {
-    ...options,
+      unstyled: true, // required on web
-    duration: options?.duration ?? DURATION,
+      ...options,
-  })
+      duration: options?.duration ?? DURATION,
+    })
+  } else if (React.isValidElement(content)) {
+    sonner(content, {
+      unstyled: true, // required on web
+      ...options,
+      duration: options?.duration ?? DURATION,
+    })
+  }
 }

src/view/screens/Storybook/Toasts.tsx

@@ -3,7 +3,7 @@ import {Pressable, View} from 'react-native'
 import {show as deprecatedShow} from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import * as toast from '#/components/Toast'
-import {Toast} from '#/components/Toast/Toast'
+import {Default as Toast} from '#/components/Toast/Toast'
 import {H1} from '#/components/Typography'
 
 export function Toasts() {