{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-26",
  "type": "registry:component",
  "title": "Button 26",
  "description": "Button 26. An interactive element used to trigger actions, submissions, or navigation.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/button-26.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { FiSun, FiMoon } from 'react-icons/fi';\n\nimport { Button } from '@/components/base-ui/button';\n\nimport { cn } from '@/lib/utils';\n\nconst Button26 = () => {\n  const [isDark, setIsDark] = useState(false);\n\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"icon\"\n      onClick={() => setIsDark(!isDark)}\n      aria-label=\"Toggle dark mode\"\n      className={cn(\n        isDark\n          ? 'border-blue-600 text-blue-600! hover:bg-blue-600/10 focus-visible:border-blue-600 focus-visible:ring-blue-600/20 dark:border-blue-400 dark:text-blue-400! dark:hover:bg-blue-400/10 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/40'\n          : 'border-yellow-600 text-yellow-600! hover:bg-yellow-600/10 focus-visible:border-yellow-600 focus-visible:ring-yellow-600/20 dark:border-yellow-400 dark:text-yellow-400! dark:hover:bg-yellow-400/10 dark:focus-visible:border-yellow-400 dark:focus-visible:ring-yellow-400/40',\n      )}\n    >\n      {isDark ? <FiMoon className=\"size-5\" /> : <FiSun className=\"size-5\" />}\n    </Button>\n  );\n};\n\nexport default Button26;\n"
    }
  ]
}