{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "create-new-disclosure",
  "type": "registry:component",
  "title": "Create New Disclosure",
  "description": "A stylish \"Create New\" disclosure component that expands from a pill-shaped button into a rich grid of actions.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/create-new-disclosure.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, type FC, type ReactNode } from 'react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n  Add01Icon,\n  Cancel01Icon,\n  Folder01Icon,\n  TaskEdit01Icon,\n  NoteIcon,\n  Award01Icon,\n  Flag02Icon,\n  Calendar04Icon,\n} from '@hugeicons/core-free-icons';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface DisclosureItem {\n  icon: ReactNode;\n  label: string;\n}\n\nexport interface CreateNewDisclosureProps {\n  items?: DisclosureItem[];\n  initialOpen?: boolean;\n}\n\ninterface GridItemProps {\n  icon: ReactNode;\n  label: string;\n}\n\nconst GridItem: FC<GridItemProps> = ({ icon, label }) => {\n  return (\n    <motion.button className=\"group flex flex-col items-center justify-center gap-1 sm:gap-1.5 rounded-[20px] sm:rounded-[24px] px-1 py-3 sm:py-4 transition-all duration-200 hover:bg-[#F4F2EA] dark:hover:bg-neutral-800/50\">\n      <div className=\"text-[#8B8B8B] transition-colors group-hover:text-[#4A4A4A] dark:text-neutral-500 dark:group-hover:text-neutral-300 [&>svg]:size-5 sm:[&>svg]:size-7\">\n        {icon}\n      </div>\n      <span className=\"text-[12px] sm:text-[14px] font-medium tracking-tight text-[#4A4A4A] dark:text-neutral-400\">\n        {label}\n      </span>\n    </motion.button>\n  );\n};\n\nexport const CreateNewDisclosure: FC<CreateNewDisclosureProps> = ({\n  items,\n  initialOpen = false,\n}) => {\n  const [open, setOpen] = useState<boolean>(initialOpen);\n\n  const defaultItems: DisclosureItem[] = [\n    {\n      icon: <HugeiconsIcon icon={Folder01Icon} strokeWidth={1.5} />,\n      label: 'Project',\n    },\n    {\n      icon: <HugeiconsIcon icon={TaskEdit01Icon} strokeWidth={1.5} />,\n      label: 'Task',\n    },\n    {\n      icon: <HugeiconsIcon icon={NoteIcon} strokeWidth={1.5} />,\n      label: 'Note',\n    },\n    {\n      icon: <HugeiconsIcon icon={Award01Icon} strokeWidth={1.5} />,\n      label: 'Goal',\n    },\n    {\n      icon: <HugeiconsIcon icon={Flag02Icon} strokeWidth={1.5} />,\n      label: 'Milestone',\n    },\n    {\n      icon: <HugeiconsIcon icon={Calendar04Icon} strokeWidth={1.5} />,\n      label: 'Reminder',\n    },\n  ];\n\n  const disclosureItems = items || defaultItems;\n\n  return (\n    <AnimatePresence mode=\"popLayout\" initial={false}>\n      {!open ? (\n        <motion.button\n          key=\"collapsed\"\n          layoutId=\"shared-container\"\n          onClick={() => setOpen(true)}\n          exit={{ opacity: 0, transition: { duration: 0.1 } }}\n          style={{\n            borderRadius: 32,\n          }}\n          transition={{ type: 'spring', bounce: 0.1, duration: 0.4 }}\n          className=\"flex cursor-pointer items-center gap-2 bg-[#FAFBF8] px-6 py-3.5 sm:px-8 sm:py-4 text-base sm:text-lg font-medium whitespace-nowrap text-[#626360] dark:bg-neutral-900 dark:text-neutral-400\"\n        >\n          <motion.div layoutId=\"label\" className=\"flex items-center gap-2\">\n            <HugeiconsIcon\n              icon={Add01Icon}\n              size={24}\n              className=\"text-[#626360] dark:text-neutral-400 sm:size-[26px]\"\n              strokeWidth={1.5}\n            />\n            Create New\n          </motion.div>\n        </motion.button>\n      ) : (\n        <motion.div\n          key=\"expanded\"\n          layoutId=\"shared-container\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{\n            opacity: 0,\n            transition: { duration: 0.1 },\n          }}\n          style={{\n            borderRadius: 22,\n          }}\n          transition={{ type: 'spring', bounce: 0.1, duration: 0.4 }}\n          className=\"h-full w-[calc(100vw-32px)] sm:w-sm bg-[#F7F5EE] p-1 dark:bg-neutral-900\"\n        >\n          <div className=\"flex items-center justify-between px-4 py-3.5\">\n            <motion.p\n              layoutId=\"label\"\n              className=\"text-[15px] sm:text-[16px] font-semibold text-[#5C5A56] dark:text-neutral-400\"\n            >\n              Create New\n            </motion.p>\n            <motion.button\n              onClick={() => setOpen(false)}\n              whileTap={{ scale: 0.95 }}\n              className=\"flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-[#B8B5B0] dark:bg-neutral-700\"\n            >\n              <HugeiconsIcon\n                icon={Cancel01Icon}\n                size={16}\n                color=\"#ffffff\"\n                strokeWidth={2.5}\n              />\n            </motion.button>\n          </div>\n\n          <div className=\"grid grid-cols-3 gap-1 rounded-t-[20px] rounded-b-[20px] bg-white p-3 sm:p-4 shadow-sm dark:bg-neutral-950\">\n            {disclosureItems.map((item, index) => (\n              <GridItem key={index} icon={item.icon} label={item.label} />\n            ))}\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n"
    }
  ]
}