{"version":3,"file":"switcher.cjs","sources":["../../../components/theme-provider/switcher.tsx"],"sourcesContent":["'use client';\n\nimport { MoonIcon, SunIcon } from '~/icons';\nimport { IconButton } from '../icon-button';\nimport { useTheme } from './theme';\n\nenum Theme {\n  DARK = 'dark',\n  LIGHT = 'light'\n}\n\ntype Props = { size?: number };\n\nexport function ThemeSwitcher({ size = 30, ...props }: Props) {\n  const { theme, setTheme } = useTheme();\n  const isDark = theme === Theme.DARK;\n\n  const onClickHandler = () => {\n    setTheme(isDark ? Theme.LIGHT : Theme.DARK);\n  };\n\n  return (\n    <IconButton\n      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}\n      onClick={onClickHandler}\n      style={{ width: size, height: size }}\n      data-slot='theme-switcher'\n      {...props}\n    >\n      {/* size drives the button box; IconButton's CSS sizes the icon to fill\n          the padded content area, so the icons don't set their own dimensions. */}\n      {isDark ? <SunIcon /> : <MoonIcon />}\n    </IconButton>\n  );\n}\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n"],"names":[],"mappings":";;;;;;;;;AAMA;AAAA;AACE;AACA;AACF;AAIM;;AAEJ;;AAGE;AACF;;AAeF;AAEA;;"}