flowbite-react/dist/esm/components/DarkThemeToggle/DarkThemeToggle.mjs.map

Official React components built for Flowbite and Tailwind CSS

{"version":3,"file":"DarkThemeToggle.mjs","sources":["../../../../src/components/DarkThemeToggle/DarkThemeToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, FC } from \"react\";\nimport type { IconBaseProps } from \"react-icons\";\nimport { HiMoon, HiSun } from \"react-icons/hi\";\nimport { twMerge } from \"tailwind-merge\";\nimport { mergeDeep } from \"../../helpers/merge-deep\";\nimport { useIsMounted } from \"../../hooks/use-is-mounted\";\nimport { useThemeMode } from \"../../hooks/use-theme-mode\";\nimport { getTheme } from \"../../theme-store\";\nimport type { DeepPartial } from \"../../types\";\n\nexport interface FlowbiteDarkThemeToggleTheme {\n  root: FlowbiteDarkThemeToggleRootTheme;\n}\n\nexport interface FlowbiteDarkThemeToggleRootTheme {\n  base: string;\n  icon: string;\n}\n\nexport interface DarkThemeToggleProps extends ComponentProps<\"button\"> {\n  iconDark?: FC<IconBaseProps>;\n  iconLight?: FC<IconBaseProps>;\n  theme?: DeepPartial<FlowbiteDarkThemeToggleTheme>;\n}\n\nexport const DarkThemeToggle: FC<DarkThemeToggleProps> = ({\n  className,\n  theme: customTheme = {},\n  iconDark: IconDark = HiSun,\n  iconLight: IconLight = HiMoon,\n  ...props\n}) => {\n  const isMounted = useIsMounted();\n  const { computedMode, toggleMode } = useThemeMode();\n\n  const theme = mergeDeep(getTheme().darkThemeToggle, customTheme);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Toggle dark mode\"\n      data-testid=\"dark-theme-toggle\"\n      className={twMerge(theme.root.base, className)}\n      onClick={toggleMode}\n      {...props}\n    >\n      <IconDark\n        aria-label=\"Currently dark mode\"\n        data-active={isMounted && computedMode === \"dark\"}\n        className={twMerge(theme.root.icon, \"hidden dark:block\")}\n      />\n      <IconLight\n        aria-label=\"Currently light mode\"\n        data-active={isMounted && computedMode === \"light\"}\n        className={twMerge(theme.root.icon, \"dark:hidden\")}\n      />\n    </button>\n  );\n};\n\nDarkThemeToggle.displayName = \"DarkThemeToggle\";\n"],"names":[],"mappings":";;;;;;;;AASY,MAAC,eAAe,GAAG,CAAC;AAChC,EAAE,SAAS;AACX,EAAE,KAAK,EAAE,WAAW,GAAG,EAAE;AACzB,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK;AAC5B,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM;AAC/B,EAAE,GAAG,KAAK;AACV,CAAC,KAAK;AACN,EAAE,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;AACnC,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;AACtD,EAAE,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACnE,EAAE,uBAAuB,IAAI;AAC7B,IAAI,QAAQ;AACZ,IAAI;AACJ,MAAM,IAAI,EAAE,QAAQ;AACpB,MAAM,YAAY,EAAE,kBAAkB;AACtC,MAAM,aAAa,EAAE,mBAAmB;AACxC,MAAM,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;AACpD,MAAM,OAAO,EAAE,UAAU;AACzB,MAAM,GAAG,KAAK;AACd,MAAM,QAAQ,EAAE;AAChB,wBAAwB,GAAG;AAC3B,UAAU,QAAQ;AAClB,UAAU;AACV,YAAY,YAAY,EAAE,qBAAqB;AAC/C,YAAY,aAAa,EAAE,SAAS,IAAI,YAAY,KAAK,MAAM;AAC/D,YAAY,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,mBAAmB,CAAC;AACpE,WAAW;AACX,SAAS;AACT,wBAAwB,GAAG;AAC3B,UAAU,SAAS;AACnB,UAAU;AACV,YAAY,YAAY,EAAE,sBAAsB;AAChD,YAAY,aAAa,EAAE,SAAS,IAAI,YAAY,KAAK,OAAO;AAChE,YAAY,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC;AAC9D,WAAW;AACX,SAAS;AACT,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}