{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "toast",
"title": "Snackbar",
"description": "The Material snackbar and its imperative `toast` API, with stacking and actions.",
"dependencies": [
"@base-ui/react@^1.7.0",
"lucide-react@^1.33.0"
],
"registryDependencies": [
"https://guillermo-rebolledo.github.io/materialcn/r/button.json",
"https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
"https://guillermo-rebolledo.github.io/materialcn/r/theme-context.json",
"https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
],
"files": [
{
"path": "src/components/ui/toast.tsx",
"content": "import * as React from \"react\"\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\nimport type { ToastManager } from \"@base-ui/react/toast\"\nimport { X } from \"lucide-react\"\n\nimport { ThemeContext } from \"@/components/theme-context\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"./button\"\nimport { toast, useToastManager, type SnackbarData } from \"./toast-manager\"\n\nfunction ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {\n return \n}\n\nfunction ToastPortal({ className, ...props }: ToastPrimitive.Portal.Props) {\n const theme = React.use(ThemeContext)\n\n return (\n \n )\n}\n\nfunction ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {\n return (\n \n )\n}\n\n/**\n * Later toasts sit *below* earlier ones, which is why the z-index counts down\n * from the snackbar layer rather than up: the frontmost toast is index 0. The\n * scale leaves 100 between layers, so the stack would have to reach a hundred\n * simultaneous toasts before it reached the layer beneath.\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 )\n}\n\nfunction ToastDescription({ className, ...props }: ToastPrimitive.Description.Props) {\n return (\n \n )\n}\n\nfunction ToastAction({\n className,\n render = ,\n ...props\n}: ToastPrimitive.Action.Props) {\n return (\n \n )\n}\n\nfunction ToastClose({\n className,\n children,\n render = ,\n ...props\n}: ToastPrimitive.Close.Props) {\n return (\n \n {children ?? }\n \n )\n}\n\nfunction ToastList() {\n const { toasts } = useToastManager()\n\n return toasts.map((toastItem, index) => {\n const layout = toastItem.data?.layout ?? \"auto\"\n const dismissible = toastItem.data?.dismissible ?? false\n const hasAction = Boolean(toastItem.actionProps)\n const hasControls = hasAction || dismissible\n\n return (\n \n \n \n {toastItem.title != null && }\n \n \n {hasControls && (\n \n {hasAction && }\n {dismissible && }\n \n )}\n \n \n )\n })\n}\n\ntype ToasterProps = Omit & {\n /** An isolated manager; defaults to the exported app-wide `toast`. */\n toastManager?: ToastManager\n /** Portal customization, including a theme-scoped `container`. */\n portalProps?: ToastPrimitive.Portal.Props\n /** Position or label overrides for the notification viewport. */\n viewportProps?: ToastPrimitive.Viewport.Props\n}\n\n/**\n * Renders the app's snackbar region. Mount once near the application root.\n * Base UI supplies timeout pausing, swipe dismissal, stacking, F6 navigation,\n * focus restoration, and polite/assertive live-region behavior.\n */\nfunction Toaster({\n children,\n toastManager = toast,\n portalProps,\n viewportProps,\n ...props\n}: ToasterProps) {\n return (\n \n {children}\n \n \n \n \n \n \n )\n}\n\nexport {\n Toaster,\n Toast,\n ToastAction,\n ToastClose,\n ToastContent,\n ToastDescription,\n ToastPortal,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n}\nexport { createToastManager, toast, useToastManager } from \"./toast-manager\"\nexport type { SnackbarData } from \"./toast-manager\"\nexport type { ToasterProps }\n",
"type": "registry:ui"
},
{
"path": "src/components/ui/toast-manager.ts",
"content": "import { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\n\n/** Material-specific presentation options carried by Base UI's toast manager. */\ntype SnackbarData = {\n /** Add the kit's trailing 48dp close affordance. */\n dismissible?: boolean\n /** Put a longer action below the message instead of beside it. */\n layout?: \"auto\" | \"stacked\"\n}\n\n/**\n * Creates an isolated snackbar manager, useful for nested apps and previews.\n * Most applications should use the exported global `toast` manager instead.\n */\nfunction createToastManager() {\n return ToastPrimitive.createToastManager()\n}\n\n/** App-wide imperative manager. Mount one `Toaster`, then call `toast.add()`. */\nconst toast = createToastManager()\n\nfunction useToastManager() {\n return ToastPrimitive.useToastManager()\n}\n\nexport { createToastManager, toast, useToastManager }\nexport type { SnackbarData }\n",
"type": "registry:ui"
}
],
"categories": [
"feedback"
],
"type": "registry:ui"
}