{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fancy-theme-toggle",
  "title": "Fancy Theme Toggle",
  "description": "Theme Toggle from the classic Designer vs Developer meme.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/fancy-theme-toggle.tsx",
      "content": "\"use client\";\n\nimport { useCallback } from \"react\";\n\nimport { useTheme } from \"next-themes\";\n\nimport { CloudIcon, SparkleIcon } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nexport const ThemeToggle = () => {\n  const { setTheme, resolvedTheme } = useTheme();\n\n  const toggleTheme = useCallback(() => {\n    setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n  }, [resolvedTheme, setTheme]);\n\n  return (\n    <button\n      onClick={toggleTheme}\n      role=\"switch\"\n      className=\"relative flex w-20 justify-start overflow-hidden rounded-full bg-linear-to-b from-blue-500 to-blue-300 p-1.5 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_-2px_3px_rgba(0,0,0,0.1)] dark:justify-end dark:from-neutral-900 dark:to-neutral-800\"\n    >\n      <Thumb />\n\n      {resolvedTheme === \"dark\" ? <Stars /> : <Clouds />}\n    </button>\n  );\n};\n\nconst Thumb = () => {\n  return (\n    <motion.div\n      layout\n      transition={{\n        type: \"spring\",\n        stiffness: 420,\n        damping: 32,\n        mass: 0.6,\n      }}\n      className=\"relative size-7 rounded-full bg-linear-to-br from-yellow-300 to-yellow-400 shadow-[inset_1px_1px_2px_0px_rgba(255,255,255),0px_3px_9px_4px_rgba(0,0,0,0.141)] dark:from-gray-200 dark:to-gray-300 dark:after:absolute dark:after:bottom-1.5 dark:after:left-1 dark:after:size-3 dark:after:rounded-full dark:after:bg-gray-400 dark:after:shadow-[6px_-10px_0_-3.5px_var(--color-gray-400),10px_4px_0_-3px_var(--color-gray-400)] dark:after:content-['']\"\n    />\n  );\n};\n\nconst Stars = () => {\n  return (\n    <motion.div\n      initial={{ y: \"-100%\" }}\n      animate={{ y: 0 }}\n      transition={{\n        duration: 0.2,\n        ease: \"easeOut\",\n      }}\n      className=\"absolute inset-0\"\n    >\n      <SparkleIcon className=\"absolute top-2 left-2 size-2 fill-gray-400 stroke-0\" />\n      <SparkleIcon className=\"absolute top-4 left-5 size-2.5 fill-gray-400 stroke-0\" />\n      <SparkleIcon className=\"absolute top-2 left-10 size-1 fill-gray-400 stroke-0\" />\n      <SparkleIcon className=\"absolute top-1 left-7 size-1 fill-gray-400 stroke-0\" />\n      <SparkleIcon className=\"absolute bottom-2 left-2 size-1 fill-gray-400 stroke-0\" />\n      <SparkleIcon className=\"absolute bottom-2 left-8 size-1 fill-gray-400 stroke-0\" />\n      <SparkleIcon className=\"absolute bottom-1 left-5 size-1.5 fill-gray-400 stroke-0\" />\n    </motion.div>\n  );\n};\n\nconst Clouds = () => {\n  return (\n    <motion.div\n      initial={{ y: \"100%\" }}\n      animate={{ y: 0 }}\n      transition={{\n        duration: 0.2,\n        ease: \"easeOut\",\n      }}\n      className=\"absolute inset-0\"\n    >\n      <CloudIcon className=\"absolute top-2 right-2 size-2 fill-white stroke-0\" />\n      <CloudIcon className=\"absolute top-4 right-5 size-2.5 fill-white stroke-0\" />\n      <CloudIcon className=\"absolute top-2 left-10 size-1.5 fill-white stroke-0\" />\n      <CloudIcon className=\"absolute right-2 bottom-1 size-1.5 fill-white stroke-0\" />\n      <CloudIcon className=\"absolute bottom-1 left-8 size-1.5 fill-white stroke-0\" />\n      <CloudIcon className=\"absolute bottom-2 left-11 size-1.5 fill-white stroke-0\" />\n    </motion.div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}