{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-mode-base",
  "type": "registry:component",
  "title": "Switch Mode (base)",
  "description": "Theme-ready base variant of 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 {\n  IoMoon,\n  IoMoonOutline,\n  IoSunny,\n  IoSunnyOutline,\n} from 'react-icons/io5';\nimport { useTheme } from 'next-themes';\n\ninterface SwitchModeProps {\n  width?: number;\n  height?: number;\n}\n\nexport const SwitchMode: FC<SwitchModeProps> = ({\n  width = 144,\n  height = 72,\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 (\n      <div\n        style={{ width, height }}\n        className=\"theme-injected border-border rounded-lg border-2\"\n      />\n    );\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=\"theme-injected border-border bg-background relative flex items-center rounded-lg border-2 transition-colors\"\n      style={{ width, height }}\n    >\n      {/* TRACK */}\n      <motion.div\n        className=\"bg-background absolute inset-0 rounded-lg\"\n        transition={{ duration: 0.4 }}\n      />\n\n      {/* KNOB */}\n      <motion.div\n        layout\n        layoutId=\"switch-knob\"\n        transition={{ type: 'spring', stiffness: 260, damping: 20 }}\n        className=\"border-border bg-muted shadow-xs absolute z-30 rounded-lg border-2\"\n        style={{\n          width: height,\n          height,\n          right: isDark ? -2 : undefined,\n          left: isDark ? undefined : -2,\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            className=\"text-muted-foreground transition-colors duration-200\"\n            style={{ width: iconSize, height: iconSize }}\n          />\n        ) : (\n          <IoSunny\n            className=\"text-foreground transition-colors duration-200\"\n            style={{ width: iconSize, height: iconSize }}\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            className=\"text-foreground transition-colors duration-200\"\n            style={{ width: iconSize, height: iconSize }}\n          />\n        ) : (\n          <IoMoonOutline\n            className=\"text-muted-foreground transition-colors duration-200\"\n            style={{ width: iconSize, height: iconSize }}\n          />\n        )}\n      </motion.div>\n    </motion.button>\n  );\n};\n"
    }
  ]
}