{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sonner",
  "dependencies": [
    "sonner",
    "next-themes"
  ],
  "registryDependencies": [
    "https://powui.dev/r/utils.json",
    "https://powui.dev/r/filters.json",
    "https://powui.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/sonner.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Toaster as Sonner,\n  toast,\n  type ExternalToast,\n  type ToasterProps,\n} from \"sonner\";\nimport { Filters } from \"@/components/ui/filters\";\nimport { cn } from \"@/lib/utils\";\n\n// ─── Design tokens per variant ───────────────────────────────────────────────\n\nexport type ComicToastVariant =\n  | \"default\"\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"info\";\n\nexport const variantTokens: Record<\n  ComicToastVariant,\n  { badge: string; bg: string; rotate: string; badgeBg: string }\n> = {\n  default: {\n    badge: \"HEY!\",\n    bg: \"var(--toast-default-bg)\",\n    rotate: \"-3deg\",\n    badgeBg: \"var(--toast-default-badge-bg)\",\n  },\n  success: {\n    badge: \"POW!\",\n    bg: \"var(--toast-success-bg)\",\n    rotate: \"3deg\",\n    badgeBg: \"var(--toast-success-badge-bg)\",\n  },\n  error: {\n    badge: \"ZAP!\",\n    bg: \"var(--toast-error-bg)\",\n    rotate: \"-4deg\",\n    badgeBg: \"var(--toast-error-badge-bg)\",\n  },\n  warning: {\n    badge: \"UH-OH!\",\n    bg: \"var(--toast-warning-bg)\",\n    rotate: \"2deg\",\n    badgeBg: \"var(--toast-warning-badge-bg)\",\n  },\n  info: {\n    badge: \"HMM...\",\n    bg: \"var(--toast-info-bg)\",\n    rotate: \"-2deg\",\n    badgeBg: \"var(--toast-info-badge-bg)\",\n  },\n};\n\n// ─── Comic toast JSX ─────────────────────────────────────────────────────────\n\ninterface ComicToastProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  variant?: ComicToastVariant;\n  containerClassName?: string;\n}\n\nexport function ComicToast({\n  title,\n  description,\n  variant = \"default\",\n  containerClassName,\n}: ComicToastProps) {\n  const { badge, bg, rotate, badgeBg } = variantTokens[variant];\n  const isDark = [\"success\", \"error\", \"warning\", \"info\"].includes(variant);\n  const textColor = isDark ? \"white\" : \"light-dark(black, white)\";\n\n  return (\n    <Filters.Displacement scale={2} frequency={0.65}>\n      <div\n        style={{\n          backgroundImage: `radial-gradient(circle, rgba(0,0,0,0.25) 1.2px, transparent 1.2px)`,\n          backgroundSize: \"8px 8px\",\n          backgroundColor: bg,\n        }}\n        className={cn(\n          \"relative w-full px-3 pb-3 pt-5 border-4 border-foreground box-border shadow-[10px_10px_0_var(--foreground)]\",\n          containerClassName,\n        )}\n      >\n        {/* Exclamation badge — top-right corner */}\n        <span\n          aria-hidden\n          style={{\n            position: \"absolute\",\n            top: \"-14px\",\n            right: \"10px\",\n            backgroundColor: badgeBg,\n            border: \"3px solid black\",\n            borderRadius: \"4px\",\n            padding: \"1px 8px\",\n            fontFamily: \"'Bangers', cursive\",\n            fontSize: \"14px\",\n            letterSpacing: \"0.08em\",\n            color: \"black\",\n            transform: `rotate(${rotate})`,\n            boxShadow: \"3px 3px 0 rgba(0,0,0,0.85)\",\n            zIndex: 10,\n            whiteSpace: \"nowrap\",\n            lineHeight: 1.4,\n          }}\n        >\n          {badge}\n        </span>\n\n        {/* Title */}\n        <div\n          style={{\n            fontFamily: \"'Bangers', cursive\",\n            fontSize: \"20px\",\n            letterSpacing: \"0.05em\",\n            color: textColor,\n            lineHeight: 1.2,\n            marginBottom: description ? \"6px\" : 0,\n            textShadow: isDark ? \"1px 1px 0 rgba(0,0,0,0.4)\" : \"none\",\n          }}\n        >\n          {title}\n        </div>\n\n        {/* Description — solid pill for legibility over halftone */}\n        {description && (\n          <div\n            style={{\n              display: \"inline-block\",\n              backgroundColor: \"rgba(255,255,255,0.92)\",\n              border: \"2px solid black\",\n              borderRadius: \"3px\",\n              padding: \"3px 8px\",\n              fontFamily: \"'Walter Turncoat', cursive\",\n              fontSize: \"13px\",\n              color: \"black\",\n              lineHeight: 1.4,\n            }}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    </Filters.Displacement>\n  );\n}\n\n// ─── Convenience fire functions ───────────────────────────────────────────────\n\nfunction fireComicToast(\n  variant: ComicToastVariant,\n  title: React.ReactNode,\n  description?: React.ReactNode,\n  data?: ExternalToast & { containerClassName?: string },\n) {\n  toast.custom(\n    () => (\n      <ComicToast\n        title={title}\n        description={description}\n        variant={variant}\n        containerClassName={data?.containerClassName}\n      />\n    ),\n    data,\n  );\n}\n\ntype TComicToastFunc = (\n  title: React.ReactNode,\n  description?: React.ReactNode,\n  data?: ExternalToast & {\n    containerClassName?: string;\n  },\n) => void;\n\nconst comicToastCurry =\n  (variant: ComicToastVariant) =>\n  (\n    title: React.ReactNode,\n    description?: React.ReactNode,\n    data?: ExternalToast & { containerClassName?: string },\n  ) =>\n    fireComicToast(variant, title, description, data);\n\nexport const comicToast: {\n  default: TComicToastFunc;\n  success: TComicToastFunc;\n  error: TComicToastFunc;\n  warning: TComicToastFunc;\n  info: TComicToastFunc;\n} = {\n  default: comicToastCurry(\"default\"),\n  success: comicToastCurry(\"success\"),\n  error: comicToastCurry(\"error\"),\n  warning: comicToastCurry(\"warning\"),\n  info: comicToastCurry(\"info\"),\n};\n\n// ─── Toaster (place once in app root) ────────────────────────────────────────\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      position=\"bottom-right\"\n      style={{ \"--width\": \"340px\" } as React.CSSProperties}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "toast-default-bg": "#f59e0b",
      "toast-default-badge-bg": "#fcd34d",
      "toast-success-bg": "#16a34a",
      "toast-success-badge-bg": "#4ade80",
      "toast-error-bg": "#dc2626",
      "toast-error-badge-bg": "#f87171",
      "toast-warning-bg": "#ea580c",
      "toast-warning-badge-bg": "#fb923c",
      "toast-info-bg": "#2563eb",
      "toast-info-badge-bg": "#60a5fa"
    },
    "dark": {
      "toast-default-bg": "oklch(0.5 0.12 60)",
      "toast-default-badge-bg": "oklch(0.7 0.1 80)",
      "toast-success-bg": "oklch(0.48 0.13 142)",
      "toast-success-badge-bg": "oklch(0.7 0.12 142)",
      "toast-error-bg": "oklch(0.5 0.16 27)",
      "toast-error-badge-bg": "oklch(0.7 0.13 27)",
      "toast-warning-bg": "oklch(0.55 0.15 50)",
      "toast-warning-badge-bg": "oklch(0.72 0.12 50)",
      "toast-info-bg": "oklch(0.48 0.14 245)",
      "toast-info-badge-bg": "oklch(0.68 0.12 245)"
    }
  },
  "type": "registry:ui"
}