{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-toast-demo",
  "type": "registry:component",
  "registryDependencies": [
    "halo-toast"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-toast-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  showPolishedToast,\n  type RimVariant,\n} from \"@/registry/default/ui/halo-toast\"\n\n/** Mirrors {@link HaloCard} surface chrome in halo-toast (layered inset + ambient depth). */\nconst toastLikeShadow =\n  \"shadow-[0_1px_0_rgba(255,255,255,0.1)_inset,0_1px_2px_rgba(0,0,0,0.04),0_4px_14px_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.06)_inset,0_1px_2px_rgba(0,0,0,0.35),0_4px_20px_rgba(0,0,0,0.35)]\"\n\nconst toastLikeShadowHover =\n  \"fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.14)_inset,0_1px_2px_rgba(0,0,0,0.09),0_4px_14px_rgba(0,0,0,0.11)] dark:fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_1px_2px_rgba(0,0,0,0.42),0_4px_20px_rgba(0,0,0,0.48)]\"\n\nconst pressAndFocus =\n  \"transition-[background-color,border-color,box-shadow,transform,color] duration-200 ease-out motion-reduce:transition-none active:scale-[0.96] motion-reduce:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n\nconst SAMPLES: {\n  description: string\n  politeness: \"alert\" | \"status\"\n  title: string\n}[] = [\n  {\n    politeness: \"status\",\n    title: \"Saved to workspace\",\n    description:\n      \"Your changes are synced. You can continue editing or invite collaborators from the share menu.\",\n  },\n  {\n    politeness: \"status\",\n    title: \"Copied to clipboard\",\n    description: \"The snippet is ready to paste wherever you need it.\",\n  },\n  {\n    politeness: \"alert\",\n    title: \"Connection lost\",\n    description:\n      \"We will retry automatically. Check your network if this message persists.\",\n  },\n]\n\nexport default function HaloToastDemo() {\n  const [index, setIndex] = useState(0)\n\n  function pushWithRim(rimVariant: RimVariant) {\n    const s = SAMPLES[index % SAMPLES.length] ?? SAMPLES[0]\n    showPolishedToast({\n      closeButton: false,\n      description: s.description,\n      messageKey: `sonner-${index}-${rimVariant}-${s.title}`,\n      politeness: s.politeness,\n      rimVariant,\n      title: s.title,\n    })\n    setIndex((i) => i + 1)\n  }\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"flex w-full max-w-lg flex-col items-center gap-12\">\n        <section className=\"flex w-full flex-col items-center gap-6\">\n          <div className=\"text-center\">\n            <h2 className=\"font-semibold text-foreground text-xl\">\n              Animated toast\n            </h2>\n            <p className=\"mt-2 max-w-md text-pretty text-muted-foreground text-sm\">\n              Stackable notifications with a gradient rim, frosted panel, and\n              optional status or semantic rim colors. Dismiss from the viewport\n              edge or use an in-card close control when enabled.\n            </p>\n          </div>\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"flex flex-wrap items-center justify-center gap-3\">\n              <span\n                className={cn(\n                  \"inline-flex rounded-[15px] p-px\",\n                  \"bg-[linear-gradient(135deg,#ff0080_0%,#7928ca_42%,#00d4ff_100%)]\",\n                  toastLikeShadow,\n                  \"shadow-[0_4px_18px_rgba(121,40,202,0.22),0_1px_0_rgba(255,255,255,0.12)_inset] dark:shadow-[0_4px_22px_rgba(0,0,0,0.45),0_1px_0_rgba(255,255,255,0.06)_inset]\"\n                )}\n              >\n                <button\n                  className={cn(\n                    \"inline-flex min-h-10 items-center justify-center rounded-[14px] px-4\",\n                    \"bg-primary font-medium text-primary-foreground text-sm antialiased\",\n                    \"shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]\",\n                    pressAndFocus,\n                    \"fine-hover:hover:bg-primary/92 fine-hover:hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\"\n                  )}\n                  onClick={() => pushWithRim(\"default\")}\n                  type=\"button\"\n                >\n                  Push toast (default rim)\n                </button>\n              </span>\n              <button\n                className={cn(\n                  \"inline-flex min-h-10 items-center justify-center rounded-[14px] border border-border/90 px-4\",\n                  \"bg-linear-to-b from-card/92 to-card/78 font-medium text-foreground text-sm antialiased\",\n                  \"backdrop-blur-xl backdrop-saturate-150\",\n                  toastLikeShadow,\n                  toastLikeShadowHover,\n                  pressAndFocus,\n                  \"fine-hover:hover:border-ring/45 dark:fine-hover:hover:border-zinc-500/55\",\n                  \"fine-hover:hover:bg-linear-to-b fine-hover:hover:from-card fine-hover:hover:to-card/90\"\n                )}\n                onClick={() => {\n                  showPolishedToast({\n                    closeButton: true,\n                    description:\n                      \"Use the dismiss control on this card to close it.\",\n                    messageKey: `close-button-demo-${Date.now()}`,\n                    politeness: \"status\",\n                    title: \"Toast with close button\",\n                  })\n                }}\n                type=\"button\"\n              >\n                Push toast (with close)\n              </button>\n            </div>\n            <p className=\"text-center text-muted-foreground text-xs\">\n              Success and error rim treatments\n            </p>\n            <div className=\"flex flex-wrap items-center justify-center gap-3\">\n              <button\n                className={cn(\n                  \"inline-flex min-h-10 items-center justify-center rounded-[14px] border border-emerald-600/30 px-4\",\n                  \"bg-linear-to-b from-emerald-500/12 via-emerald-600/8 to-teal-800/10\",\n                  \"font-medium text-foreground text-sm antialiased\",\n                  \"backdrop-blur-xl backdrop-saturate-150\",\n                  \"shadow-[0_1px_0_rgba(255,255,255,0.08)_inset,0_1px_2px_rgba(0,0,0,0.04),0_4px_14px_rgba(5,150,105,0.1)]\",\n                  \"dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_rgba(5,150,105,0.12)]\",\n                  pressAndFocus,\n                  \"fine-hover:hover:border-emerald-500/45 fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.1)_inset,0_4px_16px_rgba(16,185,129,0.14)]\",\n                  \"fine-hover:hover:bg-linear-to-b fine-hover:hover:from-emerald-500/18 fine-hover:hover:via-emerald-600/12 fine-hover:hover:to-teal-800/14\"\n                )}\n                onClick={() => {\n                  showPolishedToast({\n                    description:\n                      \"Your changes are synced. You can continue editing or invite collaborators.\",\n                    messageKey: `rim-success-${Date.now()}`,\n                    politeness: \"status\",\n                    rimVariant: \"success\",\n                    title: \"Saved to workspace\",\n                  })\n                }}\n                type=\"button\"\n              >\n                Success rim\n              </button>\n              <button\n                className={cn(\n                  \"inline-flex min-h-10 items-center justify-center rounded-[14px] border border-rose-600/35 px-4\",\n                  \"bg-linear-to-b from-red-500/10 via-rose-600/8 to-red-950/12\",\n                  \"font-medium text-foreground text-sm antialiased\",\n                  \"backdrop-blur-xl backdrop-saturate-150\",\n                  \"shadow-[0_1px_0_rgba(255,255,255,0.07)_inset,0_1px_2px_rgba(0,0,0,0.04),0_4px_14px_rgba(220,38,38,0.12)]\",\n                  \"dark:shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_4px_18px_rgba(220,38,38,0.14)]\",\n                  pressAndFocus,\n                  \"fine-hover:hover:border-rose-500/50 fine-hover:hover:shadow-[0_1px_0_rgba(255,255,255,0.09)_inset,0_4px_16px_rgba(244,63,94,0.16)]\",\n                  \"fine-hover:hover:bg-linear-to-b fine-hover:hover:from-red-500/16 fine-hover:hover:via-rose-600/12 fine-hover:hover:to-red-950/16\"\n                )}\n                onClick={() => {\n                  showPolishedToast({\n                    description:\n                      \"We could not complete that action. Try again or contact support if it keeps happening.\",\n                    messageKey: `rim-destructive-${Date.now()}`,\n                    politeness: \"alert\",\n                    rimVariant: \"destructive\",\n                    title: \"Something went wrong\",\n                  })\n                }}\n                type=\"button\"\n              >\n                Error rim\n              </button>\n            </div>\n          </div>\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}