{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "toast",
"type": "registry:ui",
"title": "Toast",
"description": "A customizable toast component",
"dependencies": [
"@base-ui/react",
"clsx",
"tailwind-merge"
],
"registryDependencies": [
"button",
"spinner",
"classes"
],
"files": [
{
"path": "src/registry/pure-ui/ui/toast/index.tsx",
"content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Toast } from \"@base-ui/react/toast\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\nimport { buttonVariants } from \"@/registry/pure-ui/ui/button\";\r\nimport { Spinner } from \"@/registry/pure-ui/ui/spinner\";\r\n\r\nconst toastManager = Toast.createToastManager();\r\n\r\ntype ToastPosition =\r\n | \"top-left\"\r\n | \"top-center\"\r\n | \"top-right\"\r\n | \"bottom-left\"\r\n | \"bottom-center\"\r\n | \"bottom-right\";\r\n\r\ntype ToastRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\r\n\r\ninterface CustomToastData {\r\n radius?: ToastRadius;\r\n}\r\n\r\nfunction getRadiusClass(radius?: ToastRadius): string {\r\n switch (radius) {\r\n case \"none\":\r\n return \"rounded-none\";\r\n case \"sm\":\r\n return \"rounded-sm\";\r\n case \"md\":\r\n return \"rounded-md\";\r\n case \"lg\":\r\n return \"rounded-lg\";\r\n case \"full\":\r\n return \"rounded-full px-5.5!\";\r\n default:\r\n return \"rounded-none\"; // default radius\r\n }\r\n}\r\n\r\ninterface ToastProviderProps extends Toast.Provider.Props {\r\n position?: ToastPosition;\r\n}\r\n\r\nfunction ToastProvider({\r\n children,\r\n position = \"bottom-right\",\r\n ...props\r\n}: ToastProviderProps) {\r\n return (\r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nfunction ToastList({\r\n position = \"bottom-right\",\r\n}: {\r\n position?: ToastPosition;\r\n}) {\r\n const { toasts } = Toast.useToastManager();\r\n const isTop = position.startsWith(\"top\");\r\n\r\n return (\r\n \r\n \r\n {toasts.map((toast) => {\r\n console.log(\"toast type\", toast.type);\r\n\r\n return (\r\n \r\n \r\n \r\n
div]:[grid-area:1/1]\"\r\n data-slot=\"toast-icon\"\r\n >\r\n {/* Render all icons, show based on type */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n\r\n {toast.actionProps && (\r\n \r\n {toast.actionProps.children}\r\n \r\n )}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n}\r\n\r\nfunction WarningIcon(props: React.SVGProps) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction SuccessIcon(props: React.SVGProps) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction DangerIcon(props: React.SVGProps) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction InfoIcon(props: React.SVGProps) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport { ToastProvider, type ToastPosition, toastManager as toast };\r\n",
"type": "registry:ui",
"target": "components/ui/toast.tsx"
}
]
}