{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sonner",
  "title": "Sonner",
  "description": "Flag toasts (sonner) following html[data-theme], no next-themes.",
  "dependencies": [
    "sonner@^2.0.8",
    "lucide-react@^1.49.0"
  ],
  "registryDependencies": [
    "@flag/utils",
    "@flag/use-flag-theme"
  ],
  "files": [
    {
      "path": "registry/flag/ui/sonner.tsx",
      "content": "\"use client\"\n\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { useFlagTheme } from \"@/registry/flag/hooks/use-flag-theme\"\n\n// Toasts on the Flag popover surface. The theme follows html[data-theme]\n// (Flag's contract) instead of next-themes; status icons take the base\n// status colors, measured at 4.5:1 on every surface. Tier A: .toast-region / .toast .toast--<type>.\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const theme = useFlagTheme()\n\n  return (\n    <Sonner\n      theme={theme}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <CircleCheckIcon className=\"size-4 text-success\" />\n        ),\n        info: <InfoIcon className=\"size-4 text-(--color-link)\" />,\n        warning: (\n          <TriangleAlertIcon className=\"size-4 text-warning\" />\n        ),\n        error: <OctagonXIcon className=\"size-4 text-destructive\" />,\n        loading: <Loader2Icon className=\"size-4 motion-safe:animate-spin\" />,\n      }}\n      toastOptions={{\n        classNames: {\n          toast: \"font-sans shadow-(--shadow-popover)!\",\n          description: \"text-subtle!\",\n          actionButton: \"bg-primary! text-primary-foreground!\",\n          cancelButton: \"bg-secondary! text-secondary-foreground!\",\n        },\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--color-selected-border)\",\n          \"--border-radius\": \"var(--radius-lg)\",\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}