{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-switch",
  "title": "Theme Switch",
  "description": "Theme switch component with dark/light mode toggle. | ダーク/ライトモード切り替えコンポーネント。",
  "dependencies": [
    "next-themes",
    "motion"
  ],
  "files": [
    {
      "path": "components/button/theme-switch.tsx",
      "content": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nexport function ThemeSwitch({ className }: { className?: string }) {\n  const { setTheme, resolvedTheme } = useTheme();\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return <div className=\"size-8 rounded-lg bg-muted/50 backdrop-blur-sm\" />;\n  }\n\n  const isDark = resolvedTheme === \"dark\";\n  \n  const defaultClassNames =\n    \"relative size-8 rounded-lg bg-card/20 backdrop-blur-xs border border-border/50 shadow-sm overflow-hidden group cursor-pointer\";\n\n  return (\n    <motion.button\n      onClick={() => setTheme(isDark ? \"light\" : \"dark\")}\n      className={cn(defaultClassNames, className)}\n      aria-label={`Switch to ${isDark ? \"light\" : \"dark\"} mode`}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      transition={{ duration: 0.2 }}\n    >\n      {/* Sun icon */}\n      <motion.div\n        className=\"absolute inset-0 flex items-center justify-center\"\n        initial={false}\n        animate={{\n          scale: isDark ? 0.5 : 1,\n          opacity: isDark ? 0 : 1,\n          rotate: isDark ? 90 : 0,\n        }}\n        transition={{ duration: 0.3, ease: \"easeInOut\" }}\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-foreground\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"4\" />\n          <path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\" />\n        </svg>\n      </motion.div>\n\n      {/* Moon icon */}\n      <motion.div\n        className=\"absolute inset-0 flex items-center justify-center\"\n        initial={false}\n        animate={{\n          scale: isDark ? 1 : 0.5,\n          opacity: isDark ? 1 : 0,\n          rotate: isDark ? 0 : -90,\n        }}\n        transition={{ duration: 0.3, ease: \"easeInOut\" }}\n      >\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-foreground\"\n        >\n          <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n        </svg>\n      </motion.div>\n\n      {/* Hover ring */}\n      <div className=\"absolute inset-0 rounded-lg ring-1 ring-foreground/0 group-hover:ring-foreground/10 transition-all duration-300\" />\n    </motion.button>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}