{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toast-02","type":"registry:component","title":"Status Toast Notifications","description":"Status toast notification component showcasing different toast types with semantic colors and appropriate icons. Features success, error, warning, and info toasts with consistent styling and messaging patterns. Perfect for applications requiring clear status communication with users.","dependencies":["lucide-react","sonner"],"registryDependencies":["button","card","sonner","toast-utils","toast-provider"],"files":[{"path":"src/registry/blocks/application/feedback/toasts/toast-02.tsx","content":"\"use client\";\n\nimport { AlertTriangle, CheckCircle2, Info, XCircle } from \"lucide-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 Toast02Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    subtitle: string;\n  };\n  toasts: {\n    success: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      color: string;\n    };\n    error: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      color: string;\n    };\n    warning: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      color: string;\n    };\n    info: {\n      title: string;\n      buttonText: string;\n      description: string;\n      toastTitle: string;\n      toastDescription: string;\n      color: string;\n    };\n  };\n} = {\n  header: {\n    title: \"Status Toasts\",\n    subtitle:\n      \"Different status variants with appropriate colors, icons, and semantic meaning\",\n  },\n  toasts: {\n    success: {\n      title: \"Success\",\n      buttonText: \"Success Toast\",\n      description: \"For successful operations and confirmations\",\n      toastTitle: \"Account created successfully\",\n      toastDescription: \"Welcome to our platform! You can now start exploring.\",\n      color: \"text-green-700 dark:text-green-400\",\n    },\n    error: {\n      title: \"Error\",\n      buttonText: \"Error Toast\",\n      description: \"For errors and failed operations\",\n      toastTitle: \"Something went wrong\",\n      toastDescription:\n        \"Your request could not be processed. Please try again.\",\n      color: \"text-destructive\",\n    },\n    warning: {\n      title: \"Warning\",\n      buttonText: \"Warning Toast\",\n      description: \"For warnings and cautions\",\n      toastTitle: \"Storage almost full\",\n      toastDescription:\n        \"You're using 90% of your storage. Consider upgrading your plan.\",\n      color: \"text-yellow-700 dark:text-yellow-400\",\n    },\n    info: {\n      title: \"Info\",\n      buttonText: \"Info Toast\",\n      description: \"For informational messages\",\n      toastTitle: \"New feature available\",\n      toastDescription: \"Check out our latest updates in the settings panel.\",\n      color: \"text-blue-700 dark:text-blue-400\",\n    },\n  },\n};\n\nexport function Toast02({ className }: Toast02Props) {\n  const showSuccessToast = () => {\n    toast.success(content.toasts.success.toastTitle, {\n      description: content.toasts.success.toastDescription,\n    });\n  };\n\n  const showErrorToast = () => {\n    toast.error(content.toasts.error.toastTitle, {\n      description: content.toasts.error.toastDescription,\n    });\n  };\n\n  const showWarningToast = () => {\n    toast.warning(content.toasts.warning.toastTitle, {\n      description: content.toasts.warning.toastDescription,\n    });\n  };\n\n  const showInfoToast = () => {\n    toast.info(content.toasts.info.toastTitle, {\n      description: content.toasts.info.toastDescription,\n    });\n  };\n\n  return (\n    <div\n      className={cn(\"w-full max-w-4xl mx-auto\", className)}\n      data-testid=\"status-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 lg:grid-cols-4 gap-4\"\n            data-testid=\"status-toast-buttons-grid\"\n          >\n            <div className=\"space-y-2\" data-testid=\"success-toast-section\">\n              <h4 className={`font-medium ${content.toasts.success.color}`}>\n                {content.toasts.success.title}\n              </h4>\n              <Button\n                onClick={showSuccessToast}\n                className=\"w-full bg-green-600 hover:bg-green-700\"\n                data-testid=\"success-toast-button\"\n              >\n                <CheckCircle2 className=\"mr-2 h-4 w-4\" />\n                {content.toasts.success.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.success.description}\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"error-toast-section\">\n              <h4 className={`font-medium ${content.toasts.error.color}`}>\n                {content.toasts.error.title}\n              </h4>\n              <Button\n                onClick={showErrorToast}\n                className=\"w-full bg-red-600 hover:bg-red-700\"\n                data-testid=\"error-toast-button\"\n              >\n                <XCircle className=\"mr-2 h-4 w-4\" />\n                {content.toasts.error.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.error.description}\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"warning-toast-section\">\n              <h4 className={`font-medium ${content.toasts.warning.color}`}>\n                {content.toasts.warning.title}\n              </h4>\n              <Button\n                onClick={showWarningToast}\n                className=\"w-full bg-yellow-600 hover:bg-yellow-700\"\n                data-testid=\"warning-toast-button\"\n              >\n                <AlertTriangle className=\"mr-2 h-4 w-4\" />\n                {content.toasts.warning.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.warning.description}\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"info-toast-section\">\n              <h4 className={`font-medium ${content.toasts.info.color}`}>\n                {content.toasts.info.title}\n              </h4>\n              <Button\n                onClick={showInfoToast}\n                className=\"w-full bg-blue-600 hover:bg-blue-700\"\n                data-testid=\"info-toast-button\"\n              >\n                <Info className=\"mr-2 h-4 w-4\" />\n                {content.toasts.info.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                {content.toasts.info.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"}]}