{
"schemaVersion": 1,
"name": "toast",
"useFor": "Prefer Sonner for new work. Use this when an app already uses the toast() and useToast() API: mount one Toaster near the root, call toast({ title, description, action }) and use variant=\"destructive\" for a failure. Give an action an altText that says what it does.",
"constraints": [
"A toast for an error that needs a decision (use an alert dialog)",
"More than one action",
"Long descriptions"
],
"documentation": "",
"source": "Extension from opencommerce-agentcard-web src/components (the order card's done step) and sonner.tsx",
"exports": [
"Toast",
"ToastAction",
"ToastClose",
"ToastDescription",
"Toaster",
"ToastProvider",
"ToastTitle",
"ToastViewport",
"toast",
"useToast",
"ToastActionElement",
"ToastProps"
],
"client": true,
"docsUrl": "https://opencommerce-ds.vercel.app/components/toast",
"markdownUrl": "https://opencommerce-ds.vercel.app/r/toast.md",
"examples": [
{
"path": "examples/toast.tsx",
"content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ToastAction, Toaster, toast } from \"@/components/ui/toast\";\n\nexport function Site() {\n return (\n \n \n toast({\n title: \"Order placed\",\n description: \"ord_8KQ2 at Northwind Outfitters\",\n action: (\n undefined}>\n Open\n \n ),\n })\n }\n >\n Place order\n \n \n toast({\n variant: \"destructive\",\n title: \"Checkout failed\",\n description: \"The card was declined\",\n action: Retry ,\n })\n }\n >\n Fail a checkout\n \n toast({ title: \"Copied ord_8KQ2\" })}>\n Copy order ID\n \n
\n );\n}\n",
"exports": [
"Site"
],
"requires": [
"toast",
"button"
],
"packages": [],
"previews": [
{
"name": "Site",
"url": "https://opencommerce-ds.vercel.app/preview/toast/Site"
}
]
}
],
"type": "ui",
"title": "Toast",
"description": "The older Radix toast in the look of the brand's Sonner toasts: a white card at the bottom left with a blue action.",
"surface": "site",
"kinds": [],
"requires": [
"theme",
"utils"
],
"packages": [
"@radix-ui/react-toast",
"class-variance-authority",
"lucide-react"
],
"files": [
{
"path": "components/ui/toast.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\n// The Radix toast (shadcn's older toast API; prefer Sonner for new work), in the same look as the brand's Sonner toasts\n// (sonner.tsx): a white card at the bottom left, a 9 percent ink edge, 8px corners and a soft drop, the title in 14px\n// Inter at 500 over its line in 12px at 64 percent ink, an action as a small blue key and a faint close mark.\n// `destructive` edges it in red with a red title and a red key. It slides in from the left edge it lives on as it\n// fades (300ms ease-out); a swipe to the left drags it with the finger and lets it go, a short swipe springs back\n// (200ms ease-out). Reduced motion keeps only the fade.\nconst ToastProvider = ToastPrimitive.Provider;\n\nfunction ToastViewport({ className, ...props }: React.ComponentProps) {\n return (\n & VariantProps) {\n return ) {\n return (\n ) {\n return (\n \n ) {\n return ) {\n return ;\ntype ToastActionElement = React.ReactElement>;\n\n// The toast queue: a tiny store any part of the app can push to with toast(), read by useToast() and >();\n\nfunction setState(update: (state: State) => State) {\n memory = update(memory);\n listeners.forEach((l) => l(memory));\n}\n\nfunction scheduleRemove(id: string) {\n if (timeouts.has(id)) return;\n // ds-latency: removes an already dismissed toast from memory; dismissal and input stay immediate.\n timeouts.set(id, setTimeout(() => {\n timeouts.delete(id);\n setState((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }));\n }, REMOVE_DELAY));\n}\n\nfunction dismiss(id?: string) {\n setState((s) => ({ toasts: s.toasts.map((t) => (id === undefined || t.id === id ? { ...t, open: false } : t)) }));\n memory.toasts.filter((t) => id === undefined || t.id === id).forEach((t) => scheduleRemove(t.id));\n}\n\nfunction toast(props: Omit) {\n const id = nextId();\n const update = (next: Partial) => setState((s) => ({ toasts: s.toasts.map((t) => (t.id === id ? { ...t, ...next } : t)) }));\n setState((s) => ({\n toasts: [{ ...props, id, open: true, onOpenChange: (open: boolean) => { if (!open) dismiss(id); props.onOpenChange?.(open); } }, ...s.toasts].slice(0, TOAST_LIMIT),\n }));\n return { id, dismiss: () => dismiss(id), update };\n}\n\nfunction useToast() {\n const [state, setLocal] = React.useState(memory);\n React.useEffect(() => {\n listeners.push(setLocal);\n return () => {\n const i = listeners.indexOf(setLocal);\n if (i > -1) listeners.splice(i, 1);\n };\n }, []);\n return { ...state, toast, dismiss };\n}\n\n/** Renders the queue. Mount it once, near the root. */\nfunction Toaster() {\n const { toasts } = useToast();\n return (\n \n {toasts.map(({ id, title, description, action, ...props }) => (\n \n \n {title && {title} }\n {description && {description} }\n
\n {action}\n \n ))}\n \n );\n}\n\nexport { Toast, ToastAction, ToastClose, ToastDescription, Toaster, ToastProvider, ToastTitle, ToastViewport, toast, useToast };\nexport type { ToastActionElement, ToastProps };\n"
}
]
}