{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sonner",
  "type": "registry:ui",
  "title": "Toaster",
  "description": "Toast notifications — themed, stacked, and promise-aware (Sonner) with Phosphor icons and dark-mode support.",
  "dependencies": [
    "@saasflare/ui",
    "next-themes",
    "sonner"
  ],
  "files": [
    {
      "path": "components/ui/sonner.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Toaster primitive — themed toast notification container.\n * Built on the Sonner toast library with Phosphor icons and next-themes integration.\n * Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/sonner\n * @layer core\n *\n * @requires sonner — peer dependency.\n *\n * @component\n * @example\n * import { Toaster } from '@saasflare/ui';\n * <Toaster position=\"top-right\" />\n */\n\nimport type { CSSProperties } from \"react\"\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  CircleNotchIcon,\n  XCircleIcon,\n  WarningIcon,\n} from \"@saasflare/ui\"\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Props for {@link Toaster}.\n *\n * Extends Sonner's `ToasterProps` (`position`, `duration`, …) with\n * {@link SaasflareComponentProps}, so `iconWeight` and the other axes can be\n * supplied per-instance or inherited from <SaasflareProvider>.\n */\ninterface SaasflareToasterProps extends Omit<ToasterProps, keyof SaasflareComponentProps>, SaasflareComponentProps {}\n\n/**\n * Toast notification container built on Sonner. Mount once near the app root,\n * then fire toasts with Sonner's `toast()` API. Follows the next-themes color\n * scheme and swaps Sonner's default status icons for Phosphor equivalents.\n *\n * @component\n * @layer core\n *\n * @example\n * <Toaster position=\"top-right\" />\n */\nconst Toaster = ({ surface, radius, animated, iconWeight, ...props }: SaasflareToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <Sonner\n      data-slot=\"toaster\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: <CheckCircleIcon weight={sf.iconWeight} className=\"size-4\" />,\n        info: <InfoIcon weight={sf.iconWeight} className=\"size-4\" />,\n        warning: <WarningIcon weight={sf.iconWeight} className=\"size-4\" />,\n        error: <XCircleIcon weight={sf.iconWeight} className=\"size-4\" />,\n        loading: <CircleNotchIcon className=\"size-4 animate-spin\" />,\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\n/**\n * Sonner's imperative toast API, re-exported so consumers and the mounted\n * {@link Toaster} are guaranteed to share ONE sonner module instance.\n * Importing `toast` from \"sonner\" directly can resolve to a second copy\n * (separate toast state) under isolated installs — always import it from\n * `@saasflare/ui` instead.\n */\nexport { toast } from \"sonner\"\n\nexport { Toaster, type SaasflareToasterProps }\n",
      "target": "components/ui/sonner.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/sonner.json"
  }
}