{
  "name": "sonner-demo",
  "type": "registry:ui",
  "componentName": "sonner",
  "description": "Toast variants powered by Sonner with actions, success, error, and promise states.",
  "files": [
    {
      "path": "sonner-demo.tsx",
      "content": "'use client';\n\nimport { Bell, CheckCircle2, Loader2, TriangleAlert } from 'lucide-react';\nimport { toast } from 'sonner';\nimport { Toaster } from '@/components/core/sonner';\nimport { Button } from '@/components/ui/button';\n\nexport function SonnerDemo() {\n  return (\n    <div className='flex w-full max-w-md flex-col gap-3 px-4'>\n      <Toaster closeButton position='bottom-right' richColors />\n      <div className='grid w-full grid-cols-1 gap-2 sm:grid-cols-2'>\n        <Button\n          variant='outline'\n          className='justify-start'\n          onClick={() =>\n            toast('Review reminder added', {\n              description: 'You will be notified before the component review.',\n              action: {\n                label: 'Undo',\n                onClick: () => toast('Reminder removed'),\n              },\n            })\n          }\n        >\n          <Bell className='size-4' />\n          Default Toast\n        </Button>\n        <Button\n          variant='outline'\n          className='justify-start'\n          onClick={() =>\n            toast.success('Component published', {\n              description: 'The registry entry is ready to install.',\n            })\n          }\n        >\n          <CheckCircle2 className='size-4' />\n          Success Toast\n        </Button>\n        <Button\n          variant='outline'\n          className='justify-start'\n          onClick={() =>\n            toast.error('Build failed', {\n              description: 'Fix the type error and try again.',\n            })\n          }\n        >\n          <TriangleAlert className='size-4' />\n          Error Toast\n        </Button>\n        <Button\n          variant='outline'\n          className='justify-start'\n          onClick={() =>\n            toast.promise(\n              new Promise<void>((resolve) => setTimeout(resolve, 1800)),\n              {\n                loading: 'Publishing component...',\n                success: 'Component published',\n                error: 'Publish failed',\n              }\n            )\n          }\n        >\n          <Loader2 className='size-4' />\n          Promise Toast\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/sonner.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useTheme } from 'next-themes';\nimport { Toaster as Sonner } from 'sonner';\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\nfunction Toaster({ ...props }: ToasterProps) {\n  const { theme = 'system' } = useTheme();\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps['theme']}\n      className='toaster group'\n      toastOptions={{\n        classNames: {\n          toast:\n            'group toast group-[.toaster]:border-border group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:shadow-lg',\n          description: 'group-[.toast]:text-muted-foreground',\n          actionButton:\n            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n          cancelButton:\n            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n        },\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { Toaster };\n",
      "type": "registry:ui"
    }
  ]
}