{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "family-button",
  "type": "registry:block",
  "title": "Family button",
  "description": "Family button",
  "files": [
    {
      "path": "components/usages/familybuttonusage.tsx",
      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\"\nimport useMeasure from \"react-use-measure\"\nimport FamilyButton from \"@/registry/open-source/family-button\"\n\n\nexport default function FamilyButtonDemo() {\n    return (\n        <div className=\" w-full h-full min-h-[240px]\">\n            <div className=\"absolute bottom-4 right-4 \">\n                <FamilyButton>\n                    <MusicPlayerExample />\n                </FamilyButton>\n            </div>\n        </div>\n    )\n}\n\nlet tabs = [\n    { id: 0, label: \"Apple\" },\n    { id: 1, label: \"Spotify\" },\n]\n\nexport function MusicPlayerExample() {\n    const [activeTab, setActiveTab] = useState(0)\n    const [direction, setDirection] = useState(0)\n    const [isAnimating, setIsAnimating] = useState(false)\n    const [ref, bounds] = useMeasure()\n\n    const content = useMemo(() => {\n        switch (activeTab) {\n            case 0:\n                return (\n                    <div className=\"flex items-center justify-center\">\n                        <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            xmlSpace=\"preserve\"\n                            viewBox=\"0 0 361 361\"\n                            width=\"5em\"\n                            height=\"5em\"\n                        >\n                            <linearGradient\n                                id=\"a\"\n                                x1={180}\n                                x2={180}\n                                y1={358.605}\n                                y2={7.759}\n                                gradientUnits=\"userSpaceOnUse\"\n                            >\n                                <stop\n                                    offset={0}\n                                    style={{\n                                        stopColor: \"#fa233b\",\n                                    }}\n                                />\n                                <stop\n                                    offset={1}\n                                    style={{\n                                        stopColor: \"#fb5c74\",\n                                    }}\n                                />\n                            </linearGradient>\n                            <path\n                                d=\"M360 112.61c0-4.3 0-8.6-.02-12.9-.02-3.62-.06-7.24-.16-10.86-.21-7.89-.68-15.84-2.08-23.64-1.42-7.92-3.75-15.29-7.41-22.49a75.633 75.633 0 0 0-33.06-33.05c-7.19-3.66-14.56-5.98-22.47-7.41C287 .86 279.04.39 271.15.18c-3.62-.1-7.24-.14-10.86-.16-4.3-.02-8.6-.02-12.9-.02H112.61c-4.3 0-8.6 0-12.9.02-3.62.02-7.24.06-10.86.16C80.96.4 73 .86 65.2 2.27c-7.92 1.42-15.28 3.75-22.47 7.41A75.633 75.633 0 0 0 9.67 42.73c-3.66 7.2-5.99 14.57-7.41 22.49C.86 73.02.39 80.98.18 88.86.08 92.48.04 96.1.02 99.72 0 104.01 0 108.31 0 112.61v134.77c0 4.3 0 8.6.02 12.9.02 3.62.06 7.24.16 10.86.21 7.89.68 15.84 2.08 23.64 1.42 7.92 3.75 15.29 7.41 22.49a75.633 75.633 0 0 0 33.06 33.05c7.19 3.66 14.56 5.98 22.47 7.41 7.8 1.4 15.76 1.87 23.65 2.08 3.62.1 7.24.14 10.86.16 4.3.03 8.6.02 12.9.02h134.77c4.3 0 8.6 0 12.9-.02 3.62-.02 7.24-.06 10.86-.16 7.89-.21 15.85-.68 23.65-2.08 7.92-1.42 15.28-3.75 22.47-7.41a75.633 75.633 0 0 0 33.06-33.05c3.66-7.2 5.99-14.57 7.41-22.49 1.4-7.8 1.87-15.76 2.08-23.64.1-3.62.14-7.24.16-10.86.03-4.3.02-8.6.02-12.9V112.61z\"\n                                style={{\n                                    fillRule: \"evenodd\",\n                                    clipRule: \"evenodd\",\n                                    fill: \"url(#a)\",\n                                }}\n                            />\n                            <path\n                                d=\"M254.5 55c-.87.08-8.6 1.45-9.53 1.64l-107 21.59-.04.01c-2.79.59-4.98 1.58-6.67 3-2.04 1.71-3.17 4.13-3.6 6.95-.09.6-.24 1.82-.24 3.62v133.92c0 3.13-.25 6.17-2.37 8.76s-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.28 14.54-7.46 22.38.7 6.69 3.71 13.09 8.88 17.82 3.49 3.2 7.85 5.63 12.99 6.66 5.33 1.07 11.01.7 19.31-.98 4.42-.89 8.56-2.28 12.5-4.61 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1.19-8.7 1.19-13.26V142.81c0-6.22 1.76-7.86 6.78-9.08 0 0 88.94-17.94 93.09-18.75 5.79-1.11 8.52.54 8.52 6.61v79.29c0 3.14-.03 6.32-2.17 8.92-2.12 2.59-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.49 14.54-7.67 22.38.7 6.69 3.92 13.09 9.09 17.82 3.49 3.2 7.85 5.56 12.99 6.6 5.33 1.07 11.01.69 19.31-.98 4.42-.89 8.56-2.22 12.5-4.55 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1-8.7 1-13.26V64.46c.02-6.16-3.23-9.96-9.02-9.46z\"\n                                style={{\n                                    fillRule: \"evenodd\",\n                                    clipRule: \"evenodd\",\n                                    fill: \"#fff\",\n                                }}\n                            />\n                        </svg>\n                    </div>\n                )\n            case 1:\n                return (\n                    <div className=\"flex items-center justify-center\">\n                        <svg\n                            viewBox=\"0 0 256 256\"\n                            width=\"5em\"\n                            height=\"5em\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            preserveAspectRatio=\"xMidYMid\"\n                        >\n                            <path\n                                d=\"M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128 70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007l.001-.006Zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007 7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276 3.76 2.308 4.952 7.215 2.644 10.975Zm15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289-34.406-21.148-86.853-27.273-127.548-14.92-5.278 1.594-10.852-1.38-12.454-6.649-1.59-5.278 1.386-10.842 6.655-12.446 46.485-14.106 104.275-7.273 143.787 17.007 4.692 2.89 6.175 9.034 3.286 13.72v-.001Zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405-3.362 5.69-10.73 7.565-16.4 4.187h-.006Z\"\n                                fill=\"#1ED760\"\n                            />\n                        </svg>\n                    </div>\n                )\n            default:\n                return null\n        }\n    }, [activeTab])\n\n    const handleTabClick = (newTabId: number) => {\n        if (newTabId !== activeTab && !isAnimating) {\n            const newDirection = newTabId > activeTab ? 1 : -1\n            setDirection(newDirection)\n            setActiveTab(newTabId)\n        }\n    }\n\n    const variants = {\n        initial: (direction: number) => ({\n            x: 300 * direction,\n            opacity: 0,\n            filter: \"blur(4px)\",\n        }),\n        active: {\n            x: 0,\n            opacity: 1,\n            filter: \"blur(0px)\",\n        },\n        exit: (direction: number) => ({\n            x: -300 * direction,\n            opacity: 0,\n            filter: \"blur(4px)\",\n        }),\n    }\n\n    return (\n        <div className=\"flex flex-col items-center pt-4 \">\n            <div className=\"flex space-x-1 border border-none rounded-[8px] cursor-pointer bg-neutral-700  px-[3px] py-[3.2px] shadow-inner-shadow\">\n                {tabs.map((tab, i) => (\n                    <button\n                        key={`${tab.id}-i-${i}`}\n                        onClick={() => handleTabClick(tab.id)}\n                        className={`${activeTab === tab.id ? \"text-white \" : \"hover:text-neutral-300/60\"\n                            } relative rounded-[5px] px-3 py-1.5 text-xs sm:text-sm font-medium text-neutral-600  transition focus-visible:outline-1 focus-visible:ring-1 focus-visible:ring-blue-light focus-visible:outline-hidden`}\n                        style={{ WebkitTapHighlightColor: \"transparent\" }}\n                    >\n                        {activeTab === tab.id && (\n                            <motion.span\n                                layoutId=\"family-bubble\"\n                                className=\"absolute inset-0 z-10 bg-neutral-800  mix-blend-difference shadow-inner-shadow\"\n                                style={{ borderRadius: 5 }}\n                                transition={{ type: \"spring\", bounce: 0.19, duration: 0.4 }}\n                            />\n                        )}\n                        {tab.label}\n                    </button>\n                ))}\n            </div>\n            <MotionConfig transition={{ duration: 0.4, type: \"spring\", bounce: 0.2 }}>\n                <motion.div\n                    className=\"relative mx-auto my-[10px] w-[60px] md:w-[150px] overflow-hidden\"\n                    initial={false}\n                    animate={{ height: bounds.height }}\n                >\n                    <div className=\"md:p-6 p-2\" ref={ref}>\n                        <AnimatePresence\n                            custom={direction}\n                            mode=\"popLayout\"\n                            onExitComplete={() => setIsAnimating(false)}\n                        >\n                            <motion.div\n                                key={activeTab}\n                                variants={variants}\n                                initial=\"initial\"\n                                animate=\"active\"\n                                exit=\"exit\"\n                                custom={direction}\n                                onAnimationStart={() => setIsAnimating(true)}\n                                onAnimationComplete={() => setIsAnimating(false)}\n                            >\n                                {content}\n                            </motion.div>\n                        </AnimatePresence>\n                    </div>\n                </motion.div>\n            </MotionConfig>\n        </div>\n    )\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/familybuttonusage.tsx",
      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\"\nimport useMeasure from \"react-use-measure\"\nimport FamilyButton from \"@/registry/open-source/family-button\"\n\n\nexport default function FamilyButtonDemo() {\n    return (\n        <div className=\" w-full h-full min-h-[240px]\">\n            <div className=\"absolute bottom-4 right-4 \">\n                <FamilyButton>\n                    <MusicPlayerExample />\n                </FamilyButton>\n            </div>\n        </div>\n    )\n}\n\nlet tabs = [\n    { id: 0, label: \"Apple\" },\n    { id: 1, label: \"Spotify\" },\n]\n\nexport function MusicPlayerExample() {\n    const [activeTab, setActiveTab] = useState(0)\n    const [direction, setDirection] = useState(0)\n    const [isAnimating, setIsAnimating] = useState(false)\n    const [ref, bounds] = useMeasure()\n\n    const content = useMemo(() => {\n        switch (activeTab) {\n            case 0:\n                return (\n                    <div className=\"flex items-center justify-center\">\n                        <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            xmlSpace=\"preserve\"\n                            viewBox=\"0 0 361 361\"\n                            width=\"5em\"\n                            height=\"5em\"\n                        >\n                            <linearGradient\n                                id=\"a\"\n                                x1={180}\n                                x2={180}\n                                y1={358.605}\n                                y2={7.759}\n                                gradientUnits=\"userSpaceOnUse\"\n                            >\n                                <stop\n                                    offset={0}\n                                    style={{\n                                        stopColor: \"#fa233b\",\n                                    }}\n                                />\n                                <stop\n                                    offset={1}\n                                    style={{\n                                        stopColor: \"#fb5c74\",\n                                    }}\n                                />\n                            </linearGradient>\n                            <path\n                                d=\"M360 112.61c0-4.3 0-8.6-.02-12.9-.02-3.62-.06-7.24-.16-10.86-.21-7.89-.68-15.84-2.08-23.64-1.42-7.92-3.75-15.29-7.41-22.49a75.633 75.633 0 0 0-33.06-33.05c-7.19-3.66-14.56-5.98-22.47-7.41C287 .86 279.04.39 271.15.18c-3.62-.1-7.24-.14-10.86-.16-4.3-.02-8.6-.02-12.9-.02H112.61c-4.3 0-8.6 0-12.9.02-3.62.02-7.24.06-10.86.16C80.96.4 73 .86 65.2 2.27c-7.92 1.42-15.28 3.75-22.47 7.41A75.633 75.633 0 0 0 9.67 42.73c-3.66 7.2-5.99 14.57-7.41 22.49C.86 73.02.39 80.98.18 88.86.08 92.48.04 96.1.02 99.72 0 104.01 0 108.31 0 112.61v134.77c0 4.3 0 8.6.02 12.9.02 3.62.06 7.24.16 10.86.21 7.89.68 15.84 2.08 23.64 1.42 7.92 3.75 15.29 7.41 22.49a75.633 75.633 0 0 0 33.06 33.05c7.19 3.66 14.56 5.98 22.47 7.41 7.8 1.4 15.76 1.87 23.65 2.08 3.62.1 7.24.14 10.86.16 4.3.03 8.6.02 12.9.02h134.77c4.3 0 8.6 0 12.9-.02 3.62-.02 7.24-.06 10.86-.16 7.89-.21 15.85-.68 23.65-2.08 7.92-1.42 15.28-3.75 22.47-7.41a75.633 75.633 0 0 0 33.06-33.05c3.66-7.2 5.99-14.57 7.41-22.49 1.4-7.8 1.87-15.76 2.08-23.64.1-3.62.14-7.24.16-10.86.03-4.3.02-8.6.02-12.9V112.61z\"\n                                style={{\n                                    fillRule: \"evenodd\",\n                                    clipRule: \"evenodd\",\n                                    fill: \"url(#a)\",\n                                }}\n                            />\n                            <path\n                                d=\"M254.5 55c-.87.08-8.6 1.45-9.53 1.64l-107 21.59-.04.01c-2.79.59-4.98 1.58-6.67 3-2.04 1.71-3.17 4.13-3.6 6.95-.09.6-.24 1.82-.24 3.62v133.92c0 3.13-.25 6.17-2.37 8.76s-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.28 14.54-7.46 22.38.7 6.69 3.71 13.09 8.88 17.82 3.49 3.2 7.85 5.63 12.99 6.66 5.33 1.07 11.01.7 19.31-.98 4.42-.89 8.56-2.28 12.5-4.61 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1.19-8.7 1.19-13.26V142.81c0-6.22 1.76-7.86 6.78-9.08 0 0 88.94-17.94 93.09-18.75 5.79-1.11 8.52.54 8.52 6.61v79.29c0 3.14-.03 6.32-2.17 8.92-2.12 2.59-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.49 14.54-7.67 22.38.7 6.69 3.92 13.09 9.09 17.82 3.49 3.2 7.85 5.56 12.99 6.6 5.33 1.07 11.01.69 19.31-.98 4.42-.89 8.56-2.22 12.5-4.55 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1-8.7 1-13.26V64.46c.02-6.16-3.23-9.96-9.02-9.46z\"\n                                style={{\n                                    fillRule: \"evenodd\",\n                                    clipRule: \"evenodd\",\n                                    fill: \"#fff\",\n                                }}\n                            />\n                        </svg>\n                    </div>\n                )\n            case 1:\n                return (\n                    <div className=\"flex items-center justify-center\">\n                        <svg\n                            viewBox=\"0 0 256 256\"\n                            width=\"5em\"\n                            height=\"5em\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            preserveAspectRatio=\"xMidYMid\"\n                        >\n                            <path\n                                d=\"M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128 70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007l.001-.006Zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007 7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276 3.76 2.308 4.952 7.215 2.644 10.975Zm15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289-34.406-21.148-86.853-27.273-127.548-14.92-5.278 1.594-10.852-1.38-12.454-6.649-1.59-5.278 1.386-10.842 6.655-12.446 46.485-14.106 104.275-7.273 143.787 17.007 4.692 2.89 6.175 9.034 3.286 13.72v-.001Zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405-3.362 5.69-10.73 7.565-16.4 4.187h-.006Z\"\n                                fill=\"#1ED760\"\n                            />\n                        </svg>\n                    </div>\n                )\n            default:\n                return null\n        }\n    }, [activeTab])\n\n    const handleTabClick = (newTabId: number) => {\n        if (newTabId !== activeTab && !isAnimating) {\n            const newDirection = newTabId > activeTab ? 1 : -1\n            setDirection(newDirection)\n            setActiveTab(newTabId)\n        }\n    }\n\n    const variants = {\n        initial: (direction: number) => ({\n            x: 300 * direction,\n            opacity: 0,\n            filter: \"blur(4px)\",\n        }),\n        active: {\n            x: 0,\n            opacity: 1,\n            filter: \"blur(0px)\",\n        },\n        exit: (direction: number) => ({\n            x: -300 * direction,\n            opacity: 0,\n            filter: \"blur(4px)\",\n        }),\n    }\n\n    return (\n        <div className=\"flex flex-col items-center pt-4 \">\n            <div className=\"flex space-x-1 border border-none rounded-[8px] cursor-pointer bg-neutral-700  px-[3px] py-[3.2px] shadow-inner-shadow\">\n                {tabs.map((tab, i) => (\n                    <button\n                        key={`${tab.id}-i-${i}`}\n                        onClick={() => handleTabClick(tab.id)}\n                        className={`${activeTab === tab.id ? \"text-white \" : \"hover:text-neutral-300/60\"\n                            } relative rounded-[5px] px-3 py-1.5 text-xs sm:text-sm font-medium text-neutral-600  transition focus-visible:outline-1 focus-visible:ring-1 focus-visible:ring-blue-light focus-visible:outline-hidden`}\n                        style={{ WebkitTapHighlightColor: \"transparent\" }}\n                    >\n                        {activeTab === tab.id && (\n                            <motion.span\n                                layoutId=\"family-bubble\"\n                                className=\"absolute inset-0 z-10 bg-neutral-800  mix-blend-difference shadow-inner-shadow\"\n                                style={{ borderRadius: 5 }}\n                                transition={{ type: \"spring\", bounce: 0.19, duration: 0.4 }}\n                            />\n                        )}\n                        {tab.label}\n                    </button>\n                ))}\n            </div>\n            <MotionConfig transition={{ duration: 0.4, type: \"spring\", bounce: 0.2 }}>\n                <motion.div\n                    className=\"relative mx-auto my-[10px] w-[60px] md:w-[150px] overflow-hidden\"\n                    initial={false}\n                    animate={{ height: bounds.height }}\n                >\n                    <div className=\"md:p-6 p-2\" ref={ref}>\n                        <AnimatePresence\n                            custom={direction}\n                            mode=\"popLayout\"\n                            onExitComplete={() => setIsAnimating(false)}\n                        >\n                            <motion.div\n                                key={activeTab}\n                                variants={variants}\n                                initial=\"initial\"\n                                animate=\"active\"\n                                exit=\"exit\"\n                                custom={direction}\n                                onAnimationStart={() => setIsAnimating(true)}\n                                onAnimationComplete={() => setIsAnimating(false)}\n                            >\n                                {content}\n                            </motion.div>\n                        </AnimatePresence>\n                    </div>\n                </motion.div>\n            </MotionConfig>\n        </div>\n    )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/family-button.tsx",
      "content": "\"use client\"\n\nimport { FC, ReactNode, useState } from \"react\"\nimport { PlusIcon, XIcon } from \"lucide-react\"\nimport { motion } from \"motion/react\"\nimport { cn } from \"@/registry/utilities/cn\"\n\n// Credit:\n// https://www.cult-ui.com/docs/components/family-button\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-xs dark:border-yellow-400/20\",\n                \"bg-linear-to-b  from-neutral-900 to-black\",\n                isExpanded\n                    ? \"w-[204px] bg-linear-to-b dark:from-stone-900 dark:to-neutral-900/80\"\n                    : \"dark:from-neutral-900 dark:to-stone-950 bg-linear-to-b\"\n            )}\n        >\n            <div className=\"rounded-[23px] border   border-black/10 \">\n                <div className=\"rounded-[22px] border  dark:border-stone-800 border-white/50 \">\n                    <div className=\"rounded-[21px] border    border-neutral-950/20   flex items-center justify-center \">\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   border-white/10 border shadow-lg flex flex-col space-y-1  items-center  text-white  cursor-pointer z-10\",\n                !isExpanded\n                    ? \"bg-linear-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=\"p-[10px] group bg-neutral-800/50 dark:bg-black/50 border border-cyan-100/30 hover:border-neutral-200 text-orange-50 rounded-full shadow-2xl transition-colors duration-300 \"\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 dark:text-neutral-400/80 group-hover:text-neutral-500 transition-colors duration-200 \"\n                            )}\n                        />\n                    </motion.div>\n                ) : (\n                    <motion.div\n                        className={cn(\n                            \"p-[10px] group bg-neutral-200 dark:bg-cyan-500/90 text-cyan-50 border border-cyan-100/10  shadow-2xl transition-colors duration-200\"\n                        )}\n                        style={{ borderRadius: 24 }}\n                        onClick={toggleExpand}\n                        layoutId=\"expand-toggle\"\n                        initial={{ rotate: 180 }}\n                        animate={{\n                            rotate: -360,\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 default FamilyButton;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}