@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
1 lines • 6.35 kB
Source Map (JSON)
{"version":3,"file":"provider.cjs","sources":["../../../src/theme/provider.tsx"],"sourcesContent":["import { ThemeProvider as EmotionThemeProvider } from \"@emotion/react\";\nimport { Global, css } from \"@emotion/react\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { ThemeContext } from \"./context\";\nimport { type Theme, type ThemeMode, createTheme } from \"./theme\";\n\nconst globalStyles = (theme: Theme) => css`\n // * {\n // box-sizing: border-box;\n // }\n //\n // html,\n // body {\n // margin: 0;\n // padding: 0;\n // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\n // 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n // 'Helvetica Neue', sans-serif;\n // -webkit-font-smoothing: antialiased;\n // -moz-osx-font-smoothing: grayscale;\n // background-color: ${theme.colors.background.primary};\n // color: ${theme.colors.text.primary};\n // font-size: ${theme.fontSizes.base};\n // line-height: ${theme.lineHeights.normal};\n // transition: background-color ${theme.transitions.normal}, color ${theme.transitions.normal};\n // }\n //\n // button {\n // font-family: inherit;\n // }\n //\n // input,\n // textarea,\n // select {\n // font-family: inherit;\n // }\n //\n // * {\n // border: 0 solid ${theme.colors.border.primary};\n // }\n //\n // /* Scrollbar styling for dark mode */\n // ::-webkit-scrollbar {\n // width: 8px;\n // height: 8px;\n // }\n //\n // ::-webkit-scrollbar-track {\n // background: ${theme.colors.background.secondary};\n // }\n //\n // ::-webkit-scrollbar-thumb {\n // background: ${theme.colors.border.secondary};\n // border-radius: 4px;\n // }\n //\n // ::-webkit-scrollbar-thumb:hover {\n // background: ${theme.colors.border.tertiary};\n // }\n`;\n\ninterface ThemeProviderProps {\n\tchildren: React.ReactNode;\n\tdefaultMode?: ThemeMode;\n\tcustomTheme?: Partial<Theme>;\n\tenableSystem?: boolean;\n\tenableLocalStorage?: boolean;\n\tstorageKey?: string;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n\tchildren,\n\tdefaultMode = \"light\",\n\tcustomTheme,\n\tenableSystem = true,\n\tenableLocalStorage = true,\n\tstorageKey = \"heroui-theme\",\n}) => {\n\tconst [mode, setModeState] = useState<ThemeMode>(() => {\n\t\t// Check localStorage first\n\t\tif (enableLocalStorage && typeof window !== \"undefined\") {\n\t\t\tconst stored = localStorage.getItem(storageKey) as ThemeMode;\n\t\t\tif (stored === \"light\" || stored === \"dark\") {\n\t\t\t\treturn stored;\n\t\t\t}\n\t\t}\n\n\t\t// Check system preference\n\t\tif (enableSystem && typeof window !== \"undefined\") {\n\t\t\tconst systemPrefersDark = window.matchMedia(\n\t\t\t\t\"(prefers-color-scheme: dark)\",\n\t\t\t).matches;\n\t\t\treturn systemPrefersDark ? \"dark\" : \"light\";\n\t\t}\n\n\t\treturn defaultMode;\n\t});\n\n\tconst setMode = (newMode: ThemeMode) => {\n\t\tsetModeState(newMode);\n\t\tif (enableLocalStorage && typeof window !== \"undefined\") {\n\t\t\tlocalStorage.setItem(storageKey, newMode);\n\t\t}\n\t};\n\n\tconst toggleMode = () => {\n\t\tsetMode(mode === \"light\" ? \"dark\" : \"light\");\n\t};\n\n\t// Listen to system theme changes\n\tuseEffect(() => {\n\t\tif (!enableSystem) return;\n\n\t\tconst mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\t\tconst handleChange = (e: MediaQueryListEvent) => {\n\t\t\t// Only follow system if no manual preference is stored\n\t\t\tif (!enableLocalStorage || !localStorage.getItem(storageKey)) {\n\t\t\t\tsetModeState(e.matches ? \"dark\" : \"light\");\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addListener(handleChange);\n\t\treturn () => mediaQuery.removeListener(handleChange);\n\t}, [enableSystem, enableLocalStorage, storageKey]);\n\n\tconst theme = createTheme(mode);\n\tconst mergedTheme = customTheme ? { ...theme, ...customTheme } : theme;\n\n\tconst contextValue = {\n\t\tmode,\n\t\tsetMode,\n\t\ttoggleMode,\n\t\ttheme: mergedTheme,\n\t};\n\n\treturn (\n\t\t<ThemeContext.Provider value={contextValue}>\n\t\t\t<EmotionThemeProvider theme={mergedTheme}>\n\t\t\t\t<Global styles={globalStyles(mergedTheme)} />\n\t\t\t\t{children}\n\t\t\t</EmotionThemeProvider>\n\t\t</ThemeContext.Provider>\n\t);\n};\n"],"names":["globalStyles","theme","css","ThemeProvider","children","defaultMode","customTheme","enableSystem","enableLocalStorage","storageKey","mode","setModeState","useState","stored","setMode","newMode","toggleMode","useEffect","mediaQuery","handleChange","e","createTheme","mergedTheme","contextValue","jsx","ThemeContext","jsxs","EmotionThemeProvider","Global"],"mappings":"wNAOMA,EAAgBC,GAAiBC,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAcZD,EAAM,OAAO,WAAW,OAAO;AAAA,gBAC1CA,EAAM,OAAO,KAAK,OAAO;AAAA,oBACrBA,EAAM,UAAU,IAAI;AAAA,sBAClBA,EAAM,YAAY,MAAM;AAAA,sCACRA,EAAM,YAAY,MAAM,WAAWA,EAAM,YAAY,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAcxEA,EAAM,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAU/BA,EAAM,OAAO,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA,qBAIjCA,EAAM,OAAO,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,qBAK7BA,EAAM,OAAO,OAAO,QAAQ;AAAA;AAAA,EAapCE,EAA8C,CAAC,CAC3D,SAAAC,EACA,YAAAC,EAAc,QACd,YAAAC,EACA,aAAAC,EAAe,GACf,mBAAAC,EAAqB,GACrB,WAAAC,EAAa,cACd,IAAM,CACL,KAAM,CAACC,EAAMC,CAAY,EAAIC,WAAoB,IAAM,CAElD,GAAAJ,GAAsB,OAAO,OAAW,IAAa,CAClD,MAAAK,EAAS,aAAa,QAAQJ,CAAU,EAC1C,GAAAI,IAAW,SAAWA,IAAW,OAC7B,OAAAA,CACR,CAIG,OAAAN,GAAgB,OAAO,OAAW,IACX,OAAO,WAChC,8BAAA,EACC,QACyB,OAAS,QAG9BF,CAAA,CACP,EAEKS,EAAWC,GAAuB,CACvCJ,EAAaI,CAAO,EAChBP,GAAsB,OAAO,OAAW,KAC9B,aAAA,QAAQC,EAAYM,CAAO,CAE1C,EAEMC,EAAa,IAAM,CAChBF,EAAAJ,IAAS,QAAU,OAAS,OAAO,CAC5C,EAGAO,EAAAA,UAAU,IAAM,CACf,GAAI,CAACV,EAAc,OAEb,MAAAW,EAAa,OAAO,WAAW,8BAA8B,EAC7DC,EAAgBC,GAA2B,EAE5C,CAACZ,GAAsB,CAAC,aAAa,QAAQC,CAAU,IAC7CE,EAAAS,EAAE,QAAU,OAAS,OAAO,CAE3C,EAEA,OAAAF,EAAW,YAAYC,CAAY,EAC5B,IAAMD,EAAW,eAAeC,CAAY,CACjD,EAAA,CAACZ,EAAcC,EAAoBC,CAAU,CAAC,EAE3C,MAAAR,EAAQoB,cAAYX,CAAI,EACxBY,EAAchB,EAAc,CAAE,GAAGL,EAAO,GAAGK,GAAgBL,EAE3DsB,EAAe,CACpB,KAAAb,EACA,QAAAI,EACA,WAAAE,EACA,MAAOM,CACR,EAGC,OAAAE,EAAA,IAACC,eAAa,SAAb,CAAsB,MAAOF,EAC7B,SAAAG,EAAAA,KAACC,EAAAA,cAAqB,CAAA,MAAOL,EAC5B,SAAA,CAAAE,EAAA,IAACI,EAAO,OAAA,CAAA,OAAQ5B,EAAasB,CAAW,CAAG,CAAA,EAC1ClB,CAAA,CAAA,CACF,CACD,CAAA,CAEF"}