{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sonner-3",
  "type": "registry:component",
  "title": "Sonner 3",
  "description": "Sonner 3. An opinionated toast component for React.",
  "dependencies": [
    "lucide-react",
    "sonner"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/sonner-3.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { TruckIcon } from 'lucide-react'\nimport { toast } from 'sonner'\nimport { Button } from '@/components/base-ui/button'\n\nconst Sonner3 = () => {\n  return (\n    <Button\n      variant='outline'\n      className='rounded-2xl bg-orange-500/5 text-orange-600 hover:text-orange-700 dark:hover:text-orange-500 border-orange-500/20 hover:bg-orange-500/10 hover:border-orange-500/30 transition-all duration-300 px-6'\n      onClick={() =>\n        toast(\n          <div className='flex items-center gap-3'>\n            <div className='p-2 bg-orange-500/10 rounded-xl'>\n              <TruckIcon className='size-5 text-orange-600 shrink-0' />\n            </div>\n            <div className='flex flex-col gap-1'>\n               <span className='font-semibold'>Order Out for Delivery</span>\n               <span className='text-xs opacity-80'>Your courier is just a few blocks away!</span>\n            </div>\n          </div>,\n          {\n            style: { borderRadius: '20px' },\n            className: 'shadow-2xl shadow-orange-500/10',\n          }\n        )\n      }\n    >\n      Track Delivery Status\n    </Button>\n  )\n}\n\nexport default Sonner3\n"
    }
  ]
}