{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-mode",
  "type": "registry:component",
  "title": "Switch Mode",
  "description": "A premium, animated theme toggle switch with smooth spring physics and sliding icon states.",
  "dependencies": [
    "motion",
    "next-themes",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/switch-mode.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { useEffect, useState, type FC } from \"react\";\nimport { motion } from \"motion/react\";\nimport { IoMoon, IoMoonOutline, IoSunny, IoSunnyOutline } from \"react-icons/io5\";\nimport { useTheme } from \"next-themes\";\n\n/* --- Props --- */\ninterface SwitchModeProps {\n    width?: number;\n    height?: number;\n    darkColor?: string;\n    lightColor?: string;\n    knobDarkColor?: string;\n    knobLightColor?: string;\n    borderDarkColor?: string;\n    borderLightColor?: string;\n}\n\nexport const SwitchMode: FC<SwitchModeProps> = ({\n    width = 144,\n    height = 72,\n    darkColor = \"#0B0B0B\",\n    lightColor = \"#FFFFFF\",\n    knobDarkColor = \"#2A2A2E\",\n    knobLightColor = \"#F3F2F7\",\n    borderDarkColor = \"#4C4C50\",\n    borderLightColor = \"#D8D6E0\",\n}) => {\n    const [mounted, setMounted] = useState(false);\n    const { resolvedTheme, setTheme } = useTheme();\n\n    useEffect(() => {\n        requestAnimationFrame(() => setMounted(true));\n    }, []);\n\n    if (!mounted) {\n        return <div style={{ width, height }} className=\"rounded-full border-2 border-transparent\" />;\n    }\n\n    const isDark = resolvedTheme === \"dark\";\n    const iconSize = height * 0.45;\n\n    return (\n        <motion.button\n            onClick={() => setTheme(isDark ? \"light\" : \"dark\")}\n            className=\"relative flex items-center rounded-full border-2 transition-colors\"\n            style={{\n                width,\n                height,\n                borderColor: isDark ? borderDarkColor : borderLightColor,\n            }}\n        >\n            {/* TRACK */}\n            <motion.div\n                className=\"absolute inset-0 rounded-full\"\n                animate={{ backgroundColor: isDark ? darkColor : lightColor }}\n                transition={{ duration: 0.4 }}\n            />\n\n            {/* SLIDING KNOB */}\n            <motion.div\n                layout\n                layoutId=\"switch-knob\"\n                transition={{ type: \"spring\", stiffness: 260, damping: 20 }}\n                className=\"absolute rounded-full border-2 z-30\"\n                style={{\n                    width: height,\n                    height,\n                    right: isDark ? -2 : undefined,\n                    left: isDark ? undefined : -2,\n                    backgroundColor: isDark ? knobDarkColor : knobLightColor,\n                    borderColor: isDark ? borderDarkColor : borderLightColor,\n                }}\n            />\n\n            {/* SUN */}\n            <motion.div\n                className=\"relative z-30 flex items-center justify-center\"\n                style={{ width: height, height }}\n                animate={{ rotate: isDark ? 45 : 0 }}\n                transition={{ stiffness: 20 }}\n            >\n                {isDark ? (\n                    <IoSunnyOutline\n                        color=\"#8A8A8F\"\n                        fill=\"#8A8A8F\"\n                        stroke=\"#8A8A8F\"\n                        style={{ width: iconSize, height: iconSize }}\n                        className=\"transition-colors duration-200\"\n                    />\n                ) : (\n                    <IoSunny\n                        color=\"#686771\"\n                        fill=\"#686771\"\n                        style={{ width: iconSize, height: iconSize }}\n                        className=\"transition-colors duration-200\"\n                    />\n                )}\n            </motion.div>\n\n            {/* MOON */}\n            <motion.div\n                className=\"relative z-30 flex items-center justify-center\"\n                style={{ width: height, height }}\n                animate={{ rotate: isDark ? 0 : 15 }}\n                transition={{ stiffness: 20, damping: 14 }}\n            >\n                {isDark ? (\n                    <IoMoon\n                        color=\"#F4F4FB\"\n                        fill=\"#F4F4FB\"\n                        style={{ width: iconSize, height: iconSize }}\n                        className=\"transition-colors duration-200\"\n                    />\n                ) : (\n                    <IoMoonOutline\n                        color=\"#ABABB4\"\n                        fill=\"#ABABB4\"\n                        stroke=\"#ABABB4\"\n                        style={{ width: iconSize, height: iconSize }}\n                        className=\"transition-colors duration-200\"\n                    />\n                )}\n            </motion.div>\n        </motion.button>\n    );\n};\n\n\n"
    }
  ]
}