{
  "name": "social-button",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Social Button\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport type { LucideIcon } from \"lucide-react\";\nimport { Instagram, Link, Linkedin, Twitter } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ShareItem {\n  icon: LucideIcon;\n  label: string;\n}\n\ninterface SocialButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n  items?: ShareItem[];\n  onShare?: (index: number, item: ShareItem) => void;\n  className?: string;\n}\n\nconst DEFAULT_SHARE_ITEMS: ShareItem[] = [\n  { icon: Twitter, label: \"Share on Twitter\" },\n  { icon: Instagram, label: \"Share on Instagram\" },\n  { icon: Linkedin, label: \"Share on LinkedIn\" },\n  { icon: Link, label: \"Copy link\" },\n];\n\nexport default function SocialButton({\n  label = \"Share\",\n  items = DEFAULT_SHARE_ITEMS,\n  onShare,\n  className,\n  ...props\n}: SocialButtonProps) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const handleShare = (index: number) => {\n    setActiveIndex(index);\n    onShare?.(index, items[index]);\n    setTimeout(() => setActiveIndex(null), 300);\n  };\n\n  return (\n    <div\n      className=\"relative\"\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n    >\n      <motion.div\n        animate={{\n          opacity: isVisible ? 0 : 1,\n        }}\n        transition={{\n          duration: 0.2,\n          ease: \"easeInOut\",\n        }}\n      >\n        <Button\n          className={cn(\n            \"relative min-w-40\",\n            \"bg-white dark:bg-black\",\n            \"hover:bg-gray-50 dark:hover:bg-gray-950\",\n            \"text-black dark:text-white\",\n            \"border border-black/10 dark:border-white/10\",\n            \"transition-colors duration-200\",\n            className\n          )}\n          {...props}\n        >\n          <span className=\"flex items-center gap-2\">\n            <Link className=\"h-4 w-4\" />\n            {label}\n          </span>\n        </Button>\n      </motion.div>\n\n      <motion.div\n        animate={{\n          width: isVisible ? \"auto\" : 0,\n        }}\n        className=\"absolute top-0 left-0 flex h-10 overflow-hidden\"\n        transition={{\n          duration: 0.3,\n          ease: [0.23, 1, 0.32, 1],\n        }}\n      >\n        {items.map((button, i) => (\n          <motion.button\n            animate={{\n              opacity: isVisible ? 1 : 0,\n              x: isVisible ? 0 : -20,\n            }}\n            aria-label={button.label}\n            className={cn(\n              \"h-10\",\n              \"w-10\",\n              \"flex items-center justify-center\",\n              \"bg-black dark:bg-white\",\n              \"text-white dark:text-black\",\n              i === 0 && \"rounded-l-md\",\n              i === items.length - 1 && \"rounded-r-md\",\n              \"border-white/10 border-r last:border-r-0 dark:border-black/10\",\n              \"hover:bg-gray-900 dark:hover:bg-gray-100\",\n              \"outline-none\",\n              \"relative overflow-hidden\",\n              \"transition-colors duration-200\"\n            )}\n            key={`share-${button.label}`}\n            onClick={() => handleShare(i)}\n            transition={{\n              duration: 0.3,\n              ease: [0.23, 1, 0.32, 1],\n              delay: isVisible ? i * 0.05 : 0,\n            }}\n            type=\"button\"\n          >\n            <motion.div\n              animate={{\n                scale: activeIndex === i ? 0.85 : 1,\n              }}\n              className=\"relative z-10\"\n              transition={{\n                duration: 0.2,\n                ease: \"easeInOut\",\n              }}\n            >\n              <button.icon className=\"h-4 w-4\" />\n            </motion.div>\n            <motion.div\n              animate={{\n                opacity: activeIndex === i ? 0.15 : 0,\n              }}\n              className=\"absolute inset-0 bg-white dark:bg-black\"\n              initial={{ opacity: 0 }}\n              transition={{\n                duration: 0.2,\n                ease: \"easeInOut\",\n              }}\n            />\n          </motion.button>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n",
      "path": "/components/kokonutui/social-button.tsx",
      "target": "components/kokonutui/social-button.tsx"
    }
  ]
}