{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toast-05","type":"registry:component","title":"Custom Styled Toasts","description":"Toast notifications with custom styling, themes, and branding for different contexts. Features premium yellow themes, notification blue themes, persistent toasts with custom actions, and comprehensive styling options. Perfect for applications requiring branded notification experiences with custom visual themes.","dependencies":["lucide-react","sonner"],"registryDependencies":["button","card","badge","sonner","toast-utils","toast-provider"],"files":[{"path":"src/registry/blocks/application/feedback/toasts/toast-05.tsx","content":"\"use client\";\n\nimport { Bell, Shield, Star } 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 Toast05Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    subtitle: string;\n  };\n  toasts: {\n    premium: {\n      title: string;\n      description: string;\n      buttonText: string;\n      actionText: string;\n    };\n    notification: {\n      title: string;\n      description: string;\n      buttonText: string;\n      actionText: string;\n    };\n    persistent: {\n      title: string;\n      description: string;\n      buttonText: string;\n      actionText: string;\n      cancelText: string;\n    };\n  };\n} = {\n  header: {\n    title: \"Custom Styled Toasts\",\n    subtitle:\n      \"Toasts with custom styling, themes, and branding for different contexts\",\n  },\n  toasts: {\n    premium: {\n      title: \"Premium feature unlocked!\",\n      description: \"You now have access to advanced analytics.\",\n      buttonText: \"Premium Toast\",\n      actionText: \"Explore\",\n    },\n    notification: {\n      title: \"New message received\",\n      description: \"You have 3 unread messages from your team.\",\n      buttonText: \"Notification\",\n      actionText: \"View Messages\",\n    },\n    persistent: {\n      title: \"Important system update\",\n      description:\n        \"A critical security update is available. Please restart your application.\",\n      buttonText: \"Persistent\",\n      actionText: \"Restart Now\",\n      cancelText: \"Later\",\n    },\n  },\n};\n\nexport function Toast05({ className }: Toast05Props) {\n  const showPremiumToast = () => {\n    toast(content.toasts.premium.title, {\n      description: content.toasts.premium.description,\n      icon: <Star className=\"h-4 w-4 text-yellow-500\" />,\n      className:\n        \"border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100\",\n      action: {\n        label: content.toasts.premium.actionText,\n        onClick: () => console.log(\"Premium feature explored\"),\n      },\n    });\n  };\n\n  const showNotificationToast = () => {\n    toast(content.toasts.notification.title, {\n      description: content.toasts.notification.description,\n      icon: <Bell className=\"h-4 w-4 text-blue-500\" />,\n      className:\n        \"border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100\",\n      action: {\n        label: content.toasts.notification.actionText,\n        onClick: () => console.log(\"Messages viewed\"),\n      },\n    });\n  };\n\n  const showPersistentToast = () => {\n    toast(content.toasts.persistent.title, {\n      description: content.toasts.persistent.description,\n      icon: <Shield className=\"h-4 w-4 text-orange-500\" />,\n      duration: Number.POSITIVE_INFINITY,\n      action: {\n        label: content.toasts.persistent.actionText,\n        onClick: () => {\n          toast.success(\"Application restarting...\");\n        },\n      },\n      cancel: {\n        label: content.toasts.persistent.cancelText,\n        onClick: () => console.log(\"Update postponed\"),\n      },\n    });\n  };\n\n  return (\n    <Card\n      className={cn(\"w-full max-w-4xl mx-auto\", className)}\n      data-testid=\"custom-styled-toasts-container\"\n    >\n      <CardContent className=\"p-6\">\n        <div className=\"space-y-4\">\n          <div>\n            <h3 className=\"text-lg font-semibold\">{content.header.title}</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {content.header.subtitle}\n            </p>\n          </div>\n\n          <div\n            className=\"grid grid-cols-1 md:grid-cols-3 gap-4\"\n            data-testid=\"toast-buttons-grid\"\n          >\n            <div className=\"space-y-2\" data-testid=\"premium-toast-section\">\n              <h4 className=\"font-medium\">Premium Theme</h4>\n              <Button\n                onClick={showPremiumToast}\n                className=\"w-full bg-yellow-600 hover:bg-yellow-700\"\n                data-testid=\"premium-toast-button\"\n              >\n                <Star className=\"mr-2 h-4 w-4\" />\n                {content.toasts.premium.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                Custom yellow theme for premium features\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"notification-toast-section\">\n              <h4 className=\"font-medium\">Notification Theme</h4>\n              <Button\n                onClick={showNotificationToast}\n                className=\"w-full bg-blue-600 hover:bg-blue-700\"\n                data-testid=\"notification-toast-button\"\n              >\n                <Bell className=\"mr-2 h-4 w-4\" />\n                {content.toasts.notification.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                Custom blue theme for notifications\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"persistent-toast-section\">\n              <h4 className=\"font-medium\">Persistent Toast</h4>\n              <Button\n                onClick={showPersistentToast}\n                className=\"w-full bg-orange-600 hover:bg-orange-700\"\n                data-testid=\"persistent-toast-button\"\n              >\n                <Shield className=\"mr-2 h-4 w-4\" />\n                {content.toasts.persistent.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                Toast that doesn't auto-dismiss\n              </p>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\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"}]}