{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast-animations-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/notify"
  ],
  "files": [
    {
      "path": "registry/example/toast-animations-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"@/packages/notify/src\"\nimport type { AnimationType } from \"@/packages/notify/src/notify-types\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\ntype ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\"\n\nexport default function ToastAnimationsDemo() {\n  const animations: AnimationType[] = [\"slide\", \"fade\", \"scale\", \"bounce\"]\n  const [position, setPosition] = useState<ToastPosition>(\"bottom-right\")\n\n  // Animation descriptions\n  const descriptions = {\n    slide: \"Smooth slide-in animation from the side\",\n    fade: \"Simple fade-in and fade-out effect\",\n    scale: \"Grow and shrink animation with opacity change\",\n    bounce: \"Bouncy spring-physics animation for playful effect\",\n  }\n\n  // Show a toast with the selected animation and position\n  const showToast = (animation: AnimationType) => {\n    toast.push({\n      title: `Animation: ${animation}`,\n      description: descriptions[animation],\n      text: \"Drag me to dismiss!\",\n      position,\n      animation,\n      status:\n        animation === \"bounce\" ? \"success\"\n        : animation === \"slide\" ? \"info\"\n        : animation === \"scale\" ? \"warning\"\n        : \"default\",\n    })\n  }\n\n  // Show all animations at once\n  const showAllAnimations = () => {\n    animations.forEach((animation, index) => {\n      setTimeout(() => {\n        toast.push({\n          title: `Animation: ${animation}`,\n          description: descriptions[animation],\n          text: \"Drag me to dismiss!\",\n          position,\n          animation,\n          status:\n            animation === \"bounce\" ? \"success\"\n            : animation === \"slide\" ? \"info\"\n            : animation === \"scale\" ? \"warning\"\n            : \"default\",\n        })\n      }, index * 500) // Stagger the toasts\n    })\n  }\n\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4\">\n        <h3 className=\"text-sm font-medium\">Toast Position</h3>\n        <Select\n          value={position}\n          onValueChange={(value) => setPosition(value as ToastPosition)}\n        >\n          <SelectTrigger className=\"w-[220px]\">\n            <SelectValue placeholder=\"Select position\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"top-left\">Top Left</SelectItem>\n            <SelectItem value=\"top-center\">Top Center</SelectItem>\n            <SelectItem value=\"top-right\">Top Right</SelectItem>\n            <SelectItem value=\"bottom-left\">Bottom Left</SelectItem>\n            <SelectItem value=\"bottom-center\">Bottom Center</SelectItem>\n            <SelectItem value=\"bottom-right\">Bottom Right</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"space-y-4\">\n        <h3 className=\"text-sm font-medium\">Individual Animations</h3>\n        <div className=\"flex flex-wrap gap-4\">\n          {animations.map((animation) => (\n            <Button\n              key={animation}\n              variant=\"outline\"\n              onClick={() => showToast(animation)}\n            >\n              {animation.charAt(0).toUpperCase() + animation.slice(1)}\n            </Button>\n          ))}\n        </div>\n      </div>\n\n      <div>\n        <Button onClick={showAllAnimations}>Show All Animations</Button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/toast-animations-demo.tsx"
    }
  ],
  "type": "registry:example"
}