{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-disclosure",
  "type": "registry:component",
  "title": "Switch Disclosure",
  "description": "A premium interactive disclosure component that pairs a primary switch with nested behavioral sub-options.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/switch-disclosure.tsx",
      "type": "registry:component",
      "content": "import React, { useState } from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  type Transition,\n  MotionConfig,\n} from 'motion/react';\nimport { Check } from 'lucide-react';\nimport { RiBubbleChartFill } from 'react-icons/ri';\n\ninterface SwitchDisclosureProps {\n  title?: string;\n  subOptionLabel?: string;\n  defaultEnabled?: boolean;\n  defaultSubOptionChecked?: boolean;\n  onToggleChange?: (enabled: boolean) => void;\n  onSubOptionChange?: (checked: boolean) => void;\n}\n\nconst springConfig: Transition = {\n  type: 'spring',\n  stiffness: 800,\n  damping: 80,\n  mass: 5,\n};\nexport const SwitchDisclosure: React.FC<SwitchDisclosureProps> = ({\n  title = 'Predictive Completion',\n  subOptionLabel = 'Enable Inline Suggestions',\n  defaultEnabled = false,\n  defaultSubOptionChecked = false,\n  onToggleChange,\n  onSubOptionChange,\n}) => {\n  const [isEnabled, setIsEnabled] = useState(defaultEnabled);\n  const [isSubOptionChecked, setIsSubOptionChecked] = useState(\n    defaultSubOptionChecked,\n  );\n\n  const handleToggle = () => {\n    const next = !isEnabled;\n    setIsEnabled(next);\n    onToggleChange?.(next);\n  };\n\n  const handleSubOptionToggle = () => {\n    const next = !isSubOptionChecked;\n    setIsSubOptionChecked(next);\n    onSubOptionChange?.(next);\n  };\n\n  return (\n    <MotionConfig transition={springConfig}>\n      <motion.div\n        layout\n        initial={false}\n        className={`w-[340px] overflow-hidden rounded-[35px] bg-transparent p-[5px] transition-colors duration-300 will-change-transform  ${\n          isEnabled\n            ? 'border-[1.5px] border-[#EBEBF0] dark:border-neutral-800 dark:bg-neutral-900'\n            : 'border border-transparent shadow-none'\n        }`}\n        style={{\n          borderRadius: 32,\n        }}\n      >\n        <div className=\"flex flex-col\">\n          <motion.div\n            layout\n            className=\"dark:bg-nuetral-800 flex cursor-pointer items-center justify-between rounded-[35px] bg-[#F6F5FA]  dark:bg-neutral-800 p-3 shadow-sm\"\n            onClick={handleToggle}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div\n                className={`rounded-full p-2 text-[#ADACB8] transition-colors dark:text-neutral-500`}\n              >\n                <RiBubbleChartFill size={24} />\n              </div>\n              <span className=\"text-lg font-bold tracking-tight text-[#28272A] dark:text-neutral-100\">\n                {title}\n              </span>\n            </div>\n\n            <div\n              className={`relative h-7 w-12 rounded-full transition-colors duration-300 ${\n                isEnabled ? 'bg-[#EE2563]' : 'bg-gray-200 dark:bg-neutral-700'\n              }`}\n            >\n              <motion.div\n                transition={springConfig}\n                className=\"absolute top-1 left-1 h-5 w-5 rounded-full bg-white shadow-sm\"\n                animate={{ x: isEnabled ? 20 : 0 }}\n              />\n            </div>\n          </motion.div>\n\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            {isEnabled && (\n              <motion.div className=\"flex gap-4\" layout>\n                <motion.div\n                  initial={{ y: 10, opacity: 0, scale: 1.1 }}\n                  animate={{ y: 0, opacity: 1, scale: 1 }}\n                  className=\"group flex cursor-pointer items-center gap-3 p-4\"\n                  onClick={handleSubOptionToggle}\n                >\n                  <div\n                    className={`flex h-6 w-6 items-center justify-center rounded-lg border-2 transition-all ${\n                      isSubOptionChecked\n                        ? 'border-[#28272A] bg-[#28272A] dark:border-neutral-100 dark:bg-neutral-100'\n                        : 'border-[#EBEBF0] bg-white group-hover:border-gray-300 dark:border-neutral-800 dark:bg-neutral-950 dark:group-hover:border-neutral-700'\n                    }`}\n                  >\n                    <AnimatePresence>\n                      {isSubOptionChecked && (\n                        <motion.div\n                          initial={{\n                            scale: 1.2,\n                            opacity: 0,\n                            filter: 'blur(4px)',\n                          }}\n                          animate={{\n                            scale: 1,\n                            opacity: 1,\n                            filter: 'blur(0px)',\n                          }}\n                          exit={{ scale: 0.5, opacity: 0, filter: 'blur(4px)' }}\n                          whileTap={{ scale: 1.01 }}\n                        >\n                          <Check\n                            size={14}\n                            className=\"text-white dark:text-neutral-900\"\n                            strokeWidth={4}\n                          />\n                        </motion.div>\n                      )}\n                    </AnimatePresence>\n                  </div>\n\n                  <span className=\"text-[17px] font-semibold text-[#6C6B72] transition-colors group-hover:text-gray-800 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n                    {subOptionLabel}\n                  </span>\n                </motion.div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      </motion.div>\n    </MotionConfig>\n  );\n};\n"
    }
  ]
}