{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"sonner","title":"Sonner","description":"An opinionated toast component for showing brief, stackable notifications — successes, errors, and undoable actions — from anywhere in your app.","dependencies":["sonner","next-themes","cn","lucide-react"],"files":[{"path":"components/ui/sonner.tsx","content":"\"use client\"\n\nimport { cn } from \"cn\"\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  TriangleAlertIcon,\n  OctagonXIcon,\n  Loader2Icon,\n} from \"lucide-react\"\n\nconst Toaster = ({\n  className,\n  style,\n  icons,\n  toastOptions,\n  ...props\n}: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n  const classNames = toastOptions?.classNames\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className={cn(\"toaster group font-sans!\", className)}\n      icons={{\n        success: <CircleCheckIcon className=\"size-4 text-blue-500\" />,\n        info: <InfoIcon className=\"size-4 text-muted-foreground\" />,\n        warning: <TriangleAlertIcon className=\"size-4 text-orange-500\" />,\n        error: <OctagonXIcon className=\"size-4 text-destructive-foreground\" />,\n        loading: (\n          <Loader2Icon className=\"size-4 animate-spin text-muted-foreground\" />\n        ),\n        ...icons,\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-2xl)\",\n          \"--toast-icon-margin-start\": \"0px\",\n          \"--toast-icon-margin-end\": \"0px\",\n          \"--toast-svg-margin-start\": \"0px\",\n          \"--toast-svg-margin-end\": \"0px\",\n          ...style,\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        ...toastOptions,\n        classNames: {\n          ...classNames,\n          toast: cn(\n            \"cn-toast items-start! gap-3! text-sm! data-[styled=true]:border-0! data-[styled=true]:shadow-(--shadow-popover)! data-[styled=true]:ring-1 data-[styled=true]:ring-border data-[styled=true]:focus-visible:ring-2 data-[styled=true]:focus-visible:ring-ring/30 [&[data-styled=false]_[data-title]>*]:shadow-(--shadow-popover)\",\n            classNames?.toast\n          ),\n          title: cn(\"leading-5!\", classNames?.title),\n          description: cn(\n            \"text-sm! leading-5! text-muted-foreground!\",\n            classNames?.description\n          ),\n          icon: cn(\"mt-0.5\", classNames?.icon),\n          actionButton: cn(\n            \"h-6! rounded-md! bg-primary! px-2! text-xs! font-medium! text-primary-foreground! hover:bg-primary/90! focus-visible:ring-2 focus-visible:ring-ring/30 [[data-cancel]+&]:-ml-1.5!\",\n            classNames?.actionButton\n          ),\n          cancelButton: cn(\n            \"h-6! rounded-md! bg-fill-2! px-2! text-xs! font-medium! text-foreground! hover:bg-fill-3!\",\n            classNames?.cancelButton\n          ),\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n","type":"registry:ui"}],"cssVars":{"theme":{"color-destructive-foreground":"var(--destructive-foreground)","color-fill-2":"var(--fill-2)","color-fill-3":"var(--fill-3)","text-xs--letter-spacing":"-0.005em","text-sm--letter-spacing":"-0.005em","text-xs":"0.8125rem","text-xs--line-height":"calc(1.25 / 0.8125)","shadow-popover":"0 10px 15px -3px oklch(0 0 0 / 7%), 0 4px 6px -4px oklch(0 0 0 / 7%)"},"light":{"destructive-foreground":"oklch(0.505 0.213 27.518)","fill-2":"oklch(0.556 0 0 / 8%)","fill-3":"oklch(0.556 0 0 / 12%)"},"dark":{"destructive-foreground":"oklch(0.704 0.191 22.216)","fill-2":"oklch(1 0 0 / 10%)","fill-3":"oklch(1 0 0 / 14%)"}},"categories":["feedback"],"type":"registry:ui"}