{
  "name": "swap-animations-demo",
  "type": "registry:example",
  "registryDependencies": [
    "swap"
  ],
  "files": [
    {
      "path": "examples/swap-animations-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  CheckIcon,\n  MoonIcon,\n  PauseIcon,\n  PlayIcon,\n  SunIcon,\n  Volume2Icon,\n  VolumeXIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { Swap, SwapOff, SwapOn } from \"@/registry/bases/radix/ui/swap\";\n\nexport default function SwapAnimationsDemo() {\n  return (\n    <div className=\"grid grid-cols-2 gap-6 md:grid-cols-4\">\n      <div className=\"flex flex-col items-center gap-3\">\n        <Swap\n          animation=\"fade\"\n          className=\"size-12 rounded-lg border bg-muted/50\"\n        >\n          <SwapOn>\n            <CheckIcon className=\"size-5\" />\n          </SwapOn>\n          <SwapOff>\n            <XIcon className=\"size-5\" />\n          </SwapOff>\n        </Swap>\n        <span className=\"text-center text-sm text-muted-foreground\">Fade</span>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-3\">\n        <Swap\n          animation=\"rotate\"\n          className=\"size-12 rounded-lg border bg-muted/50\"\n        >\n          <SwapOn>\n            <SunIcon className=\"size-5\" />\n          </SwapOn>\n          <SwapOff>\n            <MoonIcon className=\"size-5\" />\n          </SwapOff>\n        </Swap>\n        <span className=\"text-center text-sm text-muted-foreground\">\n          Rotate\n        </span>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-3\">\n        <Swap\n          animation=\"flip\"\n          className=\"size-12 rounded-lg border bg-muted/50\"\n        >\n          <SwapOn>\n            <PlayIcon className=\"size-5\" />\n          </SwapOn>\n          <SwapOff>\n            <PauseIcon className=\"size-5\" />\n          </SwapOff>\n        </Swap>\n        <span className=\"text-center text-sm text-muted-foreground\">Flip</span>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-3\">\n        <Swap\n          animation=\"scale\"\n          className=\"size-12 rounded-lg border bg-muted/50\"\n        >\n          <SwapOn>\n            <Volume2Icon className=\"size-5\" />\n          </SwapOn>\n          <SwapOff>\n            <VolumeXIcon className=\"size-5\" />\n          </SwapOff>\n        </Swap>\n        <span className=\"text-center text-sm text-muted-foreground\">Scale</span>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}