@raystack/apsara 0.22.0 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/checkbox/checkbox.cjs +3 -0
- package/dist/checkbox/checkbox.cjs.map +1 -1
- package/dist/checkbox/checkbox.d.ts +3 -0
- package/dist/checkbox/checkbox.d.ts.map +1 -1
- package/dist/checkbox/checkbox.js +3 -0
- package/dist/checkbox/checkbox.js.map +1 -1
- package/dist/emptystate/emptystate.cjs +3 -0
- package/dist/emptystate/emptystate.cjs.map +1 -1
- package/dist/emptystate/emptystate.d.ts +3 -0
- package/dist/emptystate/emptystate.d.ts.map +1 -1
- package/dist/emptystate/emptystate.js +3 -0
- package/dist/emptystate/emptystate.js.map +1 -1
- package/dist/flex/flex.cjs +3 -0
- package/dist/flex/flex.cjs.map +1 -1
- package/dist/flex/flex.d.ts +3 -0
- package/dist/flex/flex.d.ts.map +1 -1
- package/dist/flex/flex.js +3 -0
- package/dist/flex/flex.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/dist/table/FilteredChip.cjs +2 -2
- package/dist/table/FilteredChip.cjs.map +1 -1
- package/dist/table/FilteredChip.d.ts.map +1 -1
- package/dist/table/FilteredChip.js +2 -2
- package/dist/table/FilteredChip.js.map +1 -1
- package/dist/text/text.cjs +3 -0
- package/dist/text/text.cjs.map +1 -1
- package/dist/text/text.d.ts +3 -0
- package/dist/text/text.d.ts.map +1 -1
- package/dist/text/text.js +3 -0
- package/dist/text/text.js.map +1 -1
- package/dist/themprovider/switcher.cjs +3 -0
- package/dist/themprovider/switcher.cjs.map +1 -1
- package/dist/themprovider/switcher.d.ts +3 -0
- package/dist/themprovider/switcher.d.ts.map +1 -1
- package/dist/themprovider/switcher.js +3 -0
- package/dist/themprovider/switcher.js.map +1 -1
- package/dist/themprovider/theme.cjs +34 -6
- package/dist/themprovider/theme.cjs.map +1 -1
- package/dist/themprovider/theme.d.ts +6 -0
- package/dist/themprovider/theme.d.ts.map +1 -1
- package/dist/themprovider/theme.js +34 -6
- package/dist/themprovider/theme.js.map +1 -1
- package/dist/v1/components/checkbox/checkbox.cjs +35 -0
- package/dist/v1/components/checkbox/checkbox.cjs.map +1 -0
- package/dist/v1/components/checkbox/checkbox.d.ts +14 -0
- package/dist/v1/components/checkbox/checkbox.d.ts.map +1 -0
- package/dist/v1/components/checkbox/checkbox.js +33 -0
- package/dist/v1/components/checkbox/checkbox.js.map +1 -0
- package/dist/v1/components/checkbox/checkbox.module.css.cjs +8 -0
- package/dist/v1/components/checkbox/checkbox.module.css.cjs.map +1 -0
- package/dist/v1/components/checkbox/checkbox.module.css.js +4 -0
- package/dist/v1/components/checkbox/checkbox.module.css.js.map +1 -0
- package/dist/v1/components/checkbox/index.d.ts +2 -0
- package/dist/v1/components/checkbox/index.d.ts.map +1 -0
- package/dist/v1/components/emptystate/emptystate.cjs +14 -0
- package/dist/v1/components/emptystate/emptystate.cjs.map +1 -0
- package/dist/v1/components/emptystate/emptystate.d.ts +13 -0
- package/dist/v1/components/emptystate/emptystate.d.ts.map +1 -0
- package/dist/v1/components/emptystate/emptystate.js +12 -0
- package/dist/v1/components/emptystate/emptystate.js.map +1 -0
- package/dist/v1/components/emptystate/emptystate.module.css.cjs +8 -0
- package/dist/v1/components/emptystate/emptystate.module.css.cjs.map +1 -0
- package/dist/v1/components/emptystate/emptystate.module.css.js +4 -0
- package/dist/v1/components/emptystate/emptystate.module.css.js.map +1 -0
- package/dist/v1/components/emptystate/index.d.ts +2 -0
- package/dist/v1/components/emptystate/index.d.ts.map +1 -0
- package/dist/v1/components/flex/flex.cjs +54 -0
- package/dist/v1/components/flex/flex.cjs.map +1 -0
- package/dist/v1/components/flex/flex.d.ts +12 -0
- package/dist/v1/components/flex/flex.d.ts.map +1 -0
- package/dist/v1/components/flex/flex.js +52 -0
- package/dist/v1/components/flex/flex.js.map +1 -0
- package/dist/v1/components/flex/flex.module.css.cjs +8 -0
- package/dist/v1/components/flex/flex.module.css.cjs.map +1 -0
- package/dist/v1/components/flex/flex.module.css.js +4 -0
- package/dist/v1/components/flex/flex.module.css.js.map +1 -0
- package/dist/v1/components/flex/index.d.ts +2 -0
- package/dist/v1/components/flex/index.d.ts.map +1 -0
- package/dist/v1/components/text/index.d.ts +2 -0
- package/dist/v1/components/text/index.d.ts.map +1 -0
- package/dist/v1/components/text/text.cjs +58 -0
- package/dist/v1/components/text/text.cjs.map +1 -0
- package/dist/v1/components/text/text.d.ts +11 -0
- package/dist/v1/components/text/text.d.ts.map +1 -0
- package/dist/v1/components/text/text.js +56 -0
- package/dist/v1/components/text/text.js.map +1 -0
- package/dist/v1/components/text/text.module.css.cjs +8 -0
- package/dist/v1/components/text/text.module.css.cjs.map +1 -0
- package/dist/v1/components/text/text.module.css.js +4 -0
- package/dist/v1/components/text/text.module.css.js.map +1 -0
- package/dist/v1/components/themprovider/index.d.ts +1 -0
- package/dist/v1/components/themprovider/index.d.ts.map +1 -1
- package/dist/v1/components/themprovider/switcher.cjs +13 -2
- package/dist/v1/components/themprovider/switcher.cjs.map +1 -1
- package/dist/v1/components/themprovider/switcher.js +13 -2
- package/dist/v1/components/themprovider/switcher.js.map +1 -1
- package/dist/v1/components/themprovider/theme.cjs +154 -1
- package/dist/v1/components/themprovider/theme.cjs.map +1 -1
- package/dist/v1/components/themprovider/theme.js +155 -3
- package/dist/v1/components/themprovider/theme.js.map +1 -1
- package/dist/v1/components/toast/toast.cjs +1 -1
- package/dist/v1/components/toast/toast.cjs.map +1 -1
- package/dist/v1/components/toast/toast.js +1 -1
- package/dist/v1/components/toast/toast.js.map +1 -1
- package/dist/v1/components/toast/toast.module.css.cjs +1 -1
- package/dist/v1/components/toast/toast.module.css.js +1 -1
- package/dist/v1/index.cjs +13 -0
- package/dist/v1/index.cjs.map +1 -1
- package/dist/v1/index.d.ts +12 -7
- package/dist/v1/index.d.ts.map +1 -1
- package/dist/v1/index.js +6 -0
- package/dist/v1/index.js.map +1 -1
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-checkbox@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-checkbox/dist/index.cjs +161 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-checkbox@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-checkbox/dist/index.cjs.map +1 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-checkbox@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-checkbox/dist/index.js +155 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-checkbox@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-checkbox/dist/index.js.map +1 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs +46 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs.map +1 -1
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js +45 -1
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js.map +1 -1
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-use-previous@1.0.1_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-previous/dist/index.cjs +24 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-use-previous@1.0.1_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-previous/dist/index.cjs.map +1 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-use-previous@1.0.1_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-previous/dist/index.js +22 -0
- package/dist/v1/node_modules/.pnpm/@radix-ui_react-use-previous@1.0.1_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-previous/dist/index.js.map +1 -0
- package/dist/v1/style.css +1 -1
- package/package.json +7 -5
|
@@ -1,9 +1,20 @@
|
|
|
1
|
-
import '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
-
import '
|
|
1
|
+
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
+
import { SunIcon, MoonIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
|
|
3
|
+
import { useTheme } from './theme.js';
|
|
4
|
+
import { Box } from '../box/box.js';
|
|
3
5
|
|
|
4
6
|
var Theme;
|
|
5
7
|
(function (Theme) {
|
|
6
8
|
Theme["DARK"] = "dark";
|
|
7
9
|
Theme["LIGHT"] = "light";
|
|
8
10
|
})(Theme || (Theme = {}));
|
|
11
|
+
function ThemeSwitcher({ size = 30, ...props }) {
|
|
12
|
+
const { theme, setTheme } = useTheme();
|
|
13
|
+
const onClickHandler = () => {
|
|
14
|
+
setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK);
|
|
15
|
+
};
|
|
16
|
+
return (jsxRuntimeExports.jsx(Box, { ...props, children: theme === Theme.DARK ? (jsxRuntimeExports.jsx(SunIcon, { width: size, height: size, onClick: onClickHandler })) : (jsxRuntimeExports.jsx(MoonIcon, { width: size, height: size, onClick: onClickHandler })) }));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { ThemeSwitcher };
|
|
9
20
|
//# sourceMappingURL=switcher.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switcher.js","sources":["../../../../v1/components/themprovider/switcher.tsx"],"sourcesContent":["import { MoonIcon, SunIcon } from \"@radix-ui/react-icons\";\nimport { useTheme } from \"./theme\";\nimport { Box } from \"../box\";\n\nenum Theme {\n DARK = \"dark\",\n LIGHT = \"light\",\n}\n\ntype Props = { size?: number };\nexport function ThemeSwitcher({ size = 30, ...props }: Props) {\n const { theme, setTheme } = useTheme();\n const onClickHandler = () => {\n setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK);\n };\n\n return (\n <Box {...props}>\n {theme === Theme.DARK ? (\n <SunIcon width={size} height={size} onClick={onClickHandler} />\n ) : (\n <MoonIcon width={size} height={size} onClick={onClickHandler} />\n )}\n </Box>\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"switcher.js","sources":["../../../../v1/components/themprovider/switcher.tsx"],"sourcesContent":["import { MoonIcon, SunIcon } from \"@radix-ui/react-icons\";\nimport { useTheme } from \"./theme\";\nimport { Box } from \"../box\";\n\nenum Theme {\n DARK = \"dark\",\n LIGHT = \"light\",\n}\n\ntype Props = { size?: number };\nexport function ThemeSwitcher({ size = 30, ...props }: Props) {\n const { theme, setTheme } = useTheme();\n const onClickHandler = () => {\n setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK);\n };\n\n return (\n <Box {...props}>\n {theme === Theme.DARK ? (\n <SunIcon width={size} height={size} onClick={onClickHandler} />\n ) : (\n <MoonIcon width={size} height={size} onClick={onClickHandler} />\n )}\n </Box>\n );\n}\n"],"names":["_jsx"],"mappings":";;;;;AAIA,IAAK,KAGJ,CAAA;AAHD,CAAA,UAAK,KAAK,EAAA;AACR,IAAA,KAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,KAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHI,KAAK,KAAL,KAAK,GAGT,EAAA,CAAA,CAAA,CAAA;AAGK,SAAU,aAAa,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,EAAS,EAAA;IAC1D,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACvC,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AAC5D,KAAC,CAAC;IAEF,QACEA,qBAAC,CAAA,GAAG,EAAK,EAAA,GAAA,KAAK,YACX,KAAK,KAAK,KAAK,CAAC,IAAI,IACnBA,qBAAC,CAAA,OAAO,EAAC,EAAA,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAI,CAAA,KAE/DA,qBAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAI,CAAA,CACjE,EACG,CAAA,EACN;AACJ;;;;"}
|
|
@@ -5,10 +5,129 @@ var React = require('react');
|
|
|
5
5
|
|
|
6
6
|
const colorSchemes = ["light", "dark"];
|
|
7
7
|
const MEDIA = "(prefers-color-scheme: dark)";
|
|
8
|
+
const isServer = typeof window === "undefined";
|
|
8
9
|
const ThemeContext = React.createContext(undefined);
|
|
9
10
|
const defaultContext = { setTheme: (_) => { }, themes: [] };
|
|
10
11
|
const useTheme = () => React.useContext(ThemeContext) ?? defaultContext;
|
|
11
|
-
|
|
12
|
+
const ThemeProvider = (props) => {
|
|
13
|
+
const context = React.useContext(ThemeContext);
|
|
14
|
+
// Ignore nested context providers, just passthrough children
|
|
15
|
+
if (context)
|
|
16
|
+
return jsxRuntime.jsxRuntimeExports.jsx(React.Fragment, { children: props.children });
|
|
17
|
+
return jsxRuntime.jsxRuntimeExports.jsx(Theme, { ...props });
|
|
18
|
+
};
|
|
19
|
+
const defaultThemes = ["light", "dark"];
|
|
20
|
+
const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, style = "modern", accentColor = "indigo", grayColor = "slate", }) => {
|
|
21
|
+
const [theme, setThemeState] = React.useState(() => getTheme(storageKey, defaultTheme));
|
|
22
|
+
const [resolvedTheme, setResolvedTheme] = React.useState(() => getTheme(storageKey));
|
|
23
|
+
const attrs = !value ? themes : Object.values(value);
|
|
24
|
+
const applyTheme = React.useCallback((theme) => {
|
|
25
|
+
let resolved = theme;
|
|
26
|
+
if (!resolved)
|
|
27
|
+
return;
|
|
28
|
+
// If theme is system, resolve it before setting theme
|
|
29
|
+
if (theme === "system" && enableSystem) {
|
|
30
|
+
resolved = getSystemTheme();
|
|
31
|
+
}
|
|
32
|
+
const name = value ? value[resolved] : resolved;
|
|
33
|
+
const enable = disableTransitionOnChange ? disableAnimation() : null;
|
|
34
|
+
const d = document.documentElement;
|
|
35
|
+
if (attribute === "class") {
|
|
36
|
+
d.classList.remove(...attrs);
|
|
37
|
+
if (name)
|
|
38
|
+
d.classList.add(name);
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
if (name) {
|
|
42
|
+
d.setAttribute(attribute, name);
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
d.removeAttribute(attribute);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
d.setAttribute('data-style', style);
|
|
49
|
+
d.setAttribute('data-accent-color', accentColor);
|
|
50
|
+
d.setAttribute('data-gray-color', grayColor);
|
|
51
|
+
if (enableColorScheme) {
|
|
52
|
+
const fallback = colorSchemes.includes(defaultTheme)
|
|
53
|
+
? defaultTheme
|
|
54
|
+
: null;
|
|
55
|
+
const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
|
|
56
|
+
// @ts-ignore
|
|
57
|
+
d.style.colorScheme = colorScheme;
|
|
58
|
+
}
|
|
59
|
+
enable?.();
|
|
60
|
+
}, [style, accentColor, grayColor, attribute, attrs, value, enableSystem, enableColorScheme, defaultTheme]);
|
|
61
|
+
const setTheme = React.useCallback((theme) => {
|
|
62
|
+
setThemeState(theme);
|
|
63
|
+
// Save to storage
|
|
64
|
+
try {
|
|
65
|
+
localStorage.setItem(storageKey, theme);
|
|
66
|
+
}
|
|
67
|
+
catch (e) {
|
|
68
|
+
// Unsupported
|
|
69
|
+
}
|
|
70
|
+
}, [forcedTheme]);
|
|
71
|
+
const handleMediaQuery = React.useCallback((e) => {
|
|
72
|
+
const resolved = getSystemTheme(e);
|
|
73
|
+
setResolvedTheme(resolved);
|
|
74
|
+
if (theme === "system" && enableSystem && !forcedTheme) {
|
|
75
|
+
applyTheme("system");
|
|
76
|
+
}
|
|
77
|
+
}, [theme, forcedTheme]);
|
|
78
|
+
// Always listen to System preference
|
|
79
|
+
React.useEffect(() => {
|
|
80
|
+
const media = window.matchMedia(MEDIA);
|
|
81
|
+
media.addEventListener('change', handleMediaQuery);
|
|
82
|
+
handleMediaQuery(media);
|
|
83
|
+
return () => media.removeEventListener('change', handleMediaQuery);
|
|
84
|
+
}, [handleMediaQuery]);
|
|
85
|
+
// localStorage event handling
|
|
86
|
+
React.useEffect(() => {
|
|
87
|
+
const handleStorage = (e) => {
|
|
88
|
+
if (e.key !== storageKey) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
// If default theme set, use it if localstorage === null (happens on local storage manual deletion)
|
|
92
|
+
const theme = e.newValue || defaultTheme;
|
|
93
|
+
setTheme(theme);
|
|
94
|
+
};
|
|
95
|
+
window.addEventListener("storage", handleStorage);
|
|
96
|
+
return () => window.removeEventListener("storage", handleStorage);
|
|
97
|
+
}, [setTheme]);
|
|
98
|
+
// Whenever theme or forcedTheme changes, apply it
|
|
99
|
+
React.useEffect(() => {
|
|
100
|
+
// @ts-ignore
|
|
101
|
+
applyTheme(forcedTheme ?? theme);
|
|
102
|
+
}, [forcedTheme, theme]);
|
|
103
|
+
const providerValue = React.useMemo(() => ({
|
|
104
|
+
theme,
|
|
105
|
+
setTheme,
|
|
106
|
+
forcedTheme,
|
|
107
|
+
resolvedTheme: theme === "system" ? resolvedTheme : theme,
|
|
108
|
+
themes: enableSystem ? [...themes, "system"] : themes,
|
|
109
|
+
systemTheme: (enableSystem ? resolvedTheme : undefined),
|
|
110
|
+
style,
|
|
111
|
+
accentColor,
|
|
112
|
+
grayColor,
|
|
113
|
+
}), [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes, style, accentColor, grayColor]);
|
|
114
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(ThemeContext.Provider, { value: providerValue, children: [jsxRuntime.jsxRuntimeExports.jsx(ThemeScript, { forcedTheme,
|
|
115
|
+
disableTransitionOnChange,
|
|
116
|
+
enableSystem,
|
|
117
|
+
enableColorScheme,
|
|
118
|
+
storageKey,
|
|
119
|
+
themes,
|
|
120
|
+
defaultTheme,
|
|
121
|
+
attribute,
|
|
122
|
+
value,
|
|
123
|
+
children,
|
|
124
|
+
attrs,
|
|
125
|
+
nonce,
|
|
126
|
+
style,
|
|
127
|
+
accentColor,
|
|
128
|
+
grayColor }), children] }));
|
|
129
|
+
};
|
|
130
|
+
const ThemeScript = React.memo(({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, style, accentColor, grayColor, }) => {
|
|
12
131
|
const defaultSystem = defaultTheme === "system";
|
|
13
132
|
// Code-golfing the amount of characters in the script
|
|
14
133
|
const optimization = (() => {
|
|
@@ -79,6 +198,40 @@ React.memo(({ forcedTheme, storageKey, attribute, enableSystem, enableColorSchem
|
|
|
79
198
|
},
|
|
80
199
|
// Never re-render this component
|
|
81
200
|
() => true);
|
|
201
|
+
// Helpers
|
|
202
|
+
const getTheme = (key, fallback) => {
|
|
203
|
+
if (isServer)
|
|
204
|
+
return undefined;
|
|
205
|
+
let theme;
|
|
206
|
+
try {
|
|
207
|
+
theme = localStorage.getItem(key) || undefined;
|
|
208
|
+
}
|
|
209
|
+
catch (e) {
|
|
210
|
+
// Unsupported
|
|
211
|
+
}
|
|
212
|
+
return theme || fallback;
|
|
213
|
+
};
|
|
214
|
+
const disableAnimation = () => {
|
|
215
|
+
const css = document.createElement("style");
|
|
216
|
+
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
217
|
+
document.head.appendChild(css);
|
|
218
|
+
return () => {
|
|
219
|
+
// Force restyle
|
|
220
|
+
(() => window.getComputedStyle(document.body))();
|
|
221
|
+
// Wait for next tick before removing
|
|
222
|
+
setTimeout(() => {
|
|
223
|
+
document.head.removeChild(css);
|
|
224
|
+
}, 1);
|
|
225
|
+
};
|
|
226
|
+
};
|
|
227
|
+
const getSystemTheme = (e) => {
|
|
228
|
+
if (!e)
|
|
229
|
+
e = window.matchMedia(MEDIA);
|
|
230
|
+
const isDark = e.matches;
|
|
231
|
+
const systemTheme = isDark ? "dark" : "light";
|
|
232
|
+
return systemTheme;
|
|
233
|
+
};
|
|
82
234
|
|
|
235
|
+
exports.ThemeProvider = ThemeProvider;
|
|
83
236
|
exports.useTheme = useTheme;
|
|
84
237
|
//# sourceMappingURL=theme.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.cjs","sources":["../../../../v1/components/themprovider/theme.tsx"],"sourcesContent":["import React, {\n Fragment,\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport type { ThemeProviderProps, UseThemeProps } from \"./types\";\n\nconst colorSchemes = [\"light\", \"dark\"];\nconst MEDIA = \"(prefers-color-scheme: dark)\";\nconst isServer = typeof window === \"undefined\";\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: (_) => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {\n const context = useContext(ThemeContext);\n\n // Ignore nested context providers, just passthrough children\n if (context) return <Fragment>{props.children}</Fragment>;\n return <Theme {...props} />;\n};\n\nconst defaultThemes = [\"light\", \"dark\"];\n\nconst Theme: React.FC<ThemeProviderProps> = ({\n forcedTheme,\n disableTransitionOnChange = false,\n enableSystem = true,\n enableColorScheme = true,\n storageKey = \"theme\",\n themes = defaultThemes,\n defaultTheme = enableSystem ? \"system\" : \"light\",\n attribute = \"data-theme\",\n value,\n children,\n nonce,\n style = \"modern\",\n accentColor = \"indigo\",\n grayColor = \"slate\",\n}) => {\n const [theme, setThemeState] = useState(() =>\n getTheme(storageKey, defaultTheme)\n );\n const [resolvedTheme, setResolvedTheme] = useState(() =>\n getTheme(storageKey)\n );\n const attrs = !value ? themes : Object.values(value);\n\n const applyTheme = useCallback((theme: string) => {\n let resolved = theme;\n if (!resolved) return;\n\n // If theme is system, resolve it before setting theme\n if (theme === \"system\" && enableSystem) {\n resolved = getSystemTheme();\n }\n\n const name = value ? value[resolved] : resolved;\n const enable = disableTransitionOnChange ? disableAnimation() : null;\n const d = document.documentElement;\n\n if (attribute === \"class\") {\n d.classList.remove(...attrs);\n\n if (name) d.classList.add(name);\n } else {\n if (name) {\n d.setAttribute(attribute, name);\n } else {\n d.removeAttribute(attribute);\n }\n }\n\n d.setAttribute('data-style', style);\n d.setAttribute('data-accent-color', accentColor);\n d.setAttribute('data-gray-color', grayColor);\n\n if (enableColorScheme) {\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;\n // @ts-ignore\n d.style.colorScheme = colorScheme;\n }\n\n enable?.();\n }, [style, accentColor, grayColor, attribute, attrs, value, enableSystem, enableColorScheme, defaultTheme]);\n\n const setTheme = useCallback(\n (theme: string) => {\n setThemeState(theme);\n\n // Save to storage\n try {\n localStorage.setItem(storageKey, theme);\n } catch (e) {\n // Unsupported\n }\n },\n [forcedTheme]\n );\n\n const handleMediaQuery = useCallback(\n (e: MediaQueryListEvent | MediaQueryList) => {\n const resolved = getSystemTheme(e);\n setResolvedTheme(resolved);\n\n if (theme === \"system\" && enableSystem && !forcedTheme) {\n applyTheme(\"system\");\n }\n },\n [theme, forcedTheme]\n );\n\n // Always listen to System preference\n useEffect(() => {\n const media = window.matchMedia(MEDIA);\n\n // Intentionally use deprecated listener methods to support iOS & old browsers\n media.addListener(handleMediaQuery);\n handleMediaQuery(media);\n\n return () => media.removeListener(handleMediaQuery);\n }, [handleMediaQuery]);\n\n // localStorage event handling\n useEffect(() => {\n const handleStorage = (e: StorageEvent) => {\n if (e.key !== storageKey) {\n return;\n }\n\n // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n const theme = e.newValue || defaultTheme;\n setTheme(theme);\n };\n\n window.addEventListener(\"storage\", handleStorage);\n return () => window.removeEventListener(\"storage\", handleStorage);\n }, [setTheme]);\n\n // Whenever theme or forcedTheme changes, apply it\n useEffect(() => {\n // @ts-ignore\n applyTheme(forcedTheme ?? theme);\n }, [forcedTheme, theme]);\n\n const providerValue = useMemo(\n () => ({\n theme,\n setTheme,\n forcedTheme,\n resolvedTheme: theme === \"system\" ? resolvedTheme : theme,\n themes: enableSystem ? [...themes, \"system\"] : themes,\n systemTheme: (enableSystem ? resolvedTheme : undefined) as\n | \"light\"\n | \"dark\"\n | undefined,\n style,\n accentColor,\n grayColor,\n }),\n [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes, style, accentColor, grayColor]\n );\n\n return (\n <ThemeContext.Provider value={providerValue}>\n <ThemeScript\n {...{\n forcedTheme,\n disableTransitionOnChange,\n enableSystem,\n enableColorScheme,\n storageKey,\n themes,\n defaultTheme,\n attribute,\n value,\n children,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }}\n />\n {children}\n </ThemeContext.Provider>\n );\n};\n\nconst ThemeScript = memo(\n ({\n forcedTheme,\n storageKey,\n attribute,\n enableSystem,\n enableColorScheme,\n defaultTheme,\n value,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n const defaultSystem = defaultTheme === \"system\";\n\n // Code-golfing the amount of characters in the script\n const optimization = (() => {\n if (attribute === \"class\") {\n const removeClasses = `c.remove(${attrs\n .map((t: string) => `'${t}'`)\n .join(\",\")})`;\n\n return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n } else {\n return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n }\n })();\n\n const fallbackColorScheme = (() => {\n if (!enableColorScheme) {\n return \"\";\n }\n\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n\n if (fallback) {\n return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n } else {\n return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n }\n })();\n\n const updateDOM = (\n name: string,\n literal: boolean = false,\n setColorScheme = true\n ) => {\n const resolvedName = value ? value[name] : name;\n const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n let text = \"\";\n\n // MUCH faster to set colorScheme alongside HTML attribute/class\n // as it only incurs 1 style recalculation rather than 2\n // This can save over 250ms of work for pages with big DOM\n if (\n enableColorScheme &&\n setColorScheme &&\n !literal &&\n colorSchemes.includes(name)\n ) {\n text += `d.style.colorScheme = '${name}';`;\n }\n\n if (attribute === \"class\") {\n if (literal || resolvedName) {\n text += `c.add(${val})`;\n } else {\n text += `null`;\n }\n } else {\n if (resolvedName) {\n text += `d[s](n,${val})`;\n }\n }\n\n return text;\n };\n\n const scriptSrc = (() => {\n if (forcedTheme) {\n return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n }\n\n if (enableSystem) {\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n \"dark\"\n )}}else{${updateDOM(\"light\")}}}else if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}${\n !defaultSystem\n ? `else{` + updateDOM(defaultTheme, false, false) + \"}\"\n : \"\"\n }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n }\n\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}else{${updateDOM(\n defaultTheme,\n false,\n false\n )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n })();\n\n return (\n <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n );\n },\n // Never re-render this component\n () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n if (isServer) return undefined;\n let theme;\n try {\n theme = localStorage.getItem(key) || undefined;\n } catch (e) {\n // Unsupported\n }\n return theme || fallback;\n};\n\nconst disableAnimation = () => {\n const css = document.createElement(\"style\");\n css.appendChild(\n document.createTextNode(\n `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n )\n );\n document.head.appendChild(css);\n\n return () => {\n // Force restyle\n (() => window.getComputedStyle(document.body))();\n\n // Wait for next tick before removing\n setTimeout(() => {\n document.head.removeChild(css);\n }, 1);\n };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n if (!e) e = window.matchMedia(MEDIA);\n const isDark = e.matches;\n const systemTheme = isDark ? \"dark\" : \"light\";\n return systemTheme;\n};\n"],"names":["createContext","useContext","memo","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"theme.cjs","sources":["../../../../v1/components/themprovider/theme.tsx"],"sourcesContent":["import React, {\n Fragment,\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport type { ThemeProviderProps, UseThemeProps } from \"./types\";\n\nconst colorSchemes = [\"light\", \"dark\"];\nconst MEDIA = \"(prefers-color-scheme: dark)\";\nconst isServer = typeof window === \"undefined\";\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: (_) => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {\n const context = useContext(ThemeContext);\n\n // Ignore nested context providers, just passthrough children\n if (context) return <Fragment>{props.children}</Fragment>;\n return <Theme {...props} />;\n};\n\nconst defaultThemes = [\"light\", \"dark\"];\n\nconst Theme: React.FC<ThemeProviderProps> = ({\n forcedTheme,\n disableTransitionOnChange = false,\n enableSystem = true,\n enableColorScheme = true,\n storageKey = \"theme\",\n themes = defaultThemes,\n defaultTheme = enableSystem ? \"system\" : \"light\",\n attribute = \"data-theme\",\n value,\n children,\n nonce,\n style = \"modern\",\n accentColor = \"indigo\",\n grayColor = \"slate\",\n}) => {\n const [theme, setThemeState] = useState(() =>\n getTheme(storageKey, defaultTheme)\n );\n const [resolvedTheme, setResolvedTheme] = useState(() =>\n getTheme(storageKey)\n );\n const attrs = !value ? themes : Object.values(value);\n\n const applyTheme = useCallback((theme: string) => {\n let resolved = theme;\n if (!resolved) return;\n\n // If theme is system, resolve it before setting theme\n if (theme === \"system\" && enableSystem) {\n resolved = getSystemTheme();\n }\n\n const name = value ? value[resolved] : resolved;\n const enable = disableTransitionOnChange ? disableAnimation() : null;\n const d = document.documentElement;\n\n if (attribute === \"class\") {\n d.classList.remove(...attrs);\n\n if (name) d.classList.add(name);\n } else {\n if (name) {\n d.setAttribute(attribute, name);\n } else {\n d.removeAttribute(attribute);\n }\n }\n\n d.setAttribute('data-style', style);\n d.setAttribute('data-accent-color', accentColor);\n d.setAttribute('data-gray-color', grayColor);\n\n if (enableColorScheme) {\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;\n // @ts-ignore\n d.style.colorScheme = colorScheme;\n }\n\n enable?.();\n }, [style, accentColor, grayColor, attribute, attrs, value, enableSystem, enableColorScheme, defaultTheme]);\n\n const setTheme = useCallback(\n (theme: string) => {\n setThemeState(theme);\n\n // Save to storage\n try {\n localStorage.setItem(storageKey, theme);\n } catch (e) {\n // Unsupported\n }\n },\n [forcedTheme]\n );\n\n const handleMediaQuery = useCallback(\n (e: MediaQueryListEvent | MediaQueryList) => {\n const resolved = getSystemTheme(e);\n setResolvedTheme(resolved);\n\n if (theme === \"system\" && enableSystem && !forcedTheme) {\n applyTheme(\"system\");\n }\n },\n [theme, forcedTheme]\n );\n\n // Always listen to System preference\n useEffect(() => {\n const media = window.matchMedia(MEDIA);\n\n media.addEventListener('change', handleMediaQuery);\n handleMediaQuery(media);\n\n return () => media.removeEventListener('change', handleMediaQuery);\n }, [handleMediaQuery]);\n\n // localStorage event handling\n useEffect(() => {\n const handleStorage = (e: StorageEvent) => {\n if (e.key !== storageKey) {\n return;\n }\n\n // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n const theme = e.newValue || defaultTheme;\n setTheme(theme);\n };\n\n window.addEventListener(\"storage\", handleStorage);\n return () => window.removeEventListener(\"storage\", handleStorage);\n }, [setTheme]);\n\n // Whenever theme or forcedTheme changes, apply it\n useEffect(() => {\n // @ts-ignore\n applyTheme(forcedTheme ?? theme);\n }, [forcedTheme, theme]);\n\n const providerValue = useMemo(\n () => ({\n theme,\n setTheme,\n forcedTheme,\n resolvedTheme: theme === \"system\" ? resolvedTheme : theme,\n themes: enableSystem ? [...themes, \"system\"] : themes,\n systemTheme: (enableSystem ? resolvedTheme : undefined) as\n | \"light\"\n | \"dark\"\n | undefined,\n style,\n accentColor,\n grayColor,\n }),\n [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes, style, accentColor, grayColor]\n );\n\n return (\n <ThemeContext.Provider value={providerValue}>\n <ThemeScript\n {...{\n forcedTheme,\n disableTransitionOnChange,\n enableSystem,\n enableColorScheme,\n storageKey,\n themes,\n defaultTheme,\n attribute,\n value,\n children,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }}\n />\n {children}\n </ThemeContext.Provider>\n );\n};\n\nconst ThemeScript = memo(\n ({\n forcedTheme,\n storageKey,\n attribute,\n enableSystem,\n enableColorScheme,\n defaultTheme,\n value,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n const defaultSystem = defaultTheme === \"system\";\n\n // Code-golfing the amount of characters in the script\n const optimization = (() => {\n if (attribute === \"class\") {\n const removeClasses = `c.remove(${attrs\n .map((t: string) => `'${t}'`)\n .join(\",\")})`;\n\n return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n } else {\n return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n }\n })();\n\n const fallbackColorScheme = (() => {\n if (!enableColorScheme) {\n return \"\";\n }\n\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n\n if (fallback) {\n return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n } else {\n return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n }\n })();\n\n const updateDOM = (\n name: string,\n literal: boolean = false,\n setColorScheme = true\n ) => {\n const resolvedName = value ? value[name] : name;\n const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n let text = \"\";\n\n // MUCH faster to set colorScheme alongside HTML attribute/class\n // as it only incurs 1 style recalculation rather than 2\n // This can save over 250ms of work for pages with big DOM\n if (\n enableColorScheme &&\n setColorScheme &&\n !literal &&\n colorSchemes.includes(name)\n ) {\n text += `d.style.colorScheme = '${name}';`;\n }\n\n if (attribute === \"class\") {\n if (literal || resolvedName) {\n text += `c.add(${val})`;\n } else {\n text += `null`;\n }\n } else {\n if (resolvedName) {\n text += `d[s](n,${val})`;\n }\n }\n\n return text;\n };\n\n const scriptSrc = (() => {\n if (forcedTheme) {\n return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n }\n\n if (enableSystem) {\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n \"dark\"\n )}}else{${updateDOM(\"light\")}}}else if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}${\n !defaultSystem\n ? `else{` + updateDOM(defaultTheme, false, false) + \"}\"\n : \"\"\n }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n }\n\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}else{${updateDOM(\n defaultTheme,\n false,\n false\n )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n })();\n\n return (\n <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n );\n },\n // Never re-render this component\n () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n if (isServer) return undefined;\n let theme;\n try {\n theme = localStorage.getItem(key) || undefined;\n } catch (e) {\n // Unsupported\n }\n return theme || fallback;\n};\n\nconst disableAnimation = () => {\n const css = document.createElement(\"style\");\n css.appendChild(\n document.createTextNode(\n `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n )\n );\n document.head.appendChild(css);\n\n return () => {\n // Force restyle\n (() => window.getComputedStyle(document.body))();\n\n // Wait for next tick before removing\n setTimeout(() => {\n document.head.removeChild(css);\n }, 1);\n };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n if (!e) e = window.matchMedia(MEDIA);\n const isDark = e.matches;\n const systemTheme = isDark ? \"dark\" : \"light\";\n return systemTheme;\n};\n"],"names":["createContext","useContext","_jsx","Fragment","useState","useCallback","useEffect","useMemo","_jsxs","memo"],"mappings":"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"}
|
|
@@ -1,12 +1,131 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
|
-
import { createContext, memo, useContext } from 'react';
|
|
2
|
+
import { createContext, memo, useContext, Fragment, useState, useCallback, useEffect, useMemo } from 'react';
|
|
3
3
|
|
|
4
4
|
const colorSchemes = ["light", "dark"];
|
|
5
5
|
const MEDIA = "(prefers-color-scheme: dark)";
|
|
6
|
+
const isServer = typeof window === "undefined";
|
|
6
7
|
const ThemeContext = createContext(undefined);
|
|
7
8
|
const defaultContext = { setTheme: (_) => { }, themes: [] };
|
|
8
9
|
const useTheme = () => useContext(ThemeContext) ?? defaultContext;
|
|
9
|
-
|
|
10
|
+
const ThemeProvider = (props) => {
|
|
11
|
+
const context = useContext(ThemeContext);
|
|
12
|
+
// Ignore nested context providers, just passthrough children
|
|
13
|
+
if (context)
|
|
14
|
+
return jsxRuntimeExports.jsx(Fragment, { children: props.children });
|
|
15
|
+
return jsxRuntimeExports.jsx(Theme, { ...props });
|
|
16
|
+
};
|
|
17
|
+
const defaultThemes = ["light", "dark"];
|
|
18
|
+
const Theme = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, style = "modern", accentColor = "indigo", grayColor = "slate", }) => {
|
|
19
|
+
const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
|
|
20
|
+
const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
|
|
21
|
+
const attrs = !value ? themes : Object.values(value);
|
|
22
|
+
const applyTheme = useCallback((theme) => {
|
|
23
|
+
let resolved = theme;
|
|
24
|
+
if (!resolved)
|
|
25
|
+
return;
|
|
26
|
+
// If theme is system, resolve it before setting theme
|
|
27
|
+
if (theme === "system" && enableSystem) {
|
|
28
|
+
resolved = getSystemTheme();
|
|
29
|
+
}
|
|
30
|
+
const name = value ? value[resolved] : resolved;
|
|
31
|
+
const enable = disableTransitionOnChange ? disableAnimation() : null;
|
|
32
|
+
const d = document.documentElement;
|
|
33
|
+
if (attribute === "class") {
|
|
34
|
+
d.classList.remove(...attrs);
|
|
35
|
+
if (name)
|
|
36
|
+
d.classList.add(name);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
if (name) {
|
|
40
|
+
d.setAttribute(attribute, name);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
d.removeAttribute(attribute);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
d.setAttribute('data-style', style);
|
|
47
|
+
d.setAttribute('data-accent-color', accentColor);
|
|
48
|
+
d.setAttribute('data-gray-color', grayColor);
|
|
49
|
+
if (enableColorScheme) {
|
|
50
|
+
const fallback = colorSchemes.includes(defaultTheme)
|
|
51
|
+
? defaultTheme
|
|
52
|
+
: null;
|
|
53
|
+
const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
|
|
54
|
+
// @ts-ignore
|
|
55
|
+
d.style.colorScheme = colorScheme;
|
|
56
|
+
}
|
|
57
|
+
enable?.();
|
|
58
|
+
}, [style, accentColor, grayColor, attribute, attrs, value, enableSystem, enableColorScheme, defaultTheme]);
|
|
59
|
+
const setTheme = useCallback((theme) => {
|
|
60
|
+
setThemeState(theme);
|
|
61
|
+
// Save to storage
|
|
62
|
+
try {
|
|
63
|
+
localStorage.setItem(storageKey, theme);
|
|
64
|
+
}
|
|
65
|
+
catch (e) {
|
|
66
|
+
// Unsupported
|
|
67
|
+
}
|
|
68
|
+
}, [forcedTheme]);
|
|
69
|
+
const handleMediaQuery = useCallback((e) => {
|
|
70
|
+
const resolved = getSystemTheme(e);
|
|
71
|
+
setResolvedTheme(resolved);
|
|
72
|
+
if (theme === "system" && enableSystem && !forcedTheme) {
|
|
73
|
+
applyTheme("system");
|
|
74
|
+
}
|
|
75
|
+
}, [theme, forcedTheme]);
|
|
76
|
+
// Always listen to System preference
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
const media = window.matchMedia(MEDIA);
|
|
79
|
+
media.addEventListener('change', handleMediaQuery);
|
|
80
|
+
handleMediaQuery(media);
|
|
81
|
+
return () => media.removeEventListener('change', handleMediaQuery);
|
|
82
|
+
}, [handleMediaQuery]);
|
|
83
|
+
// localStorage event handling
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
const handleStorage = (e) => {
|
|
86
|
+
if (e.key !== storageKey) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
// If default theme set, use it if localstorage === null (happens on local storage manual deletion)
|
|
90
|
+
const theme = e.newValue || defaultTheme;
|
|
91
|
+
setTheme(theme);
|
|
92
|
+
};
|
|
93
|
+
window.addEventListener("storage", handleStorage);
|
|
94
|
+
return () => window.removeEventListener("storage", handleStorage);
|
|
95
|
+
}, [setTheme]);
|
|
96
|
+
// Whenever theme or forcedTheme changes, apply it
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
// @ts-ignore
|
|
99
|
+
applyTheme(forcedTheme ?? theme);
|
|
100
|
+
}, [forcedTheme, theme]);
|
|
101
|
+
const providerValue = useMemo(() => ({
|
|
102
|
+
theme,
|
|
103
|
+
setTheme,
|
|
104
|
+
forcedTheme,
|
|
105
|
+
resolvedTheme: theme === "system" ? resolvedTheme : theme,
|
|
106
|
+
themes: enableSystem ? [...themes, "system"] : themes,
|
|
107
|
+
systemTheme: (enableSystem ? resolvedTheme : undefined),
|
|
108
|
+
style,
|
|
109
|
+
accentColor,
|
|
110
|
+
grayColor,
|
|
111
|
+
}), [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes, style, accentColor, grayColor]);
|
|
112
|
+
return (jsxRuntimeExports.jsxs(ThemeContext.Provider, { value: providerValue, children: [jsxRuntimeExports.jsx(ThemeScript, { forcedTheme,
|
|
113
|
+
disableTransitionOnChange,
|
|
114
|
+
enableSystem,
|
|
115
|
+
enableColorScheme,
|
|
116
|
+
storageKey,
|
|
117
|
+
themes,
|
|
118
|
+
defaultTheme,
|
|
119
|
+
attribute,
|
|
120
|
+
value,
|
|
121
|
+
children,
|
|
122
|
+
attrs,
|
|
123
|
+
nonce,
|
|
124
|
+
style,
|
|
125
|
+
accentColor,
|
|
126
|
+
grayColor }), children] }));
|
|
127
|
+
};
|
|
128
|
+
const ThemeScript = memo(({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, style, accentColor, grayColor, }) => {
|
|
10
129
|
const defaultSystem = defaultTheme === "system";
|
|
11
130
|
// Code-golfing the amount of characters in the script
|
|
12
131
|
const optimization = (() => {
|
|
@@ -77,6 +196,39 @@ memo(({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, def
|
|
|
77
196
|
},
|
|
78
197
|
// Never re-render this component
|
|
79
198
|
() => true);
|
|
199
|
+
// Helpers
|
|
200
|
+
const getTheme = (key, fallback) => {
|
|
201
|
+
if (isServer)
|
|
202
|
+
return undefined;
|
|
203
|
+
let theme;
|
|
204
|
+
try {
|
|
205
|
+
theme = localStorage.getItem(key) || undefined;
|
|
206
|
+
}
|
|
207
|
+
catch (e) {
|
|
208
|
+
// Unsupported
|
|
209
|
+
}
|
|
210
|
+
return theme || fallback;
|
|
211
|
+
};
|
|
212
|
+
const disableAnimation = () => {
|
|
213
|
+
const css = document.createElement("style");
|
|
214
|
+
css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
|
|
215
|
+
document.head.appendChild(css);
|
|
216
|
+
return () => {
|
|
217
|
+
// Force restyle
|
|
218
|
+
(() => window.getComputedStyle(document.body))();
|
|
219
|
+
// Wait for next tick before removing
|
|
220
|
+
setTimeout(() => {
|
|
221
|
+
document.head.removeChild(css);
|
|
222
|
+
}, 1);
|
|
223
|
+
};
|
|
224
|
+
};
|
|
225
|
+
const getSystemTheme = (e) => {
|
|
226
|
+
if (!e)
|
|
227
|
+
e = window.matchMedia(MEDIA);
|
|
228
|
+
const isDark = e.matches;
|
|
229
|
+
const systemTheme = isDark ? "dark" : "light";
|
|
230
|
+
return systemTheme;
|
|
231
|
+
};
|
|
80
232
|
|
|
81
|
-
export { useTheme };
|
|
233
|
+
export { ThemeProvider, useTheme };
|
|
82
234
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":["../../../../v1/components/themprovider/theme.tsx"],"sourcesContent":["import React, {\n Fragment,\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport type { ThemeProviderProps, UseThemeProps } from \"./types\";\n\nconst colorSchemes = [\"light\", \"dark\"];\nconst MEDIA = \"(prefers-color-scheme: dark)\";\nconst isServer = typeof window === \"undefined\";\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: (_) => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {\n const context = useContext(ThemeContext);\n\n // Ignore nested context providers, just passthrough children\n if (context) return <Fragment>{props.children}</Fragment>;\n return <Theme {...props} />;\n};\n\nconst defaultThemes = [\"light\", \"dark\"];\n\nconst Theme: React.FC<ThemeProviderProps> = ({\n forcedTheme,\n disableTransitionOnChange = false,\n enableSystem = true,\n enableColorScheme = true,\n storageKey = \"theme\",\n themes = defaultThemes,\n defaultTheme = enableSystem ? \"system\" : \"light\",\n attribute = \"data-theme\",\n value,\n children,\n nonce,\n style = \"modern\",\n accentColor = \"indigo\",\n grayColor = \"slate\",\n}) => {\n const [theme, setThemeState] = useState(() =>\n getTheme(storageKey, defaultTheme)\n );\n const [resolvedTheme, setResolvedTheme] = useState(() =>\n getTheme(storageKey)\n );\n const attrs = !value ? themes : Object.values(value);\n\n const applyTheme = useCallback((theme: string) => {\n let resolved = theme;\n if (!resolved) return;\n\n // If theme is system, resolve it before setting theme\n if (theme === \"system\" && enableSystem) {\n resolved = getSystemTheme();\n }\n\n const name = value ? value[resolved] : resolved;\n const enable = disableTransitionOnChange ? disableAnimation() : null;\n const d = document.documentElement;\n\n if (attribute === \"class\") {\n d.classList.remove(...attrs);\n\n if (name) d.classList.add(name);\n } else {\n if (name) {\n d.setAttribute(attribute, name);\n } else {\n d.removeAttribute(attribute);\n }\n }\n\n d.setAttribute('data-style', style);\n d.setAttribute('data-accent-color', accentColor);\n d.setAttribute('data-gray-color', grayColor);\n\n if (enableColorScheme) {\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;\n // @ts-ignore\n d.style.colorScheme = colorScheme;\n }\n\n enable?.();\n }, [style, accentColor, grayColor, attribute, attrs, value, enableSystem, enableColorScheme, defaultTheme]);\n\n const setTheme = useCallback(\n (theme: string) => {\n setThemeState(theme);\n\n // Save to storage\n try {\n localStorage.setItem(storageKey, theme);\n } catch (e) {\n // Unsupported\n }\n },\n [forcedTheme]\n );\n\n const handleMediaQuery = useCallback(\n (e: MediaQueryListEvent | MediaQueryList) => {\n const resolved = getSystemTheme(e);\n setResolvedTheme(resolved);\n\n if (theme === \"system\" && enableSystem && !forcedTheme) {\n applyTheme(\"system\");\n }\n },\n [theme, forcedTheme]\n );\n\n // Always listen to System preference\n useEffect(() => {\n const media = window.matchMedia(MEDIA);\n\n // Intentionally use deprecated listener methods to support iOS & old browsers\n media.addListener(handleMediaQuery);\n handleMediaQuery(media);\n\n return () => media.removeListener(handleMediaQuery);\n }, [handleMediaQuery]);\n\n // localStorage event handling\n useEffect(() => {\n const handleStorage = (e: StorageEvent) => {\n if (e.key !== storageKey) {\n return;\n }\n\n // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n const theme = e.newValue || defaultTheme;\n setTheme(theme);\n };\n\n window.addEventListener(\"storage\", handleStorage);\n return () => window.removeEventListener(\"storage\", handleStorage);\n }, [setTheme]);\n\n // Whenever theme or forcedTheme changes, apply it\n useEffect(() => {\n // @ts-ignore\n applyTheme(forcedTheme ?? theme);\n }, [forcedTheme, theme]);\n\n const providerValue = useMemo(\n () => ({\n theme,\n setTheme,\n forcedTheme,\n resolvedTheme: theme === \"system\" ? resolvedTheme : theme,\n themes: enableSystem ? [...themes, \"system\"] : themes,\n systemTheme: (enableSystem ? resolvedTheme : undefined) as\n | \"light\"\n | \"dark\"\n | undefined,\n style,\n accentColor,\n grayColor,\n }),\n [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes, style, accentColor, grayColor]\n );\n\n return (\n <ThemeContext.Provider value={providerValue}>\n <ThemeScript\n {...{\n forcedTheme,\n disableTransitionOnChange,\n enableSystem,\n enableColorScheme,\n storageKey,\n themes,\n defaultTheme,\n attribute,\n value,\n children,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }}\n />\n {children}\n </ThemeContext.Provider>\n );\n};\n\nconst ThemeScript = memo(\n ({\n forcedTheme,\n storageKey,\n attribute,\n enableSystem,\n enableColorScheme,\n defaultTheme,\n value,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n const defaultSystem = defaultTheme === \"system\";\n\n // Code-golfing the amount of characters in the script\n const optimization = (() => {\n if (attribute === \"class\") {\n const removeClasses = `c.remove(${attrs\n .map((t: string) => `'${t}'`)\n .join(\",\")})`;\n\n return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n } else {\n return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n }\n })();\n\n const fallbackColorScheme = (() => {\n if (!enableColorScheme) {\n return \"\";\n }\n\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n\n if (fallback) {\n return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n } else {\n return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n }\n })();\n\n const updateDOM = (\n name: string,\n literal: boolean = false,\n setColorScheme = true\n ) => {\n const resolvedName = value ? value[name] : name;\n const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n let text = \"\";\n\n // MUCH faster to set colorScheme alongside HTML attribute/class\n // as it only incurs 1 style recalculation rather than 2\n // This can save over 250ms of work for pages with big DOM\n if (\n enableColorScheme &&\n setColorScheme &&\n !literal &&\n colorSchemes.includes(name)\n ) {\n text += `d.style.colorScheme = '${name}';`;\n }\n\n if (attribute === \"class\") {\n if (literal || resolvedName) {\n text += `c.add(${val})`;\n } else {\n text += `null`;\n }\n } else {\n if (resolvedName) {\n text += `d[s](n,${val})`;\n }\n }\n\n return text;\n };\n\n const scriptSrc = (() => {\n if (forcedTheme) {\n return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n }\n\n if (enableSystem) {\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n \"dark\"\n )}}else{${updateDOM(\"light\")}}}else if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}${\n !defaultSystem\n ? `else{` + updateDOM(defaultTheme, false, false) + \"}\"\n : \"\"\n }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n }\n\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}else{${updateDOM(\n defaultTheme,\n false,\n false\n )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n })();\n\n return (\n <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n );\n },\n // Never re-render this component\n () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n if (isServer) return undefined;\n let theme;\n try {\n theme = localStorage.getItem(key) || undefined;\n } catch (e) {\n // Unsupported\n }\n return theme || fallback;\n};\n\nconst disableAnimation = () => {\n const css = document.createElement(\"style\");\n css.appendChild(\n document.createTextNode(\n `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n )\n );\n document.head.appendChild(css);\n\n return () => {\n // Force restyle\n (() => window.getComputedStyle(document.body))();\n\n // Wait for next tick before removing\n setTimeout(() => {\n document.head.removeChild(css);\n }, 1);\n };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n if (!e) e = window.matchMedia(MEDIA);\n const isDark = e.matches;\n const systemTheme = isDark ? \"dark\" : \"light\";\n return systemTheme;\n};\n"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"theme.js","sources":["../../../../v1/components/themprovider/theme.tsx"],"sourcesContent":["import React, {\n Fragment,\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport type { ThemeProviderProps, UseThemeProps } from \"./types\";\n\nconst colorSchemes = [\"light\", \"dark\"];\nconst MEDIA = \"(prefers-color-scheme: dark)\";\nconst isServer = typeof window === \"undefined\";\nconst ThemeContext = createContext<UseThemeProps | undefined>(undefined);\nconst defaultContext: UseThemeProps = { setTheme: (_) => {}, themes: [] };\n\nexport const useTheme = () => useContext(ThemeContext) ?? defaultContext;\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = (props) => {\n const context = useContext(ThemeContext);\n\n // Ignore nested context providers, just passthrough children\n if (context) return <Fragment>{props.children}</Fragment>;\n return <Theme {...props} />;\n};\n\nconst defaultThemes = [\"light\", \"dark\"];\n\nconst Theme: React.FC<ThemeProviderProps> = ({\n forcedTheme,\n disableTransitionOnChange = false,\n enableSystem = true,\n enableColorScheme = true,\n storageKey = \"theme\",\n themes = defaultThemes,\n defaultTheme = enableSystem ? \"system\" : \"light\",\n attribute = \"data-theme\",\n value,\n children,\n nonce,\n style = \"modern\",\n accentColor = \"indigo\",\n grayColor = \"slate\",\n}) => {\n const [theme, setThemeState] = useState(() =>\n getTheme(storageKey, defaultTheme)\n );\n const [resolvedTheme, setResolvedTheme] = useState(() =>\n getTheme(storageKey)\n );\n const attrs = !value ? themes : Object.values(value);\n\n const applyTheme = useCallback((theme: string) => {\n let resolved = theme;\n if (!resolved) return;\n\n // If theme is system, resolve it before setting theme\n if (theme === \"system\" && enableSystem) {\n resolved = getSystemTheme();\n }\n\n const name = value ? value[resolved] : resolved;\n const enable = disableTransitionOnChange ? disableAnimation() : null;\n const d = document.documentElement;\n\n if (attribute === \"class\") {\n d.classList.remove(...attrs);\n\n if (name) d.classList.add(name);\n } else {\n if (name) {\n d.setAttribute(attribute, name);\n } else {\n d.removeAttribute(attribute);\n }\n }\n\n d.setAttribute('data-style', style);\n d.setAttribute('data-accent-color', accentColor);\n d.setAttribute('data-gray-color', grayColor);\n\n if (enableColorScheme) {\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;\n // @ts-ignore\n d.style.colorScheme = colorScheme;\n }\n\n enable?.();\n }, [style, accentColor, grayColor, attribute, attrs, value, enableSystem, enableColorScheme, defaultTheme]);\n\n const setTheme = useCallback(\n (theme: string) => {\n setThemeState(theme);\n\n // Save to storage\n try {\n localStorage.setItem(storageKey, theme);\n } catch (e) {\n // Unsupported\n }\n },\n [forcedTheme]\n );\n\n const handleMediaQuery = useCallback(\n (e: MediaQueryListEvent | MediaQueryList) => {\n const resolved = getSystemTheme(e);\n setResolvedTheme(resolved);\n\n if (theme === \"system\" && enableSystem && !forcedTheme) {\n applyTheme(\"system\");\n }\n },\n [theme, forcedTheme]\n );\n\n // Always listen to System preference\n useEffect(() => {\n const media = window.matchMedia(MEDIA);\n\n media.addEventListener('change', handleMediaQuery);\n handleMediaQuery(media);\n\n return () => media.removeEventListener('change', handleMediaQuery);\n }, [handleMediaQuery]);\n\n // localStorage event handling\n useEffect(() => {\n const handleStorage = (e: StorageEvent) => {\n if (e.key !== storageKey) {\n return;\n }\n\n // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n const theme = e.newValue || defaultTheme;\n setTheme(theme);\n };\n\n window.addEventListener(\"storage\", handleStorage);\n return () => window.removeEventListener(\"storage\", handleStorage);\n }, [setTheme]);\n\n // Whenever theme or forcedTheme changes, apply it\n useEffect(() => {\n // @ts-ignore\n applyTheme(forcedTheme ?? theme);\n }, [forcedTheme, theme]);\n\n const providerValue = useMemo(\n () => ({\n theme,\n setTheme,\n forcedTheme,\n resolvedTheme: theme === \"system\" ? resolvedTheme : theme,\n themes: enableSystem ? [...themes, \"system\"] : themes,\n systemTheme: (enableSystem ? resolvedTheme : undefined) as\n | \"light\"\n | \"dark\"\n | undefined,\n style,\n accentColor,\n grayColor,\n }),\n [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes, style, accentColor, grayColor]\n );\n\n return (\n <ThemeContext.Provider value={providerValue}>\n <ThemeScript\n {...{\n forcedTheme,\n disableTransitionOnChange,\n enableSystem,\n enableColorScheme,\n storageKey,\n themes,\n defaultTheme,\n attribute,\n value,\n children,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }}\n />\n {children}\n </ThemeContext.Provider>\n );\n};\n\nconst ThemeScript = memo(\n ({\n forcedTheme,\n storageKey,\n attribute,\n enableSystem,\n enableColorScheme,\n defaultTheme,\n value,\n attrs,\n nonce,\n style,\n accentColor,\n grayColor,\n }: ThemeProviderProps & { attrs: string[]; defaultTheme: string }) => {\n const defaultSystem = defaultTheme === \"system\";\n\n // Code-golfing the amount of characters in the script\n const optimization = (() => {\n if (attribute === \"class\") {\n const removeClasses = `c.remove(${attrs\n .map((t: string) => `'${t}'`)\n .join(\",\")})`;\n\n return `var d=document.documentElement,c=d.classList;${removeClasses};`;\n } else {\n return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;\n }\n })();\n\n const fallbackColorScheme = (() => {\n if (!enableColorScheme) {\n return \"\";\n }\n\n const fallback = colorSchemes.includes(defaultTheme)\n ? defaultTheme\n : null;\n\n if (fallback) {\n return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;\n } else {\n return `if(e==='light'||e==='dark')d.style.colorScheme=e`;\n }\n })();\n\n const updateDOM = (\n name: string,\n literal: boolean = false,\n setColorScheme = true\n ) => {\n const resolvedName = value ? value[name] : name;\n const val = literal ? name + `|| ''` : `'${resolvedName}'`;\n let text = \"\";\n\n // MUCH faster to set colorScheme alongside HTML attribute/class\n // as it only incurs 1 style recalculation rather than 2\n // This can save over 250ms of work for pages with big DOM\n if (\n enableColorScheme &&\n setColorScheme &&\n !literal &&\n colorSchemes.includes(name)\n ) {\n text += `d.style.colorScheme = '${name}';`;\n }\n\n if (attribute === \"class\") {\n if (literal || resolvedName) {\n text += `c.add(${val})`;\n } else {\n text += `null`;\n }\n } else {\n if (resolvedName) {\n text += `d[s](n,${val})`;\n }\n }\n\n return text;\n };\n\n const scriptSrc = (() => {\n if (forcedTheme) {\n return `!function(){${optimization}${updateDOM(forcedTheme)};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}()`;\n }\n\n if (enableSystem) {\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM(\n \"dark\"\n )}}else{${updateDOM(\"light\")}}}else if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}${\n !defaultSystem\n ? `else{` + updateDOM(defaultTheme, false, false) + \"}\"\n : \"\"\n }${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(e){}}()`;\n }\n\n return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${\n value ? `var x=${JSON.stringify(value)};` : \"\"\n }${updateDOM(value ? `x[e]` : \"e\", true)}}else{${updateDOM(\n defaultTheme,\n false,\n false\n )};}${fallbackColorScheme};d.setAttribute('data-style','${style}');d.setAttribute('data-accent-color','${accentColor}');d.setAttribute('data-gray-color','${grayColor}');}catch(t){}}();`;\n })();\n\n return (\n <script nonce={nonce} dangerouslySetInnerHTML={{ __html: scriptSrc }} />\n );\n },\n // Never re-render this component\n () => true\n);\n\n// Helpers\nconst getTheme = (key: string, fallback?: string) => {\n if (isServer) return undefined;\n let theme;\n try {\n theme = localStorage.getItem(key) || undefined;\n } catch (e) {\n // Unsupported\n }\n return theme || fallback;\n};\n\nconst disableAnimation = () => {\n const css = document.createElement(\"style\");\n css.appendChild(\n document.createTextNode(\n `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n )\n );\n document.head.appendChild(css);\n\n return () => {\n // Force restyle\n (() => window.getComputedStyle(document.body))();\n\n // Wait for next tick before removing\n setTimeout(() => {\n document.head.removeChild(css);\n }, 1);\n };\n};\n\nconst getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => {\n if (!e) e = window.matchMedia(MEDIA);\n const isDark = e.matches;\n const systemTheme = isDark ? \"dark\" : \"light\";\n return systemTheme;\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ const ToastContainer = (props) => {
|
|
|
11
11
|
return (jsxRuntime.jsxRuntimeExports.jsx(index.Toaster, { theme: resolvedTheme, className: toast_module.default["raystack-toast"], ...props }));
|
|
12
12
|
};
|
|
13
13
|
const toast = Object.assign((message, options) => {
|
|
14
|
-
index.toast(jsxRuntime.jsxRuntimeExports.jsx("div", {
|
|
14
|
+
index.toast(jsxRuntime.jsxRuntimeExports.jsx("div", { className: toast_module.default["toast-wrapper"], children: message }), options);
|
|
15
15
|
}, index.toast);
|
|
16
16
|
toast.displayName = "toast";
|
|
17
17
|
ToastContainer.displayName = "ToastContainer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.cjs","sources":["../../../../v1/components/toast/toast.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { Toaster, type ToasterProps, toast as sonnerToast } from \"sonner\";\nimport { useTheme } from \"../themprovider\";\nimport { UseThemeProps } from \"../themprovider/types\";\nimport styles from \"./toast.module.css\";\n\ninterface ToastContainerProps extends ToasterProps {}\n\nconst ToastContainer = (props: ToastContainerProps) => {\n const { resolvedTheme } = useTheme();\n \n return (\n <Toaster \n theme={resolvedTheme as UseThemeProps['systemTheme']} \n className={styles[\"raystack-toast\"]}\n {...props} \n />\n );\n};\n\nconst toast: typeof sonnerToast = Object.assign(\n (message: string | ReactNode, options?: ToasterProps) => {\n sonnerToast(\n <div
|
|
1
|
+
{"version":3,"file":"toast.cjs","sources":["../../../../v1/components/toast/toast.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { Toaster, type ToasterProps, toast as sonnerToast } from \"sonner\";\nimport { useTheme } from \"../themprovider\";\nimport { UseThemeProps } from \"../themprovider/types\";\nimport styles from \"./toast.module.css\";\n\ninterface ToastContainerProps extends ToasterProps {}\n\nconst ToastContainer = (props: ToastContainerProps) => {\n const { resolvedTheme } = useTheme();\n \n return (\n <Toaster \n theme={resolvedTheme as UseThemeProps['systemTheme']} \n className={styles[\"raystack-toast\"]}\n {...props} \n />\n );\n};\n\nconst toast: typeof sonnerToast = Object.assign(\n (message: string | ReactNode, options?: ToasterProps) => {\n sonnerToast(\n <div className={styles[\"toast-wrapper\"]}>\n {message}\n </div>,\n options\n );\n },\n sonnerToast\n);\n\n(toast as typeof toast & { displayName: string }).displayName = \"toast\";\n\nToastContainer.displayName = \"ToastContainer\";\n\nexport { ToastContainer, toast };\n"],"names":["useTheme","_jsx","Toaster","styles","sonnerToast"],"mappings":";;;;;;;;AAQA,MAAM,cAAc,GAAG,CAAC,KAA0B,KAAI;AACpD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGA,cAAQ,EAAE,CAAC;AAErC,IAAA,QACEC,gCAAC,CAAAC,aAAO,IACN,KAAK,EAAE,aAA6C,EACpD,SAAS,EAAEC,oBAAM,CAAC,gBAAgB,CAAC,KAC/B,KAAK,EAAA,CACT,EACF;AACJ,EAAE;AAEI,MAAA,KAAK,GAAuB,MAAM,CAAC,MAAM,CAC7C,CAAC,OAA2B,EAAE,OAAsB,KAAI;AACtD,IAAAC,WAAW,CACTH,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,oBAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EACpC,OAAO,EAAA,CACJ,EACN,OAAO,CACR,CAAC;AACJ,CAAC,EACDC,WAAW,EACX;AAED,KAAgD,CAAC,WAAW,GAAG,OAAO,CAAC;AAExE,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;;"}
|
|
@@ -9,7 +9,7 @@ const ToastContainer = (props) => {
|
|
|
9
9
|
return (jsxRuntimeExports.jsx(Te, { theme: resolvedTheme, className: styles["raystack-toast"], ...props }));
|
|
10
10
|
};
|
|
11
11
|
const toast = Object.assign((message, options) => {
|
|
12
|
-
Jt(jsxRuntimeExports.jsx("div", {
|
|
12
|
+
Jt(jsxRuntimeExports.jsx("div", { className: styles["toast-wrapper"], children: message }), options);
|
|
13
13
|
}, Jt);
|
|
14
14
|
toast.displayName = "toast";
|
|
15
15
|
ToastContainer.displayName = "ToastContainer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","sources":["../../../../v1/components/toast/toast.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { Toaster, type ToasterProps, toast as sonnerToast } from \"sonner\";\nimport { useTheme } from \"../themprovider\";\nimport { UseThemeProps } from \"../themprovider/types\";\nimport styles from \"./toast.module.css\";\n\ninterface ToastContainerProps extends ToasterProps {}\n\nconst ToastContainer = (props: ToastContainerProps) => {\n const { resolvedTheme } = useTheme();\n \n return (\n <Toaster \n theme={resolvedTheme as UseThemeProps['systemTheme']} \n className={styles[\"raystack-toast\"]}\n {...props} \n />\n );\n};\n\nconst toast: typeof sonnerToast = Object.assign(\n (message: string | ReactNode, options?: ToasterProps) => {\n sonnerToast(\n <div
|
|
1
|
+
{"version":3,"file":"toast.js","sources":["../../../../v1/components/toast/toast.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { Toaster, type ToasterProps, toast as sonnerToast } from \"sonner\";\nimport { useTheme } from \"../themprovider\";\nimport { UseThemeProps } from \"../themprovider/types\";\nimport styles from \"./toast.module.css\";\n\ninterface ToastContainerProps extends ToasterProps {}\n\nconst ToastContainer = (props: ToastContainerProps) => {\n const { resolvedTheme } = useTheme();\n \n return (\n <Toaster \n theme={resolvedTheme as UseThemeProps['systemTheme']} \n className={styles[\"raystack-toast\"]}\n {...props} \n />\n );\n};\n\nconst toast: typeof sonnerToast = Object.assign(\n (message: string | ReactNode, options?: ToasterProps) => {\n sonnerToast(\n <div className={styles[\"toast-wrapper\"]}>\n {message}\n </div>,\n options\n );\n },\n sonnerToast\n);\n\n(toast as typeof toast & { displayName: string }).displayName = \"toast\";\n\nToastContainer.displayName = \"ToastContainer\";\n\nexport { ToastContainer, toast };\n"],"names":["_jsx","Toaster","sonnerToast"],"mappings":";;;;;;AAQA,MAAM,cAAc,GAAG,CAAC,KAA0B,KAAI;AACpD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE,CAAC;AAErC,IAAA,QACEA,qBAAC,CAAAC,EAAO,IACN,KAAK,EAAE,aAA6C,EACpD,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,KAC/B,KAAK,EAAA,CACT,EACF;AACJ,EAAE;AAEI,MAAA,KAAK,GAAuB,MAAM,CAAC,MAAM,CAC7C,CAAC,OAA2B,EAAE,OAAsB,KAAI;AACtD,IAAAC,EAAW,CACTF,qBAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAA,QAAA,EACpC,OAAO,EAAA,CACJ,EACN,OAAO,CACR,CAAC;AACJ,CAAC,EACDE,EAAW,EACX;AAED,KAAgD,CAAC,WAAW,GAAG,OAAO,CAAC;AAExE,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"raystack-toast":"toast-module_raystack-toast__qV-QW","raystack___toast":"toast-module_raystack-toast__qV-QW"};
|
|
5
|
+
var styles = {"raystack-toast":"toast-module_raystack-toast__qV-QW","toast-wrapper":"toast-module_toast-wrapper__DKQbj","raystack___toast":"toast-module_raystack-toast__qV-QW","toast___wrapper":"toast-module_toast-wrapper__DKQbj"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=toast.module.css.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"raystack-toast":"toast-module_raystack-toast__qV-QW","raystack___toast":"toast-module_raystack-toast__qV-QW"};
|
|
1
|
+
var styles = {"raystack-toast":"toast-module_raystack-toast__qV-QW","toast-wrapper":"toast-module_toast-wrapper__DKQbj","raystack___toast":"toast-module_raystack-toast__qV-QW","toast___wrapper":"toast-module_toast-wrapper__DKQbj"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=toast.module.css.js.map
|
package/dist/v1/index.cjs
CHANGED
|
@@ -6,6 +6,12 @@ var Spinner = require('./components/spinner/Spinner.cjs');
|
|
|
6
6
|
var avatar = require('./components/avatar/avatar.cjs');
|
|
7
7
|
var toast = require('./components/toast/toast.cjs');
|
|
8
8
|
var dropdownMenu = require('./components/dropdownMenu/dropdownMenu.cjs');
|
|
9
|
+
var text = require('./components/text/text.cjs');
|
|
10
|
+
var flex = require('./components/flex/flex.cjs');
|
|
11
|
+
var emptystate = require('./components/emptystate/emptystate.cjs');
|
|
12
|
+
var checkbox = require('./components/checkbox/checkbox.cjs');
|
|
13
|
+
var switcher = require('./components/themprovider/switcher.cjs');
|
|
14
|
+
var theme = require('./components/themprovider/theme.cjs');
|
|
9
15
|
|
|
10
16
|
|
|
11
17
|
|
|
@@ -17,4 +23,11 @@ exports.AvatarGroup = avatar.AvatarGroup;
|
|
|
17
23
|
exports.ToastContainer = toast.ToastContainer;
|
|
18
24
|
exports.toast = toast.toast;
|
|
19
25
|
exports.DropdownMenu = dropdownMenu.DropdownMenu;
|
|
26
|
+
exports.Text = text.Text;
|
|
27
|
+
exports.Flex = flex.Flex;
|
|
28
|
+
exports.EmptyState = emptystate.EmptyState;
|
|
29
|
+
exports.Checkbox = checkbox.Checkbox;
|
|
30
|
+
exports.ThemeSwitcher = switcher.ThemeSwitcher;
|
|
31
|
+
exports.ThemeProvider = theme.ThemeProvider;
|
|
32
|
+
exports.useTheme = theme.useTheme;
|
|
20
33
|
//# sourceMappingURL=index.cjs.map
|