flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
1 lines • 3.95 kB
Source Map (JSON)
{"version":3,"file":"DarkThemeToggle.cjs","sources":["../../../src/components/DarkThemeToggle/DarkThemeToggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ComponentProps, type FC } from \"react\";\nimport { get } from \"../../helpers/get\";\nimport { resolveProps } from \"../../helpers/resolve-props\";\nimport { useResolveTheme } from \"../../helpers/resolve-theme\";\nimport { twMerge } from \"../../helpers/tailwind-merge\";\nimport { useThemeMode } from \"../../hooks/use-theme-mode\";\nimport { MoonIcon } from \"../../icons/moon-icon\";\nimport { SunIcon } from \"../../icons/sun-icon\";\nimport { useThemeProvider } from \"../../theme/provider\";\nimport type { ThemingProps } from \"../../types\";\nimport { darkThemeToggleTheme } from \"./theme\";\n\nexport interface DarkThemeToggleTheme {\n root: DarkThemeToggleRootTheme;\n}\n\nexport interface DarkThemeToggleRootTheme {\n base: string;\n icon: {\n base: string;\n light: string;\n dark: string;\n };\n}\n\nexport interface DarkThemeToggleProps extends ComponentProps<\"button\">, ThemingProps<DarkThemeToggleTheme> {\n iconDark?: FC<ComponentProps<\"svg\">>;\n iconLight?: FC<ComponentProps<\"svg\">>;\n}\n\nexport const DarkThemeToggle = forwardRef<HTMLButtonElement, DarkThemeToggleProps>((props, ref) => {\n const provider = useThemeProvider();\n const theme = useResolveTheme(\n [darkThemeToggleTheme, provider.theme?.darkThemeToggle, props.theme],\n [get(provider.clearTheme, \"darkThemeToggle\"), props.clearTheme],\n [get(provider.applyTheme, \"darkThemeToggle\"), props.applyTheme],\n );\n\n const {\n className,\n iconDark: IconDark = SunIcon,\n iconLight: IconLight = MoonIcon,\n ...restProps\n } = resolveProps(props, provider.props?.darkThemeToggle);\n\n const { toggleMode } = useThemeMode();\n\n return (\n <button\n ref={ref}\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 {...restProps}\n >\n <IconDark aria-label=\"Currently dark mode\" className={twMerge(theme.root.icon.base, theme.root.icon.dark)} />\n <IconLight aria-label=\"Currently light mode\" className={twMerge(theme.root.icon.base, theme.root.icon.light)} />\n </button>\n );\n});\n\nDarkThemeToggle.displayName = \"DarkThemeToggle\";\n"],"names":["forwardRef","provider","useThemeProvider","theme","useResolveTheme","darkThemeToggleTheme","get","SunIcon","MoonIcon","resolveProps","useThemeMode","jsxs","twMerge","jsx"],"mappings":";;;;;;;;;;;;;;AAaY,MAAC,eAAe,GAAGA,gBAAU,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK;AAC1D,EAAE,MAAMC,UAAQ,GAAGC,yBAAgB,EAAE;AACrC,EAAE,MAAMC,OAAK,GAAGC,4BAAe;AAC/B,IAAI,CAACC,0BAAoB,EAAEJ,UAAQ,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC;AACxE,IAAI,CAACK,OAAG,CAACL,UAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;AACnE,IAAI,CAACK,OAAG,CAACL,UAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC,EAAE,KAAK,CAAC,UAAU;AAClE,GAAG;AACH,EAAE,MAAM;AACR,IAAI,SAAS;AACb,IAAI,QAAQ,EAAE,QAAQ,GAAGM,eAAO;AAChC,IAAI,SAAS,EAAE,SAAS,GAAGC,iBAAQ;AACnC,IAAI,GAAG;AACP,GAAG,GAAGC,yBAAY,CAAC,KAAK,EAAER,UAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;AAC1D,EAAE,MAAM,EAAE,UAAU,EAAE,GAAGS,yBAAY,EAAE;AACvC,EAAE,uBAAuBC,eAAI;AAC7B,IAAI,QAAQ;AACZ,IAAI;AACJ,MAAM,GAAG;AACT,MAAM,IAAI,EAAE,QAAQ;AACpB,MAAM,YAAY,EAAE,kBAAkB;AACtC,MAAM,aAAa,EAAE,mBAAmB;AACxC,MAAM,SAAS,EAAEC,qBAAO,CAACT,OAAK,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;AACpD,MAAM,OAAO,EAAE,UAAU;AACzB,MAAM,GAAG,SAAS;AAClB,MAAM,QAAQ,EAAE;AAChB,wBAAwBU,cAAG,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,qBAAqB,EAAE,SAAS,EAAED,qBAAO,CAACT,OAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAEA,OAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AAC9I,wBAAwBU,cAAG,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,sBAAsB,EAAE,SAAS,EAAED,qBAAO,CAACT,OAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAEA,OAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAChJ;AACA;AACA,GAAG;AACH,CAAC;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}