{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sonner-4",
  "type": "registry:component",
  "title": "Sonner 4",
  "description": "Sonner 4. An opinionated toast component for React.",
  "dependencies": [
    "sonner"
  ],
  "registryDependencies": [
    "avatar",
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/sonner-4.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { toast } from 'sonner'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/base-ui/avatar'\nimport { Button } from '@/components/base-ui/button'\n\nconst Sonner4 = () => {\n  return (\n    <Button\n      variant='outline'\n      className='rounded-2xl bg-purple-500/5 text-purple-600 hover:text-purple-700 dark:hover:text-purple-500 border-purple-500/20 hover:bg-purple-500/10 hover:border-purple-500/30 transition-all duration-300 px-6'\n      onClick={() =>\n        toast(\n          <div className='flex items-center gap-3'>\n            <Avatar className='size-10'>\n              <AvatarImage src='https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww' alt='Hallie Richards' />\n              <AvatarFallback className='text-xs bg-purple-50 text-purple-600'>HR</AvatarFallback>\n            </Avatar>\n            <div className='flex flex-col gap-0.5'>\n              <span className='font-medium text-sm'>Profile Updated</span>\n              <p className='text-xs opacity-70'>Settings synced across all devices.</p>\n            </div>\n          </div>,\n          {\n            style: { borderRadius: '18px' },\n            className: 'border border-purple-100 shadow-xl shadow-purple-500/5',\n          }\n        )\n      }\n    >\n      Update System Profile\n    </Button>\n  )\n}\n\nexport default Sonner4\n"
    }
  ]
}