{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "floating-action-button",
  "type": "registry:ui",
  "title": "Floating Action Button Cluster",
  "description": "Expandable speed-dial floating action cluster with staggered spring reveals.",
  "category": "buttons",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "button",
    "fab",
    "floating",
    "speed dial"
  ],
  "files": [
    {
      "path": "registry/buttons/floating-action-button/floating-action-button.tsx",
      "type": "registry:ui",
      "target": "components/ui/floating-action-button.tsx",
      "content": "import React, { useState } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { Plus, X, ShareNetwork, Terminal, Heart } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\nexport interface FloatingActionButtonProps {\n  label?: string\n  className?: string\n}\n\nexport const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({\n  className,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const actions = [\n    { label: 'Run Compiler', icon: <Terminal size={16} /> },\n    { label: 'Bookmark Symbol', icon: <Heart size={16} /> },\n    { label: 'Share Workspace', icon: <ShareNetwork size={16} /> },\n  ]\n\n  return (\n    <div className={cn('relative inline-flex flex-col items-center', className)}>\n      <AnimatePresence>\n        {isOpen && (\n          <div className=\"absolute bottom-16 flex flex-col gap-2 mb-2 items-center\">\n            {actions.map((act, i) => (\n              <motion.button\n                key={act.label}\n                initial={{ opacity: 0, y: 15, scale: 0.8 }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                exit={{ opacity: 0, y: 15, scale: 0.8 }}\n                transition={{ delay: i * 0.05, duration: 0.2 }}\n                onClick={() => setIsOpen(false)}\n                title={act.label}\n                className=\"flex items-center gap-2 rounded-full border border-white/15 bg-zinc-900/90 px-3.5 py-2 text-xs font-medium text-white shadow-xl backdrop-blur-md hover:bg-zinc-800 transition-colors whitespace-nowrap\"\n              >\n                <span>{act.icon}</span>\n                <span>{act.label}</span>\n              </motion.button>\n            ))}\n          </div>\n        )}\n      </AnimatePresence>\n\n      <motion.button\n        whileTap={{ scale: 0.92 }}\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"flex h-12 w-12 items-center justify-center rounded-full border border-white/20 bg-white text-zinc-950 shadow-2xl transition-transform hover:scale-105 focus:outline-none\"\n        aria-label=\"Toggle actions\"\n      >\n        <motion.div animate={{ rotate: isOpen ? 45 : 0 }} transition={{ duration: 0.2 }}>\n          <Plus size={22} weight=\"bold\" />\n        </motion.div>\n      </motion.button>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}