{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "theme-mode-toggle",
  "type": "registry:ui",
  "title": "Theme Mode Toggle",
  "description": "A theme mode toggle component that can be used to switch between light and dark modes.",
  "registryDependencies": [
    "@tra-kit/button"
  ],
  "files": [
    {
      "path": "registry/tra-kit/components/theme-mode-toggle.tsx",
      "content": "import { MoonIcon, SunIcon } from '@phosphor-icons/react';\r\nimport Button from '@/components/ui/button';\r\nimport { useTheme } from '@/contexts/theme/theme-provider';\r\n\r\ninterface IThemeModeToggle {\r\n  theme?: 'light' | 'dark';\r\n  setTheme?: (theme: 'light' | 'dark') => void;\r\n}\r\n\r\nconst ThemeModeToggle = ({ theme: themeProp, setTheme: setThemeProp }: IThemeModeToggle) => {\r\n  const themeContext = useTheme();\r\n  const theme = themeProp || themeContext.theme;\r\n  const setTheme = setThemeProp || themeContext.setTheme;\r\n  const toggleTheme = () => {\r\n    setTheme(theme === 'dark' ? 'light' : 'dark');\r\n  };\r\n\r\n  return (\r\n    <Button\r\n      variant=\"outlined\"\r\n      className=\"relative\"\r\n      disableEffect\r\n      size=\"icon\"\r\n      onClick={toggleTheme}\r\n    >\r\n      <MoonIcon className=\"size-[1.3rem] rotate-0 scale-100 transition-all duration-300 dark:-rotate-90 dark:scale-0\" />\r\n      <SunIcon className=\"absolute top-1/2 size-[1.2rem] -translate-y-1/2 rotate-90 scale-0 transition-all duration-300 dark:rotate-0 dark:scale-100\" />\r\n    </Button>\r\n  );\r\n};\r\n\r\nexport default ThemeModeToggle;\r\n",
      "type": "registry:ui"
    }
  ]
}