{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-quick-actions",
  "type": "registry:ui",
  "title": "Avatar Quick Actions",
  "description": "An orbital action ring that blooms outward from the avatar with staggered spring emergence — hover any action and the rest dim, drawing the eye.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "registry/ruixenui/avatar-quick-actions.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { type ReactNode, useState } from \"react\";\n\n/* ═══════════════════════════════════════════════════════════\n   Orbital Bloom — actions live behind the avatar. Hover and\n   they spring outward radially with staggered timing, settling\n   into orbit positions. Focus any action and the rest dim,\n   drawing the eye. The avatar contracts to signal the release.\n   No tooltip, no portal — same spatial plane.\n   ═══════════════════════════════════════════════════════════ */\n\ninterface AvatarQuickActionsItem {\n  icon: ReactNode;\n  label: string;\n  onClick?: () => void;\n}\n\ninterface AvatarQuickActionsProps {\n  items: AvatarQuickActionsItem[];\n  avatarSrc?: string;\n  avatarFallback?: string;\n  size?: number;\n  className?: string;\n}\n\nexport default function AvatarQuickActions({\n  items,\n  avatarSrc,\n  avatarFallback,\n  size = 44,\n  className,\n}: AvatarQuickActionsProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIdx, setActiveIdx] = useState<number | null>(null);\n\n  const actionSize = Math.round(size * 0.7);\n  const orbit = Math.round(size * 0.95);\n  const container = orbit * 2 + actionSize;\n\n  const step = (2 * Math.PI) / items.length;\n  const start = -Math.PI / 2;\n\n  return (\n    <div\n      className={cn(\"relative\", className)}\n      style={{ width: container, height: container }}\n      onMouseLeave={() => {\n        setOpen(false);\n        setActiveIdx(null);\n      }}\n    >\n      {/* orbit ring */}\n      <motion.div\n        className=\"pointer-events-none absolute left-1/2 top-1/2 rounded-full border border-border/30\"\n        style={{\n          width: orbit * 2,\n          height: orbit * 2,\n          x: \"-50%\",\n          y: \"-50%\",\n        }}\n        animate={{\n          opacity: open ? 1 : 0,\n          scale: open ? 1 : 0.5,\n        }}\n        transition={{ type: \"spring\", stiffness: 300, damping: 25 }}\n      />\n\n      {/* avatar */}\n      <motion.div\n        className=\"absolute left-1/2 top-1/2 z-20 cursor-pointer\"\n        style={{ width: size, height: size, x: \"-50%\", y: \"-50%\" }}\n        animate={{ scale: open ? 0.92 : 1 }}\n        transition={{ type: \"spring\", stiffness: 420, damping: 22 }}\n        onMouseEnter={() => setOpen(true)}\n      >\n        <div className=\"size-full overflow-hidden rounded-full border-2 border-background shadow-sm\">\n          <Avatar className=\"size-full\">\n            {avatarSrc && (\n              <AvatarImage src={avatarSrc} alt={avatarFallback || \"\"} />\n            )}\n            <AvatarFallback className=\"text-sm font-medium\">\n              {avatarFallback?.[0]?.toUpperCase() || \"?\"}\n            </AvatarFallback>\n          </Avatar>\n        </div>\n      </motion.div>\n\n      {/* orbiting actions */}\n      {items.map((item, idx) => {\n        const angle = start + idx * step;\n        const tx = Math.cos(angle) * orbit;\n        const ty = Math.sin(angle) * orbit;\n        const active = activeIdx === idx;\n        const labelAbove = ty < 0;\n\n        return (\n          <motion.div\n            key={item.label}\n            className=\"absolute left-1/2 top-1/2\"\n            style={{\n              width: actionSize,\n              height: actionSize,\n              marginLeft: -actionSize / 2,\n              marginTop: -actionSize / 2,\n              zIndex: active ? 30 : 10,\n              pointerEvents: open ? \"auto\" : \"none\",\n            }}\n            animate={{\n              x: open ? tx : 0,\n              y: open ? ty : 0,\n              scale: open ? (active ? 1.15 : 1) : 0,\n              opacity: open ? (activeIdx !== null && !active ? 0.5 : 1) : 0,\n            }}\n            transition={{\n              x: {\n                type: \"spring\",\n                stiffness: 380,\n                damping: 22,\n                delay: open ? idx * 0.04 : 0,\n              },\n              y: {\n                type: \"spring\",\n                stiffness: 380,\n                damping: 22,\n                delay: open ? idx * 0.04 : 0,\n              },\n              scale: {\n                type: \"spring\",\n                stiffness: 420,\n                damping: 22,\n                delay: open ? idx * 0.04 : 0,\n              },\n              opacity: { duration: 0.15, delay: open ? idx * 0.04 : 0 },\n            }}\n            onMouseEnter={() => setActiveIdx(idx)}\n            onMouseLeave={() => setActiveIdx(null)}\n          >\n            <button\n              type=\"button\"\n              onClick={item.onClick}\n              className=\"flex size-full cursor-pointer items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:text-foreground\"\n            >\n              {item.icon}\n            </button>\n\n            <AnimatePresence>\n              {active && (\n                <motion.span\n                  initial={{ opacity: 0, y: labelAbove ? 3 : -3 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  exit={{ opacity: 0, y: labelAbove ? 3 : -3 }}\n                  transition={{ type: \"spring\", stiffness: 380, damping: 20 }}\n                  className=\"pointer-events-none absolute left-1/2 -translate-x-1/2 whitespace-nowrap text-[10px] font-medium text-muted-foreground\"\n                  style={\n                    labelAbove\n                      ? { bottom: \"100%\", paddingBottom: 4 }\n                      : { top: \"100%\", paddingTop: 4 }\n                  }\n                >\n                  {item.label}\n                </motion.span>\n              )}\n            </AnimatePresence>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/avatar-quick-actions.tsx"
    }
  ]
}