@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
104 lines (103 loc) • 2.87 kB
JavaScript
'use client';
import { jsx as f, jsxs as k } from "react/jsx-runtime";
import { ThemeProvider as p, Global as y, css as w } from "@emotion/react";
import { useState as x, useEffect as $ } from "react";
import { ThemeContext as v } from "./context.js";
import { createTheme as S } from "./theme.js";
const P = (r) => w`
// * {
// box-sizing: border-box;
// }
//
// html,
// body {
// margin: 0;
// padding: 0;
// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
// 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
// 'Helvetica Neue', sans-serif;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// background-color: ${r.colors.background.primary};
// color: ${r.colors.text.primary};
// font-size: ${r.fontSizes.base};
// line-height: ${r.lineHeights.normal};
// transition: background-color ${r.transitions.normal}, color ${r.transitions.normal};
// }
//
// button {
// font-family: inherit;
// }
//
// input,
// textarea,
// select {
// font-family: inherit;
// }
//
// * {
// border: 0 solid ${r.colors.border.primary};
// }
//
// /* Scrollbar styling for dark mode */
// ::-webkit-scrollbar {
// width: 8px;
// height: 8px;
// }
//
// ::-webkit-scrollbar-track {
// background: ${r.colors.background.secondary};
// }
//
// ::-webkit-scrollbar-thumb {
// background: ${r.colors.border.secondary};
// border-radius: 4px;
// }
//
// ::-webkit-scrollbar-thumb:hover {
// background: ${r.colors.border.tertiary};
// }
`, D = ({
children: r,
defaultMode: h = "light",
customTheme: a,
enableSystem: i = !0,
enableLocalStorage: e = !0,
storageKey: t = "heroui-theme"
}) => {
const [n, d] = x(() => {
if (e && typeof window < "u") {
const o = localStorage.getItem(t);
if (o === "light" || o === "dark")
return o;
}
return i && typeof window < "u" ? window.matchMedia(
"(prefers-color-scheme: dark)"
).matches ? "dark" : "light" : h;
}), l = (o) => {
d(o), e && typeof window < "u" && localStorage.setItem(t, o);
}, u = () => {
l(n === "light" ? "dark" : "light");
};
$(() => {
if (!i) return;
const o = window.matchMedia("(prefers-color-scheme: dark)"), m = (g) => {
(!e || !localStorage.getItem(t)) && d(g.matches ? "dark" : "light");
};
return o.addListener(m), () => o.removeListener(m);
}, [i, e, t]);
const c = S(n), s = a ? { ...c, ...a } : c, b = {
mode: n,
setMode: l,
toggleMode: u,
theme: s
};
return /* @__PURE__ */ f(v.Provider, { value: b, children: /* @__PURE__ */ k(p, { theme: s, children: [
/* @__PURE__ */ f(y, { styles: P(s) }),
r
] }) });
};
export {
D as ThemeProvider
};
//# sourceMappingURL=provider.js.map