{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "voice-chat-disclosure",
  "type": "registry:component",
  "title": "Voice Chat Disclosure",
  "description": "An interactive, expandable voice chat pill with avatar stacking and animated voice indicators.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/voice-chat-disclosure.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState, type ReactNode } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { IoChevronDown } from 'react-icons/io5';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Cancel01Icon } from '@hugeicons/core-free-icons';\n\nexport interface User {\n  id: number;\n  name: string;\n  img: string;\n  active?: boolean;\n}\n\ntype IconRenderer = (props?: any) => ReactNode;\n\ninterface VoiceChatDisclosureProps {\n  users?: User[];\n  title?: string;\n  ctaText?: string;\n  helperText?: string;\n  closeIcon?: IconRenderer;\n}\n\nconst DEFAULT_USERS: User[] = [\n  {\n    id: 1,\n    name: 'Oğuz',\n    img: 'https://i.pravatar.cc/150?u=oguz',\n    active: true,\n  },\n  { id: 2, name: 'Ashish', img: 'https://i.pravatar.cc/150?u=ashish' },\n  { id: 3, name: 'Mariana', img: 'https://i.pravatar.cc/150?u=mariana' },\n  { id: 4, name: 'MDS', img: 'https://i.pravatar.cc/150?u=mds' },\n  { id: 5, name: 'Ana', img: 'https://i.pravatar.cc/150?u=ana' },\n  {\n    id: 6,\n    name: 'Natko',\n    img: 'https://i.pravatar.cc/150?u=natko',\n    active: true,\n  },\n];\n\nexport const VoiceChatDisclosure: React.FC<VoiceChatDisclosureProps> = ({\n  users = DEFAULT_USERS,\n  title = 'Voice Chat',\n  ctaText = 'Join Now',\n  helperText = 'Mic will be muted initially.',\n  closeIcon = (props) => (\n    <HugeiconsIcon icon={Cancel01Icon} size={20} strokeWidth={2} {...props} />\n  ),\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const bars = [0, 1, 2, 3];\n\n  return (\n    <MotionConfig\n      transition={{ type: 'spring', bounce: 0, visualDuration: 0.32 }}\n    >\n      <motion.div layout className=\"relative\">\n        <AnimatePresence mode=\"popLayout\">\n          {!isOpen && (\n            <motion.div\n              layout=\"position\"\n              className=\"absolute -top-4 -left-4 z-20 flex h-10 w-10 items-center justify-center rounded-full bg-neutral-900 shadow-lg dark:bg-neutral-100\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n            >\n              <div className=\"flex items-center gap-[3px]\">\n                {bars.map((i) => (\n                  <motion.div\n                    key={i}\n                    className=\"w-[2.5px] rounded-full bg-white dark:bg-neutral-900\"\n                    initial={{ height: 6 }}\n                    animate={{ height: [2, 16, 6] }}\n                    transition={{\n                      duration: 1,\n                      repeat: Infinity,\n                      delay: i * 0.15,\n                    }}\n                  />\n                ))}\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        <motion.div\n          layout\n          onClick={() => !isOpen && setIsOpen(true)}\n          className=\"cursor-pointer overflow-hidden border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900\"\n          style={{\n            width: isOpen ? 'min(320px, calc(100vw - 32px))' : 280,\n            height: isOpen ? 'auto' : 90,\n            borderRadius: isOpen ? 32 : 44,\n          }}\n        >\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            {!isOpen ? (\n              <div className=\"flex h-[90px] items-center px-6\">\n                <div className=\"flex -space-x-3\">\n                  {users.slice(0, 4).map((user, idx) => (\n                    <motion.div\n                      key={user.id}\n                      layoutId={`avatar-${user.id}`}\n                      style={{ zIndex: 10 - idx }}\n                    >\n                      <motion.img\n                        layoutId={`avatar-img-${user.id}`}\n                        src={user.img}\n                        className=\"h-14 w-14 rounded-full border-4 border-white object-cover shadow-lg dark:border-neutral-900\"\n                      />\n                    </motion.div>\n                  ))}\n                </div>\n\n                <div className=\"ml-4 flex items-center gap-1 text-lg font-medium text-neutral-600 dark:text-neutral-400\">\n                  <span>+{users.length - 4}</span>\n                  <IoChevronDown />\n                </div>\n              </div>\n            ) : (\n              <motion.div layout className=\"flex flex-col\">\n                <div className=\"flex items-center justify-between border-b border-neutral-200 bg-neutral-100 px-4 py-3 sm:px-8 dark:border-neutral-700 dark:bg-neutral-800\">\n                  <div className=\"w-8\" />\n                  <h2 className=\"text-base font-semibold text-neutral-700 sm:text-lg dark:text-neutral-300 line-clamp-1\">\n                    {title}\n                  </h2>\n                  <button\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      setIsOpen(false);\n                    }}\n                    className=\"rounded-full bg-neutral-200 p-2 dark:bg-neutral-700\"\n                  >\n                    {closeIcon({\n                      className: 'text-neutral-600 size-4 sm:size-5 dark:text-neutral-300',\n                    })}\n                  </button>\n                </div>\n\n                <div className=\"grid grid-cols-4 gap-y-6 px-4 py-6 sm:gap-y-8 sm:px-6\">\n                  {users.map((user) => (\n                    <motion.div\n                      key={user.id}\n                      layoutId={`avatar-${user.id}`}\n                      className=\"relative flex flex-col items-center gap-2\"\n                    >\n                      <div className=\"relative\">\n                        <motion.img\n                          layoutId={`avatar-img-${user.id}`}\n                          src={user.img}\n                          className=\"h-11 w-11 rounded-full border border-neutral-200 object-cover shadow-md sm:h-[56px] sm:w-[56px] dark:border-neutral-700\"\n                        />\n\n                        {user.active && (\n                          <motion.div className=\"absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-white shadow-xl sm:-top-3 sm:-right-3 sm:h-8 sm:w-8 dark:bg-neutral-800\">\n                            <div className=\"flex items-center gap-[2px]\">\n                              {bars.map((i) => (\n                                <motion.div\n                                  key={i}\n                                  className=\"w-[1.5px] rounded-full bg-neutral-700 sm:w-[2px] dark:bg-neutral-300\"\n                                  animate={{ height: [2, 10, 6] }}\n                                  transition={{\n                                    duration: 1,\n                                    repeat: Infinity,\n                                    delay: i * 0.2,\n                                  }}\n                                />\n                              ))}\n                            </div>\n                          </motion.div>\n                        )}\n                      </div>\n\n                      <span className=\"text-[11px] font-semibold text-neutral-700 sm:text-sm dark:text-neutral-400 truncate w-full text-center px-1\">\n                        {user.name}\n                      </span>\n                    </motion.div>\n                  ))}\n                </div>\n\n                <div className=\"px-4 pb-6 sm:px-6\">\n                  <button className=\"w-full rounded-xl bg-neutral-900 py-2.5 text-base text-white transition active:scale-[0.98] sm:py-3 sm:text-lg dark:bg-neutral-100 dark:text-neutral-900\">\n                    {ctaText}\n                  </button>\n                  <p className=\"mt-3 text-center text-xs text-neutral-500 sm:mt-4 sm:text-sm dark:text-neutral-500\">\n                    {helperText}\n                  </p>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      </motion.div>\n    </MotionConfig>\n  );\n};\n"
    }
  ]
}