{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toast-03","type":"registry:component","title":"Interactive Toast Notifications","description":"Interactive toast notification component showcasing toasts with action buttons, confirmations, and user interactions. Features single and multiple action buttons, delete confirmations, and retry functionality with async operations. Perfect for applications requiring user engagement through toast notifications.","dependencies":["lucide-react","sonner"],"registryDependencies":["button","card","sonner","toast-utils","toast-provider"],"files":[{"path":"src/registry/blocks/application/feedback/toasts/toast-03.tsx","content":"\"use client\";\n\nimport { Download, Eye, Trash2, Upload } from \"lucide-react\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\n\nexport interface Toast03Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    subtitle: string;\n  };\n  toasts: {\n    singleAction: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      actionLabel: string;\n    };\n    multipleActions: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      actionLabel: string;\n      cancelLabel: string;\n    };\n    confirmation: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      actionLabel: string;\n      cancelLabel: string;\n    };\n    retry: {\n      title: string;\n      buttonText: string;\n      description: string;\n      retryLabel: string;\n      successMessage: string;\n      failureMessage: string;\n    };\n  };\n} = {\n  header: {\n    title: \"Interactive Toasts\",\n    subtitle:\n      \"Toasts with action buttons, confirmations, and user interactions\",\n  },\n  toasts: {\n    singleAction: {\n      title: \"Single Action\",\n      buttonText: \"Toast with Action\",\n      description: \"Toast with a single action button\",\n      toastTitle: \"Event has been created\",\n      toastDescription: \"Sunday, December 03, 2023 at 9:00 AM\",\n      actionLabel: \"View\",\n    },\n    multipleActions: {\n      title: \"Multiple Actions\",\n      buttonText: \"Multiple Actions\",\n      description: \"Toast with action and cancel buttons\",\n      toastTitle: \"File uploaded successfully\",\n      toastDescription: \"document.pdf has been uploaded to your workspace.\",\n      actionLabel: \"View File\",\n      cancelLabel: \"Dismiss\",\n    },\n    confirmation: {\n      title: \"Confirmation\",\n      buttonText: \"Delete Confirmation\",\n      description: \"Confirmation dialog as toast\",\n      toastTitle: \"Are you sure you want to delete this item?\",\n      toastDescription: \"This action cannot be undone.\",\n      actionLabel: \"Delete\",\n      cancelLabel: \"Cancel\",\n    },\n    retry: {\n      title: \"Retry Action\",\n      buttonText: \"Retry Action\",\n      description: \"Toast with retry functionality\",\n      retryLabel: \"Retry\",\n      successMessage: \"Operation completed successfully!\",\n      failureMessage: \"Operation failed\",\n    },\n  },\n};\n\nexport function Toast03({ className }: Toast03Props) {\n  const [retryCount, setRetryCount] = React.useState(0);\n\n  const showToastWithAction = () => {\n    toast(content.toasts.singleAction.toastTitle, {\n      description: content.toasts.singleAction.toastDescription,\n      action: {\n        label: content.toasts.singleAction.actionLabel,\n        onClick: () => console.log(\"View clicked\"),\n      },\n    });\n  };\n\n  const showToastWithMultipleActions = () => {\n    toast(content.toasts.multipleActions.toastTitle, {\n      description: content.toasts.multipleActions.toastDescription,\n      icon: <Upload className=\"h-4 w-4\" />,\n      action: {\n        label: content.toasts.multipleActions.actionLabel,\n        onClick: () => console.log(\"View file clicked\"),\n      },\n      cancel: {\n        label: content.toasts.multipleActions.cancelLabel,\n        onClick: () => console.log(\"Dismissed\"),\n      },\n    });\n  };\n\n  const showDeleteConfirmation = () => {\n    toast(content.toasts.confirmation.toastTitle, {\n      description: content.toasts.confirmation.toastDescription,\n      icon: <Trash2 className=\"h-4 w-4 text-destructive\" />,\n      action: {\n        label: content.toasts.confirmation.actionLabel,\n        onClick: () => {\n          toast.success(\"Item deleted successfully\");\n        },\n      },\n      cancel: {\n        label: content.toasts.confirmation.cancelLabel,\n        onClick: () => console.log(\"Cancelled\"),\n      },\n    });\n  };\n\n  const showRetryToast = () => {\n    const attemptAction = async () => {\n      setRetryCount((prev) => prev + 1);\n\n      // Simulate API call\n      await new Promise((resolve) => setTimeout(resolve, 2000));\n\n      // Simulate random failure for demo\n      if (Math.random() > 0.7) {\n        toast.success(content.toasts.retry.successMessage);\n      } else {\n        toast.error(content.toasts.retry.failureMessage, {\n          description: `Attempt ${retryCount + 1} failed. Please try again.`,\n          action: {\n            label: content.toasts.retry.retryLabel,\n            onClick: attemptAction,\n          },\n        });\n      }\n    };\n\n    attemptAction();\n  };\n\n  return (\n    <div\n      className={cn(\"w-full max-w-4xl mx-auto\", className)}\n      data-testid=\"interactive-toasts-container\"\n    >\n      <div className=\"text-center space-y-2 mb-8\">\n        <h1 className=\"text-3xl font-bold\">{content.header.title}</h1>\n        <p className=\"text-muted-foreground\">{content.header.subtitle}</p>\n      </div>\n\n      <Card>\n        <CardContent className=\"p-6\">\n          <div\n            className=\"grid grid-cols-1 md:grid-cols-2 gap-4\"\n            data-testid=\"interactive-toast-buttons-grid\"\n          >\n            <div\n              className=\"space-y-2\"\n              data-testid=\"single-action-toast-section\"\n            >\n              <h4 className=\"font-medium\">\n                {content.toasts.singleAction.title}\n              </h4>\n              <Button\n                onClick={showToastWithAction}\n                variant=\"outline\"\n                className=\"w-full bg-transparent\"\n                data-testid=\"single-action-toast-button\"\n              >\n                <Eye className=\"mr-2 h-4 w-4\" />\n                {content.toasts.singleAction.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.singleAction.description}\n              </p>\n            </div>\n\n            <div\n              className=\"space-y-2\"\n              data-testid=\"multiple-actions-toast-section\"\n            >\n              <h4 className=\"font-medium\">\n                {content.toasts.multipleActions.title}\n              </h4>\n              <Button\n                onClick={showToastWithMultipleActions}\n                variant=\"outline\"\n                className=\"w-full bg-transparent\"\n                data-testid=\"multiple-actions-toast-button\"\n              >\n                <Upload className=\"mr-2 h-4 w-4\" />\n                {content.toasts.multipleActions.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.multipleActions.description}\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"confirmation-toast-section\">\n              <h4 className=\"font-medium\">\n                {content.toasts.confirmation.title}\n              </h4>\n              <Button\n                onClick={showDeleteConfirmation}\n                variant=\"outline\"\n                className=\"w-full text-red-600 hover:text-red-700 border-red-200 hover:border-red-300 bg-transparent\"\n                data-testid=\"confirmation-toast-button\"\n              >\n                <Trash2 className=\"mr-2 h-4 w-4\" />\n                {content.toasts.confirmation.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.confirmation.description}\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"retry-toast-section\">\n              <h4 className=\"font-medium\">{content.toasts.retry.title}</h4>\n              <Button\n                onClick={showRetryToast}\n                variant=\"outline\"\n                className=\"w-full bg-transparent\"\n                data-testid=\"retry-toast-button\"\n              >\n                <Download className=\"mr-2 h-4 w-4\" />\n                {content.toasts.retry.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.retry.description}\n              </p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}