{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dark-mode-toggle",
  "title": "Dark Mode Toggle",
  "description": "Compact sun and moon switch that persists theme preference and toggles the document dark class.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/navigation/DarkModeToggle.tsx",
      "content": "'use client';\n\nimport { useEffect, useState } from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\n\ntype DarkModeToggleProps = {\n  storageKey?: string;\n  applyToDocument?: boolean;\n  defaultDark?: boolean;\n  onChange?: (dark: boolean) => void;\n  className?: string;\n};\n\nfunction readStoredTheme(storageKey: string, fallback: boolean) {\n  if (typeof window === 'undefined') return fallback;\n  const stored = window.localStorage.getItem(storageKey);\n  if (stored === 'dark') return true;\n  if (stored === 'light') return false;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches;\n}\n\nexport default function DarkModeToggle({\n  storageKey = 'theme',\n  applyToDocument = true,\n  defaultDark = false,\n  onChange,\n  className = '',\n}: DarkModeToggleProps) {\n  const [dark, setDark] = useState(defaultDark);\n  const [ready, setReady] = useState(false);\n  const reduceMotion = useReducedMotion();\n\n  useEffect(() => {\n    setDark(readStoredTheme(storageKey, defaultDark));\n    setReady(true);\n  }, [defaultDark, storageKey]);\n\n  useEffect(() => {\n    if (!ready || !applyToDocument) return;\n    document.documentElement.classList.toggle('dark', dark);\n    window.localStorage.setItem(storageKey, dark ? 'dark' : 'light');\n  }, [applyToDocument, dark, ready, storageKey]);\n\n  function toggle() {\n    setDark((current) => {\n      const next = !current;\n      onChange?.(next);\n      return next;\n    });\n  }\n\n  return (\n    <button\n      type='button'\n      role='switch'\n      aria-checked={dark}\n      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}\n      onClick={toggle}\n      className={[\n        'relative inline-flex h-10 w-[72px] items-center rounded-full border p-1 transition-colors',\n        dark\n          ? 'border-zinc-700 bg-zinc-900'\n          : 'border-gray-200 bg-gray-100',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className='pointer-events-none absolute left-2.5 text-amber-400' aria-hidden>\n        <SunIcon />\n      </span>\n      <span className='pointer-events-none absolute right-2.5 text-indigo-300' aria-hidden>\n        <MoonIcon />\n      </span>\n      <motion.span\n        className='relative z-10 block h-8 w-8 rounded-full bg-white shadow-sm'\n        animate={{ x: dark ? 32 : 0 }}\n        transition={\n          reduceMotion\n            ? { duration: 0 }\n            : { type: 'spring', stiffness: 420, damping: 28 }\n        }\n      />\n    </button>\n  );\n}\n\nfunction SunIcon() {\n  return (\n    <svg viewBox='0 0 20 20' className='h-3.5 w-3.5' fill='none' aria-hidden>\n      <circle cx='10' cy='10' r='3.2' fill='currentColor' />\n      <path\n        stroke='currentColor'\n        strokeLinecap='round'\n        strokeWidth='1.6'\n        d='M10 2.2v1.6M10 16.2v1.6M2.2 10h1.6M16.2 10h1.6M4.5 4.5l1.1 1.1M14.4 14.4l1.1 1.1M15.5 4.5l-1.1 1.1M5.6 14.4l-1.1 1.1'\n      />\n    </svg>\n  );\n}\n\nfunction MoonIcon() {\n  return (\n    <svg viewBox='0 0 20 20' className='h-3.5 w-3.5' fill='currentColor' aria-hidden>\n      <path d='M16.4 11.6A6.4 6.4 0 0 1 8.4 3.6 6.6 6.6 0 1 0 16.4 11.6Z' />\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/navigation/DarkModeToggle.tsx"
    }
  ],
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}