{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "family-button",
  "type": "registry:ui",
  "description": "Button component with family-style design and interactive hover effects",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/family-button.tsx",
      "content": "\"use client\"\n\nimport { FC, ReactNode, useState } from \"react\"\nimport { PlusIcon, XIcon } from \"lucide-react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst CONTAINER_SIZE = 200\n\ninterface FamilyButtonProps {\n  children: React.ReactNode\n}\n\nconst FamilyButton: React.FC<FamilyButtonProps> = ({ children }) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n  const toggleExpand = () => setIsExpanded(!isExpanded)\n\n  return (\n    <div\n      className={cn(\n        \"rounded-[24px] border border-black/10 shadow-sm dark:border-yellow-400/20\",\n        \"bg-gradient-to-b from-neutral-900 to-black\",\n        isExpanded\n          ? \"w-[204px] bg-gradient-to-b dark:from-stone-900 dark:to-neutral-900/80\"\n          : \"bg-gradient-to-b dark:from-neutral-900 dark:to-stone-950\"\n      )}\n    >\n      <div className=\"rounded-[23px] border border-black/10\">\n        <div className=\"rounded-[22px] border border-white/50 dark:border-stone-800\">\n          <div className=\"flex items-center justify-center rounded-[21px] border border-neutral-950/20\">\n            <FamilyButtonContainer\n              isExpanded={isExpanded}\n              toggleExpand={toggleExpand}\n            >\n              {isExpanded ? (\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{\n                    opacity: 1,\n                    transition: {\n                      delay: 0.3,\n                      duration: 0.4,\n                      ease: \"easeOut\",\n                    },\n                  }}\n                >\n                  {children}\n                </motion.div>\n              ) : null}\n            </FamilyButtonContainer>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// A container that wraps content and handles animations\ninterface FamilyButtonContainerProps {\n  isExpanded: boolean\n  toggleExpand: () => void\n  children: ReactNode\n}\n\nconst FamilyButtonContainer: FC<FamilyButtonContainerProps> = ({\n  isExpanded,\n  toggleExpand,\n  children,\n}) => {\n  return (\n    <motion.div\n      className={cn(\n        \"relative z-10 flex cursor-pointer flex-col items-center space-y-1 border border-white/10 text-white shadow-lg\",\n        !isExpanded\n          ? \"bg-gradient-to-b from-neutral-900 to-stone-900 dark:from-stone-700 dark:to-neutral-800/80\"\n          : \"\"\n      )}\n      layoutRoot\n      layout\n      initial={{ borderRadius: 21, width: \"4rem\", height: \"4rem\" }}\n      animate={\n        isExpanded\n          ? {\n              borderRadius: 20,\n              width: CONTAINER_SIZE,\n              height: CONTAINER_SIZE + 50,\n\n              transition: {\n                type: \"spring\",\n                damping: 25,\n                stiffness: 400,\n                when: \"beforeChildren\",\n              },\n            }\n          : {\n              borderRadius: 21,\n              width: \"4rem\",\n              height: \"4rem\",\n            }\n      }\n    >\n      {children}\n\n      <motion.div\n        className=\"absolute\"\n        initial={{ x: \"-50%\" }}\n        animate={{\n          x: isExpanded ? \"0%\" : \"-50%\",\n          transition: {\n            type: \"tween\",\n            ease: \"easeOut\",\n            duration: 0.3,\n          },\n        }}\n        style={{\n          left: isExpanded ? \"\" : \"50%\",\n          bottom: 6,\n        }}\n      >\n        {isExpanded ? (\n          <motion.div\n            className=\"group rounded-full border border-cyan-100/30 bg-neutral-800/50 p-[10px] text-orange-50 shadow-2xl transition-colors duration-300 hover:border-neutral-200 dark:bg-black/50\"\n            onClick={toggleExpand}\n            layoutId=\"expand-toggle\"\n            initial={false}\n            animate={{\n              rotate: -360,\n              transition: {\n                duration: 0.4,\n              },\n            }}\n          >\n            <XIcon\n              className={cn(\n                \"h-7 w-7 text-cyan-100/30 transition-colors duration-200 group-hover:text-neutral-500 dark:text-neutral-400/80\"\n              )}\n            />\n          </motion.div>\n        ) : (\n          <motion.div\n            className={cn(\n              \"group border border-cyan-100/10 bg-neutral-200 p-[10px] text-cyan-50 shadow-2xl transition-colors duration-200 dark:bg-cyan-500/90\"\n            )}\n            style={{ borderRadius: 24 }}\n            onClick={toggleExpand}\n            layoutId=\"expand-toggle\"\n            initial={{ rotate: 180 }}\n            animate={{\n              rotate: -180,\n              transition: {\n                duration: 0.4,\n              },\n            }}\n          >\n            <PlusIcon className=\"h-7 w-7 text-black dark:text-neutral-900\" />\n          </motion.div>\n        )}\n      </motion.div>\n    </motion.div>\n  )\n}\n\nexport { FamilyButton }\nexport default FamilyButton\n",
      "type": "registry:ui"
    }
  ]
}