{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-disclosure-base",
  "type": "registry:component",
  "title": "Switch Disclosure (base)",
  "description": "Theme-ready base variant of 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        style={{ fontFamily: 'var(--font-sans)' }}\n        className={`theme-injected w-80 sm:w-96 overflow-hidden rounded-3xl p-1 transition-colors duration-300 will-change-transform ${\n          isEnabled\n            ? 'border border-border bg-card text-card-foreground shadow-sm'\n            : 'border border-transparent bg-transparent text-foreground shadow-none'\n        }`}\n      >\n        <div className=\"flex flex-col\">\n          <motion.div\n            layout\n            className=\"flex cursor-pointer items-center justify-between rounded-3xl border border-border bg-muted/40 p-3 shadow-xs\"\n            onClick={handleToggle}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"rounded-full p-2 text-muted-foreground transition-colors\">\n                <RiBubbleChartFill size={24} />\n              </div>\n              <span className=\"text-lg font-bold tracking-tight text-foreground\">\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-primary' : 'bg-muted'\n              }`}\n            >\n              <motion.div\n                transition={springConfig}\n                className=\"absolute top-1 left-1 h-5 w-5 rounded-full bg-background 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-foreground bg-foreground'\n                        : 'border-border bg-background group-hover:border-ring/40'\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-background\"\n                            strokeWidth={4}\n                          />\n                        </motion.div>\n                      )}\n                    </AnimatePresence>\n                  </div>\n\n                  <span className=\"text-base sm:text-lg font-semibold text-muted-foreground transition-colors group-hover:text-foreground\">\n                    {subOptionLabel}\n                  </span>\n                </motion.div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      </motion.div>\n    </MotionConfig>\n  );\n};\n"
    }
  ]
}