{
  "name": "speed-dial-controlled-demo",
  "type": "registry:example",
  "dependencies": [
    "sonner"
  ],
  "registryDependencies": [
    "button",
    "speed-dial"
  ],
  "files": [
    {
      "path": "examples/speed-dial-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Copy, Heart, Plus, Share2, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { toast } from \"sonner\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  SpeedDial,\n  SpeedDialAction,\n  SpeedDialContent,\n  SpeedDialItem,\n  SpeedDialLabel,\n  SpeedDialTrigger,\n} from \"@/registry/bases/radix/ui/speed-dial\";\n\nexport default function SpeedDialControlledDemo() {\n  const externalTriggerRef = React.useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <SpeedDial open={open} onOpenChange={setOpen}>\n        <SpeedDialTrigger className=\"transition-transform duration-200 ease-out data-[state=closed]:rotate-0 data-[state=open]:rotate-135\">\n          {open ? <X /> : <Plus />}\n        </SpeedDialTrigger>\n        <SpeedDialContent\n          onInteractOutside={(event) => {\n            // Prevent closing when clicking the external trigger\n            if (\n              externalTriggerRef.current?.contains(\n                event.detail.originalEvent.target as Node,\n              )\n            ) {\n              event.preventDefault();\n            }\n          }}\n        >\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      <Button\n        ref={externalTriggerRef}\n        variant=\"outline\"\n        onClick={() => setOpen(!open)}\n      >\n        Toggle\n      </Button>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}