{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "sonner",
  "title": "Sonner",
  "author": "Matthew Blode",
  "description": "A toast notification component powered by Sonner.",
  "dependencies": ["sonner", "next-themes"],
  "files": [
    {
      "path": "ui/sonner.tsx",
      "content": "\"use client\";\n\nimport {\n  CircleCheckIcon,\n  CircleInfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from \"blode-icons-react\";\nimport { useTheme } from \"next-themes\";\nimport { Toaster as Sonner } from \"sonner\";\nimport type { ToasterProps } from \"sonner\";\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme();\n\n  return (\n    <Sonner\n      className=\"toaster group\"\n      icons={{\n        error: <OctagonXIcon className=\"size-4\" />,\n        info: <CircleInfoIcon className=\"size-4\" />,\n        loading: <Loader2Icon className=\"size-4 animate-spin\" />,\n        success: <CircleCheckIcon className=\"size-4\" />,\n        warning: <TriangleAlertIcon className=\"size-4\" />,\n      }}\n      style={\n        {\n          \"--border-radius\": \"var(--radius)\",\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n        } as React.CSSProperties\n      }\n      theme={theme as ToasterProps[\"theme\"]}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}