{
  "name": "speed-dial-side-demo",
  "type": "registry:example",
  "dependencies": [
    "sonner"
  ],
  "registryDependencies": [
    "speed-dial"
  ],
  "files": [
    {
      "path": "examples/speed-dial-side-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Copy, Heart, Plus, Share2 } from \"lucide-react\";\nimport { toast } from \"sonner\";\n\nimport {\n  SpeedDial,\n  SpeedDialAction,\n  SpeedDialContent,\n  SpeedDialItem,\n  SpeedDialLabel,\n  SpeedDialTrigger,\n} from \"@/registry/bases/radix/ui/speed-dial\";\n\nconst sides = [\"top\", \"right\", \"left\", \"bottom\"] as const;\n\nexport default function SpeedDialSideDemo() {\n  return (\n    <div className=\"grid grid-cols-2 gap-24\">\n      {sides.map((side) => (\n        <div key={side} className=\"flex flex-col items-center gap-2\">\n          <span className=\"text-sm text-muted-foreground capitalize\">\n            {side}\n          </span>\n          <SpeedDial side={side}>\n            <SpeedDialTrigger className=\"transition-transform duration-200 ease-out data-[state=closed]:rotate-0 data-[state=open]:rotate-135\">\n              <Plus />\n            </SpeedDialTrigger>\n            <SpeedDialContent>\n              <SpeedDialItem>\n                <SpeedDialLabel className=\"sr-only\">Share</SpeedDialLabel>\n                <SpeedDialAction onSelect={() => toast.success(\"Shared\")}>\n                  <Share2 />\n                </SpeedDialAction>\n              </SpeedDialItem>\n              <SpeedDialItem>\n                <SpeedDialLabel className=\"sr-only\">Copy</SpeedDialLabel>\n                <SpeedDialAction onSelect={() => toast.success(\"Copied\")}>\n                  <Copy />\n                </SpeedDialAction>\n              </SpeedDialItem>\n              <SpeedDialItem>\n                <SpeedDialLabel className=\"sr-only\">Like</SpeedDialLabel>\n                <SpeedDialAction onSelect={() => toast.success(\"Liked\")}>\n                  <Heart />\n                </SpeedDialAction>\n              </SpeedDialItem>\n            </SpeedDialContent>\n          </SpeedDial>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}