import * as React from 'react' import { cn } from '@/lib/utils' export interface ToastProps extends React.HTMLAttributes { /** Drives the fade/slide transition. The caller owns the state and any * auto-dismiss timing -- the component never dismisses itself. */ open: boolean /** Optional leading icon element (e.g. a 16px Phosphor icon). */ icon?: React.ReactNode /** Optional trailing action (e.g. a small accent Button). Its presence * makes the toast interactive (pointer events enabled). */ action?: React.ReactNode /** When provided, renders an X dismiss button and enables pointer events. */ onDismiss?: () => void /** aria-label for the dismiss button. */ dismissLabel?: string /** * When `true`, the toast is announced immediately via `role="alert"` + * `aria-live="assertive"` -- use for time-sensitive or error messages. * Default (`false`) uses `aria-live="polite"`, which waits for the user * to finish their current interaction before announcing. */ assertive?: boolean /** * Work is in flight. Renders the design system's spinner in place of `icon` * and sets `aria-busy`, the same word `ProgressBar` uses for the same state. * * The spinner is drawn from a border rather than an icon, because the * package ships no icon library. The LABEL carries the meaning: under * reduced motion the global backstop leaves the circle effectively still, * so a toast whose only cue is the spinner says nothing there. */ busy?: boolean /** * A readout that changes as the work proceeds -- a count, a percentage -- * rendered after the message and **hidden from assistive tech**. * * The pill is a live region, so a number ticking several times a second * would be read out several times a second, talking over everything else on * the page. Hidden, the message announces once and the readout stays a * visual one. Digits are tabular so the pill does not resize on every tick. */ detail?: React.ReactNode } /** * Floating notification pill, fixed and centered below the app header. * Frosted-surface chrome (same recipe as BottomNav and the surface * ActionPill) so it reads as part of the header family. * * Use for app-level, out-of-flow notifications: transient state hints * (auto-dismissed by the caller, e.g. an armed destructive button) or * persistent action-carrying notices (e.g. "update available" with a * download button + dismiss). For context-bound inline status and error * boxes inside forms or settings sections, use `Notice` instead. * * Purely informational toasts (no `action`, no `onDismiss`) are * pointer-events-none so they never intercept clicks. Keep messages to a * single short sentence -- the pill shape does not suit multiline text. * * For background work that resolves on its own -- an index building, a library * scanning -- pass `busy` with a `detail` readout and neither an action nor a * dismiss: there is nothing to confirm and nothing to cancel, and a dismiss * would only offer to hide a fact. Staying non-interactive also keeps the pill * from swallowing clicks meant for what is underneath it. */ const Toast = React.forwardRef( ( { open, icon, action, onDismiss, dismissLabel = 'Dismiss', assertive = false, busy = false, detail, className, children, ...props }, ref, ) => { const interactive = Boolean(action || onDismiss) return (

{busy ? ( ) : ( icon )} {children} {detail != null && ( {detail} )} {action} {onDismiss && ( )}

) }, ) Toast.displayName = 'Toast' export { Toast }