{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "toast",
"title": "Toast",
"description": "macOS notifications: glass banners at the top right that slide in and stack.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"@cupertinoui/macos-theme",
"@cupertinoui/button",
"@cupertinoui/spinner"
],
"files": [
{
"path": "registry/macos/ui/toast.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\nimport { CircleCheckIcon, InfoIcon, OctagonXIcon, TriangleAlertIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/macos/ui/button\"\nimport { Spinner } from \"@/registry/macos/ui/spinner\"\n\n// macOS notifications: glass banners in the top-right corner that slide in\n// from the side and stack, newest on top. Call toast.add({ title,\n// description, type }) from anywhere under .\nconst toast = ToastPrimitive.createToastManager()\n\nfunction ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {\n return \n}\n\nfunction ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {\n return \n}\n\nfunction ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {\n return (\n \n )\n}\n\nfunction Toast({ className, ...props }: ToastPrimitive.Root.Props) {\n return (\n \n )\n}\n\nfunction ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {\n return (\n \n )\n}\n\nfunction ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {\n return \n}\n\nfunction ToastDescription({ className, ...props }: ToastPrimitive.Description.Props) {\n return \n}\n\nfunction ToastAction({ className, render = , ...props }: ToastPrimitive.Action.Props) {\n return \n}\n\n// The close button appears on the top-left corner while the pointer is on\n// the notification, as in Notification Center.\nfunction ToastClose({ className, children, ...props }: ToastPrimitive.Close.Props) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction ToastIcon({ type }: { type: string | undefined }) {\n const icons: Record = {\n success: ,\n info: ,\n warning: ,\n error: ,\n loading: ,\n }\n const icon = type ? icons[type] : null\n if (!icon) return null\n return (\n \n {icon}\n \n )\n}\n\nfunction ToastList() {\n const { toasts } = ToastPrimitive.useToastManager()\n return toasts.map((item) => (\n \n \n \n \n \n \n
\n \n \n \n \n ))\n}\n\nfunction Toaster({ children, toastManager = toast, ...props }: ToastPrimitive.Provider.Props) {\n return (\n \n {children}\n \n \n \n \n \n \n )\n}\n\nconst createToastManager = ToastPrimitive.createToastManager\nconst useToastManager = ToastPrimitive.useToastManager\n\nexport {\n Toaster,\n Toast,\n ToastAction,\n ToastClose,\n ToastContent,\n ToastDescription,\n ToastPortal,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n createToastManager,\n toast,\n useToastManager,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}