{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invite-disclosure",
  "type": "registry:component",
  "title": "Invite Disclosure",
  "description": "A sleek, morphing disclosure component for managing invitations with interactive badge counts and spring animations.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/invite-disclosure.tsx",
      "type": "registry:component",
      "content": "import React, { useState, type ReactNode } from 'react';\nimport {\n  AnimatePresence,\n  motion,\n  MotionConfig,\n  type Transition,\n} from 'motion/react';\nimport { MdOutlineClose } from 'react-icons/md';\nimport { FaFolderClosed } from 'react-icons/fa6';\nimport { LuDraftingCompass } from 'react-icons/lu';\nimport { BiSolidZap } from 'react-icons/bi';\nimport { PiScrewdriverBold } from 'react-icons/pi';\n\nexport interface InviteItem {\n  id: string;\n  title: string;\n  description: string;\n  icon: ReactNode;\n  hasUpdate?: boolean;\n}\n\ninterface InviteDisclosureProps {\n  title?: string;\n  badgeCount?: number;\n  invites?: InviteItem[];\n}\n\nconst DEFAULT_INVITES: InviteItem[] = [\n  {\n    id: '1',\n    title: 'Sonora Repository',\n    description: 'Contribute to the code repository',\n    icon: <FaFolderClosed className=\"h-4 w-4 text-[#868686]\" />,\n    hasUpdate: true,\n  },\n  {\n    id: '2',\n    title: 'Design Tokens',\n    description: 'Collaborate on design tokens',\n    icon: <LuDraftingCompass className=\"h-5 w-5 text-[#868686]\" />,\n    hasUpdate: true,\n  },\n  {\n    id: '3',\n    title: 'Motion Kit',\n    description: 'Contribute to motion components',\n    icon: <BiSolidZap className=\"h-5 w-5 text-[#868686]\" />,\n  },\n  {\n    id: '4',\n    title: 'Build Tools',\n    description: 'Explore build tools & pipeline',\n    icon: <PiScrewdriverBold className=\"h-5 w-5 text-[#868686]\" />,\n  },\n];\n\nconst springTransition: Transition = {\n  type: 'spring',\n  stiffness: 800,\n  damping: 80,\n  mass: 5,\n};\n\nconst collapsedTransition: Transition = {\n  type: 'spring',\n  stiffness: 800,\n  damping: 80,\n  mass: 4,\n};\n\nexport const InviteDisclosure: React.FC<InviteDisclosureProps> = ({\n  title = 'Invites',\n  badgeCount = 2,\n  invites = DEFAULT_INVITES,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div className=\"flex h-[500px] w-fit items-center justify-center\">\n      <MotionConfig transition={isOpen ? springTransition : collapsedTransition}>\n        <AnimatePresence mode=\"popLayout\" initial={false}>\n          {!isOpen ? (\n            <motion.button\n              layoutId=\"disclosure\"\n              onClick={() => setIsOpen(true)}\n              style={{\n                borderRadius: 32,\n              }}\n              className=\"flex cursor-pointer items-center gap-3 bg-[#F4F4F4] px-6 py-4 transition-colors duration-200 hover:bg-[#eae8e8] dark:bg-neutral-900 dark:hover:bg-neutral-800\"\n            >\n              <motion.span\n                layoutId=\"title\"\n                className=\"text-xl font-semibold text-[#262626] dark:text-neutral-100\"\n              >\n                {title}\n              </motion.span>\n              <motion.div\n                layoutId=\"badge\"\n                className=\"flex h-7 w-7 items-center justify-center rounded-full bg-[#262626] text-[14px] font-bold text-white dark:bg-neutral-100 dark:text-neutral-900\"\n              >\n                {badgeCount}\n              </motion.div>\n            </motion.button>\n          ) : (\n            <motion.div\n              layoutId=\"disclosure\"\n              className=\"w-xs bg-[#F4F4F4] p-2 sm:w-[360px] dark:bg-neutral-900\"\n              style={{\n                borderRadius: 24,\n              }}\n            >\n              <div className=\"flex items-center justify-between px-6 pt-4 pb-6\">\n                <motion.h2\n                  layoutId=\"title\"\n                  className=\"text-2xl font-bold text-[#262626] dark:text-neutral-100\"\n                >\n                  {title}\n                </motion.h2>\n                <motion.button\n                  layoutId=\"badge\"\n                  title=\"close\"\n                  onClick={() => setIsOpen(false)}\n                  className=\"flex h-8 w-8 items-center justify-center rounded-full bg-[#fefefe] transition-colors duration-200 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700\"\n                >\n                  <MdOutlineClose className=\"h-5 w-5 text-[#676767] dark:text-neutral-400\" />\n                </motion.button>\n              </div>\n\n              <div className=\"space-y-3 px-2 pb-4\">\n                {invites.map((invite, index) => (\n                  <motion.div\n                    key={invite.id}\n                    initial={{ opacity: 0, y: 10 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    whileHover={{ scale: 1.02 }}\n                    transition={{\n                      delay: index * 0.04 + 0.1,\n                      type: 'spring',\n                      stiffness: 260,\n                      damping: 20,\n                    }}\n                    className=\"group flex cursor-pointer items-center gap-4 rounded-2xl bg-[#FEFEFE] px-3 py-3 transition-all hover:bg-[#FEFEFE]/70 hover:shadow-sm dark:bg-neutral-800 dark:hover:bg-neutral-800/70\"\n                  >\n                    <div className=\"relative\">\n                      <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-[#F5F5F5] dark:bg-neutral-700\">\n                        {invite.icon && React.isValidElement(invite.icon)\n                          ? React.cloneElement(\n                              invite.icon as React.ReactElement<any>,\n                              {\n                                className: `${(invite.icon as React.ReactElement<any>).props.className} dark:text-neutral-300`,\n                              },\n                            )\n                          : invite.icon}\n                      </div>\n                      {invite.hasUpdate && (\n                        <div className=\"absolute top-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-white bg-[#262626] dark:border-neutral-800 dark:bg-neutral-100\" />\n                      )}\n                    </div>\n\n                    <div className=\"flex-1\">\n                      <h3 className=\"text-[15px] leading-tight font-bold text-[#262626] dark:text-neutral-100\">\n                        {invite.title}\n                      </h3>\n                      <p className=\"text-sm font-medium text-[#9B9B9B] dark:text-neutral-500\">\n                        {invite.description}\n                      </p>\n                    </div>\n                  </motion.div>\n                ))}\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </MotionConfig>\n    </div>\n  );\n};\n"
    }
  ]
}