{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-button",
  "type": "registry:component",
  "title": "Social Button",
  "description": "Share button that expands a row of channel actions (KokonutUI, MIT), bridged to contract tokens.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://design.subconscious.ai/r/utils.json",
    "button"
  ],
  "files": [
    {
      "path": "registry/components/social-button.tsx",
      "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 * Bridged to the Subconscious design contract: color → theme tokens, redundant\n * dark: variants dropped (tokens invert via data-mode). Motion preserved.\n */\n\nimport type { LucideIcon } from \"lucide-react\";\nimport { Instagram, Link, Linkedin, Twitter } from \"lucide-react\";\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/registry/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            \"transition-colors duration-200\",\n            className\n          )}\n          style={{\n            background: \"var(--backgroundColor)\",\n            color: \"var(--color)\",\n            border:\n              \"1px solid color-mix(in srgb, var(--color) 15%, transparent)\",\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              i === 0 && \"rounded-l-md\",\n              i === items.length - 1 && \"rounded-r-md\",\n              \"border-r last:border-r-0\",\n              \"outline-none\",\n              \"relative overflow-hidden\",\n              \"transition-colors duration-200\"\n            )}\n            key={`share-${button.label}`}\n            onClick={() => handleShare(i)}\n            style={{\n              background: \"var(--color)\",\n              color: \"var(--backgroundColor)\",\n              borderColor:\n                \"color-mix(in srgb, var(--backgroundColor) 15%, transparent)\",\n            }}\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\"\n              initial={{ opacity: 0 }}\n              style={{ background: \"var(--backgroundColor)\" }}\n              transition={{\n                duration: 0.2,\n                ease: \"easeInOut\",\n              }}\n            />\n          </motion.button>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n"
    }
  ]
}