@trebired/frontend 0.4.2 → 0.5.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/CHANGELOG.md +9 -0
- package/README.md +61 -1
- package/dist/config/index.d.ts +6 -45
- package/dist/config/index.d.ts.map +1 -1
- package/dist/config/index.js +19 -252
- package/dist/config/index.js.map +1 -1
- package/dist/config/module.d.ts +5 -0
- package/dist/config/module.d.ts.map +1 -0
- package/dist/config/module.js +124 -0
- package/dist/config/module.js.map +1 -0
- package/dist/config/normalize.d.ts +10 -0
- package/dist/config/normalize.d.ts.map +1 -0
- package/dist/config/normalize.js +105 -0
- package/dist/config/normalize.js.map +1 -0
- package/dist/config/scss.d.ts +4 -0
- package/dist/config/scss.d.ts.map +1 -0
- package/dist/config/scss.js +84 -0
- package/dist/config/scss.js.map +1 -0
- package/dist/config/shared.d.ts +9 -0
- package/dist/config/shared.d.ts.map +1 -0
- package/dist/config/shared.js +27 -0
- package/dist/config/shared.js.map +1 -0
- package/dist/config/theme.d.ts +6 -0
- package/dist/config/theme.d.ts.map +1 -0
- package/dist/config/theme.js +133 -0
- package/dist/config/theme.js.map +1 -0
- package/dist/config/types.d.ts +62 -0
- package/dist/config/types.d.ts.map +1 -0
- package/dist/config/types.js +2 -0
- package/dist/config/types.js.map +1 -0
- package/dist/src/config/index.d.ts +6 -45
- package/dist/src/config/index.d.ts.map +1 -1
- package/dist/src/config/index.js +19 -252
- package/dist/src/config/index.js.map +1 -1
- package/dist/src/config/module.d.ts +5 -0
- package/dist/src/config/module.d.ts.map +1 -0
- package/dist/src/config/module.js +124 -0
- package/dist/src/config/module.js.map +1 -0
- package/dist/src/config/normalize.d.ts +10 -0
- package/dist/src/config/normalize.d.ts.map +1 -0
- package/dist/src/config/normalize.js +105 -0
- package/dist/src/config/normalize.js.map +1 -0
- package/dist/src/config/scss.d.ts +4 -0
- package/dist/src/config/scss.d.ts.map +1 -0
- package/dist/src/config/scss.js +84 -0
- package/dist/src/config/scss.js.map +1 -0
- package/dist/src/config/shared.d.ts +9 -0
- package/dist/src/config/shared.d.ts.map +1 -0
- package/dist/src/config/shared.js +27 -0
- package/dist/src/config/shared.js.map +1 -0
- package/dist/src/config/theme.d.ts +6 -0
- package/dist/src/config/theme.d.ts.map +1 -0
- package/dist/src/config/theme.js +133 -0
- package/dist/src/config/theme.js.map +1 -0
- package/dist/src/config/types.d.ts +62 -0
- package/dist/src/config/types.d.ts.map +1 -0
- package/dist/src/config/types.js +2 -0
- package/dist/src/config/types.js.map +1 -0
- package/dist/src/theme/apply.d.ts +26 -0
- package/dist/src/theme/apply.d.ts.map +1 -0
- package/dist/src/theme/apply.js +85 -0
- package/dist/src/theme/apply.js.map +1 -0
- package/dist/src/theme/boot.d.ts +4 -0
- package/dist/src/theme/boot.d.ts.map +1 -0
- package/dist/src/theme/boot.js +23 -0
- package/dist/src/theme/boot.js.map +1 -0
- package/dist/src/theme/components/index.d.ts +13 -5
- package/dist/src/theme/components/index.d.ts.map +1 -1
- package/dist/src/theme/components/index.js +22 -6
- package/dist/src/theme/components/index.js.map +1 -1
- package/dist/src/theme/constants.d.ts +12 -0
- package/dist/src/theme/constants.d.ts.map +1 -0
- package/dist/src/theme/constants.js +12 -0
- package/dist/src/theme/constants.js.map +1 -0
- package/dist/src/theme/controls.d.ts +15 -0
- package/dist/src/theme/controls.d.ts.map +1 -0
- package/dist/src/theme/controls.js +128 -0
- package/dist/src/theme/controls.js.map +1 -0
- package/dist/src/theme/index.d.ts +10 -24
- package/dist/src/theme/index.d.ts.map +1 -1
- package/dist/src/theme/index.js +15 -117
- package/dist/src/theme/index.js.map +1 -1
- package/dist/src/theme/modes.d.ts +36 -0
- package/dist/src/theme/modes.d.ts.map +1 -0
- package/dist/src/theme/modes.js +107 -0
- package/dist/src/theme/modes.js.map +1 -0
- package/dist/theme/apply.d.ts +26 -0
- package/dist/theme/apply.d.ts.map +1 -0
- package/dist/theme/apply.js +85 -0
- package/dist/theme/apply.js.map +1 -0
- package/dist/theme/boot.d.ts +4 -0
- package/dist/theme/boot.d.ts.map +1 -0
- package/dist/theme/boot.js +23 -0
- package/dist/theme/boot.js.map +1 -0
- package/dist/theme/components/index.d.ts +13 -5
- package/dist/theme/components/index.d.ts.map +1 -1
- package/dist/theme/components/index.js +22 -6
- package/dist/theme/components/index.js.map +1 -1
- package/dist/theme/constants.d.ts +12 -0
- package/dist/theme/constants.d.ts.map +1 -0
- package/dist/theme/constants.js +12 -0
- package/dist/theme/constants.js.map +1 -0
- package/dist/theme/controls.d.ts +15 -0
- package/dist/theme/controls.d.ts.map +1 -0
- package/dist/theme/controls.js +128 -0
- package/dist/theme/controls.js.map +1 -0
- package/dist/theme/index.d.ts +10 -24
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +15 -117
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/modes.d.ts +36 -0
- package/dist/theme/modes.d.ts.map +1 -0
- package/dist/theme/modes.js +107 -0
- package/dist/theme/modes.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { THEME_ATTR, THEME_CHANGE_EVENT } from "./constants.js";
|
|
2
|
+
import { findThemeMode, getThemeModes, themeModeKeyOf } from "./modes.js";
|
|
3
|
+
const themeSyncListeners = new Set();
|
|
4
|
+
function registerThemeSync(listener) {
|
|
5
|
+
themeSyncListeners.add(listener);
|
|
6
|
+
}
|
|
7
|
+
function runThemeSync(root = document) {
|
|
8
|
+
themeSyncListeners.forEach((listener) => listener(root));
|
|
9
|
+
}
|
|
10
|
+
function normalizeTheme(value, options = {}) {
|
|
11
|
+
const key = themeModeKeyOf(value);
|
|
12
|
+
return key && findThemeMode(key, options) ? key : "";
|
|
13
|
+
}
|
|
14
|
+
function systemPrefersLight() {
|
|
15
|
+
try {
|
|
16
|
+
return Boolean(window.matchMedia?.("(prefers-color-scheme: light)").matches);
|
|
17
|
+
}
|
|
18
|
+
catch {
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
function systemThemeKey(options = {}) {
|
|
23
|
+
const registry = getThemeModes(options);
|
|
24
|
+
return systemPrefersLight() ? registry.light : registry.dark;
|
|
25
|
+
}
|
|
26
|
+
function currentDomTheme(options = {}) {
|
|
27
|
+
if (typeof document === "undefined")
|
|
28
|
+
return "";
|
|
29
|
+
return normalizeTheme(document.documentElement.getAttribute(THEME_ATTR), options);
|
|
30
|
+
}
|
|
31
|
+
function getEffectiveTheme(value, options = {}) {
|
|
32
|
+
return normalizeTheme(value, options) || currentDomTheme(options) || systemThemeKey(options);
|
|
33
|
+
}
|
|
34
|
+
function themeScheme(key, options = {}) {
|
|
35
|
+
return findThemeMode(key, options)?.scheme || "light";
|
|
36
|
+
}
|
|
37
|
+
function dispatchThemeChange(theme, themeKey) {
|
|
38
|
+
if (typeof window === "undefined")
|
|
39
|
+
return;
|
|
40
|
+
window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
|
|
41
|
+
detail: { theme, themeKey },
|
|
42
|
+
}));
|
|
43
|
+
}
|
|
44
|
+
function applyTheme(theme, options = {}) {
|
|
45
|
+
if (typeof document === "undefined")
|
|
46
|
+
return getEffectiveTheme(theme, options);
|
|
47
|
+
const normalized = normalizeTheme(theme, options);
|
|
48
|
+
const next = normalized || systemThemeKey(options);
|
|
49
|
+
const previous = currentDomTheme(options);
|
|
50
|
+
document.documentElement.setAttribute(THEME_ATTR, next);
|
|
51
|
+
document.documentElement.style.colorScheme = themeScheme(next, options);
|
|
52
|
+
document.body?.setAttribute(THEME_ATTR, next);
|
|
53
|
+
if (previous !== next)
|
|
54
|
+
dispatchThemeChange(normalized, next);
|
|
55
|
+
runThemeSync(document);
|
|
56
|
+
return next;
|
|
57
|
+
}
|
|
58
|
+
async function readPersistedTheme(adapter, options = {}) {
|
|
59
|
+
if (!adapter?.get)
|
|
60
|
+
return "";
|
|
61
|
+
try {
|
|
62
|
+
return normalizeTheme(await adapter.get(), options);
|
|
63
|
+
}
|
|
64
|
+
catch {
|
|
65
|
+
return "";
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
async function setTheme(theme, options = {}) {
|
|
69
|
+
const normalized = normalizeTheme(theme, options);
|
|
70
|
+
applyTheme(normalized, options);
|
|
71
|
+
if (options.persistence?.set) {
|
|
72
|
+
try {
|
|
73
|
+
await options.persistence.set(normalized);
|
|
74
|
+
}
|
|
75
|
+
catch { }
|
|
76
|
+
}
|
|
77
|
+
return getEffectiveTheme(normalized, options);
|
|
78
|
+
}
|
|
79
|
+
function nextTheme(options = {}) {
|
|
80
|
+
const keys = getThemeModes(options).modes.map((mode) => mode.key);
|
|
81
|
+
const index = keys.indexOf(getEffectiveTheme(undefined, options));
|
|
82
|
+
return keys[(index + 1) % keys.length] || keys[0];
|
|
83
|
+
}
|
|
84
|
+
export { applyTheme, currentDomTheme, getEffectiveTheme, nextTheme, normalizeTheme, readPersistedTheme, registerThemeSync, runThemeSync, setTheme, systemThemeKey, themeScheme, };
|
|
85
|
+
//# sourceMappingURL=apply.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"apply.js","sourceRoot":"","sources":["../../../src/theme/apply.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"boot.d.ts","sourceRoot":"","sources":["../../../src/theme/boot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAMnD,iBAAS,qBAAqB,CAAC,KAAK,GAAE,MAAW,EAAE,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAezF;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { THEME_ATTR, THEME_MODES_GLOBAL_KEY } from "./constants.js";
|
|
2
|
+
import { getThemeModes, themeModeKeyOf } from "./modes.js";
|
|
3
|
+
function scriptJson(value) {
|
|
4
|
+
return JSON.stringify(value ?? null).replace(/</gu, "\\u003c");
|
|
5
|
+
}
|
|
6
|
+
function createThemeBootScript(theme = "", options = {}) {
|
|
7
|
+
const registry = getThemeModes(options);
|
|
8
|
+
const schemes = Object.fromEntries(registry.modes.map((mode) => [mode.key, mode.scheme]));
|
|
9
|
+
return [
|
|
10
|
+
"(function(){",
|
|
11
|
+
`var r=${scriptJson(registry)},s=${scriptJson(schemes)};`,
|
|
12
|
+
`try{window[Symbol.for(${scriptJson(THEME_MODES_GLOBAL_KEY)})]=r}catch(e){}`,
|
|
13
|
+
`var t=${scriptJson(themeModeKeyOf(theme))};`,
|
|
14
|
+
"if(!s[t])t='';",
|
|
15
|
+
"var p=false;try{p=!!(window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches)}catch(e){}",
|
|
16
|
+
"var k=t||(p?r.light:r.dark);",
|
|
17
|
+
`document.documentElement.setAttribute(${scriptJson(THEME_ATTR)},k);`,
|
|
18
|
+
"document.documentElement.style.colorScheme=s[k]||'light';",
|
|
19
|
+
"})();",
|
|
20
|
+
].join("");
|
|
21
|
+
}
|
|
22
|
+
export { createThemeBootScript };
|
|
23
|
+
//# sourceMappingURL=boot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"boot.js","sourceRoot":"","sources":["../../../src/theme/boot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG3D,SAAS,UAAU,CAAC,KAAc;IAChC,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;AACjE,CAAC;AAED,SAAS,qBAAqB,CAAC,QAAgB,EAAE,EAAE,UAA4B,EAAE;IAC/E,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1F,OAAO;QACL,cAAc;QACd,SAAS,UAAU,CAAC,QAAQ,CAAC,MAAM,UAAU,CAAC,OAAO,CAAC,GAAG;QACzD,yBAAyB,UAAU,CAAC,sBAAsB,CAAC,iBAAiB;QAC5E,SAAS,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,GAAG;QAC7C,gBAAgB;QAChB,gHAAgH;QAChH,8BAA8B;QAC9B,yCAAyC,UAAU,CAAC,UAAU,CAAC,MAAM;QACrE,2DAA2D;QAC3D,OAAO;KACR,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
|
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
import type { ButtonHTMLAttributes, ScriptHTMLAttributes } from "react";
|
|
2
|
-
import { type ThemeValue } from "../index.d.ts";
|
|
1
|
+
import type { ButtonHTMLAttributes, HTMLAttributes, ScriptHTMLAttributes } from "react";
|
|
2
|
+
import { type ThemeModeOptions, type ThemeValue } from "../index.d.ts";
|
|
3
3
|
type ThemeToggleProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
4
4
|
darkLabel?: string;
|
|
5
|
+
labels?: Record<string, string>;
|
|
5
6
|
lightLabel?: string;
|
|
6
7
|
};
|
|
7
|
-
type ThemeBootScriptProps = ScriptHTMLAttributes<HTMLScriptElement> & {
|
|
8
|
+
type ThemeBootScriptProps = ScriptHTMLAttributes<HTMLScriptElement> & ThemeModeOptions & {
|
|
8
9
|
theme?: ThemeValue;
|
|
9
10
|
};
|
|
11
|
+
type ThemeSelectProps = Omit<HTMLAttributes<HTMLElement>, "defaultValue"> & ThemeModeOptions & {
|
|
12
|
+
label?: string;
|
|
13
|
+
name?: string;
|
|
14
|
+
value?: ThemeValue;
|
|
15
|
+
variant?: "buttons" | "select";
|
|
16
|
+
};
|
|
10
17
|
declare function ThemeToggle(props: ThemeToggleProps): import("react").JSX.Element;
|
|
18
|
+
declare function ThemeSelect(props: ThemeSelectProps): import("react").JSX.Element;
|
|
11
19
|
declare function ThemeBootScript(props: ThemeBootScriptProps): import("react").JSX.Element;
|
|
12
|
-
export { ThemeBootScript, ThemeToggle };
|
|
13
|
-
export type { ThemeBootScriptProps, ThemeToggleProps };
|
|
20
|
+
export { ThemeBootScript, ThemeSelect, ThemeToggle };
|
|
21
|
+
export type { ThemeBootScriptProps, ThemeSelectProps, ThemeToggleProps };
|
|
14
22
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,oBAAoB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,GAAG;IACvF,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,cAAc,CAAC,GAAG,gBAAgB,GAAG;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC,CAAC;AAUF,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAuB3C;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA2C3C;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAQnD;AAED,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,13 +1,29 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { classNames } from "../../components/index.js";
|
|
3
|
-
import { createThemeBootScript } from "../index.js";
|
|
3
|
+
import { createThemeBootScript, getThemeModes, normalizeTheme, } from "../index.js";
|
|
4
|
+
function themeLabelAttributes(labels) {
|
|
5
|
+
const attributes = {};
|
|
6
|
+
for (const [key, label] of Object.entries(labels || {})) {
|
|
7
|
+
attributes[`data-tbf-theme-${key}-label`] = label;
|
|
8
|
+
}
|
|
9
|
+
return attributes;
|
|
10
|
+
}
|
|
4
11
|
function ThemeToggle(props) {
|
|
5
|
-
const { children, className, darkLabel = "Dark", lightLabel = "Light", type = "button", ...rest } = props;
|
|
6
|
-
return (_jsx("button", { ...rest, className: classNames("tbf-theme-button", className), "data-tbf-theme-button": "", "data-tbf-theme-dark-label": darkLabel, "data-tbf-theme-light-label": lightLabel, type: type, children: children || _jsx("span", { "data-tbf-theme-label": "", children: lightLabel }) }));
|
|
12
|
+
const { children, className, darkLabel = "Dark", labels, lightLabel = "Light", type = "button", ...rest } = props;
|
|
13
|
+
return (_jsx("button", { ...rest, ...themeLabelAttributes(labels), className: classNames("tbf-theme-button", className), "data-tbf-theme-button": "", "data-tbf-theme-dark-label": darkLabel, "data-tbf-theme-light-label": lightLabel, type: type, children: children || _jsx("span", { "data-tbf-theme-label": "", children: lightLabel }) }));
|
|
14
|
+
}
|
|
15
|
+
function ThemeSelect(props) {
|
|
16
|
+
const { className, dark, label, light, modes, name, value, variant = "select", ...rest } = props;
|
|
17
|
+
const registry = getThemeModes({ dark, light, modes });
|
|
18
|
+
const current = normalizeTheme(value, { dark, light, modes });
|
|
19
|
+
if (variant === "buttons") {
|
|
20
|
+
return (_jsx("div", { ...rest, "aria-label": label, className: classNames("tbf-theme-select", className), "data-tbf-theme-select": "", role: "radiogroup", children: registry.modes.map((mode) => (_jsx("button", { "aria-checked": mode.key === current, className: "tbf-theme-select__option", "data-tbf-theme-active": mode.key === current ? "true" : "false", "data-tbf-theme-value": mode.key, role: "radio", type: "button", children: mode.label }, mode.key))) }));
|
|
21
|
+
}
|
|
22
|
+
return (_jsx("select", { ...rest, "aria-label": label, className: classNames("tbf-theme-select", className), "data-tbf-theme-select": "", defaultValue: current || undefined, name: name, children: registry.modes.map((mode) => (_jsx("option", { value: mode.key, children: mode.label }, mode.key))) }));
|
|
7
23
|
}
|
|
8
24
|
function ThemeBootScript(props) {
|
|
9
|
-
const { theme = "", ...rest } = props;
|
|
10
|
-
return (_jsx("script", { ...rest, dangerouslySetInnerHTML: { __html: createThemeBootScript(theme) } }));
|
|
25
|
+
const { dark, light, modes, theme = "", ...rest } = props;
|
|
26
|
+
return (_jsx("script", { ...rest, dangerouslySetInnerHTML: { __html: createThemeBootScript(theme, { dark, light, modes }) } }));
|
|
11
27
|
}
|
|
12
|
-
export { ThemeBootScript, ThemeToggle };
|
|
28
|
+
export { ThemeBootScript, ThemeSelect, ThemeToggle };
|
|
13
29
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/theme/components/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/theme/components/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
declare const THEME_ATTR = "data-tbf-theme";
|
|
2
|
+
declare const THEME_BOUND_ATTR = "data-tbf-theme-bound";
|
|
3
|
+
declare const THEME_CURRENT_ATTR = "data-tbf-theme-current";
|
|
4
|
+
declare const THEME_VALUE_ATTR = "data-tbf-theme-value";
|
|
5
|
+
declare const THEME_CHANGE_EVENT = "tbf:themechange";
|
|
6
|
+
declare const THEME_MODES_GLOBAL_KEY = "tbf.frontend.theme.modes";
|
|
7
|
+
declare const THEME_TOGGLE_SELECTOR = "[data-tbf-theme-button]";
|
|
8
|
+
declare const THEME_SELECT_SELECTOR = "[data-tbf-theme-select]";
|
|
9
|
+
declare const THEME_OPTION_SELECTOR = "[data-tbf-theme-value]";
|
|
10
|
+
declare const THEME_LABEL_SELECTOR = "[data-tbf-theme-label]";
|
|
11
|
+
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_LABEL_SELECTOR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
12
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,UAAU,mBAAmB,CAAC;AACpC,QAAA,MAAM,gBAAgB,yBAAyB,CAAC;AAChD,QAAA,MAAM,kBAAkB,2BAA2B,CAAC;AACpD,QAAA,MAAM,gBAAgB,yBAAyB,CAAC;AAChD,QAAA,MAAM,kBAAkB,oBAAoB,CAAC;AAC7C,QAAA,MAAM,sBAAsB,6BAA6B,CAAC;AAC1D,QAAA,MAAM,qBAAqB,4BAA4B,CAAC;AACxD,QAAA,MAAM,qBAAqB,4BAA4B,CAAC;AACxD,QAAA,MAAM,qBAAqB,2BAA2B,CAAC;AACvD,QAAA,MAAM,oBAAoB,2BAA2B,CAAC;AAEtD,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const THEME_ATTR = "data-tbf-theme";
|
|
2
|
+
const THEME_BOUND_ATTR = "data-tbf-theme-bound";
|
|
3
|
+
const THEME_CURRENT_ATTR = "data-tbf-theme-current";
|
|
4
|
+
const THEME_VALUE_ATTR = "data-tbf-theme-value";
|
|
5
|
+
const THEME_CHANGE_EVENT = "tbf:themechange";
|
|
6
|
+
const THEME_MODES_GLOBAL_KEY = "tbf.frontend.theme.modes";
|
|
7
|
+
const THEME_TOGGLE_SELECTOR = "[data-tbf-theme-button]";
|
|
8
|
+
const THEME_SELECT_SELECTOR = "[data-tbf-theme-select]";
|
|
9
|
+
const THEME_OPTION_SELECTOR = "[data-tbf-theme-value]";
|
|
10
|
+
const THEME_LABEL_SELECTOR = "[data-tbf-theme-label]";
|
|
11
|
+
export { THEME_ATTR, THEME_BOUND_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_LABEL_SELECTOR, THEME_MODES_GLOBAL_KEY, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, };
|
|
12
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/theme/constants.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;AAChD,MAAM,kBAAkB,GAAG,wBAAwB,CAAC;AACpD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;AAChD,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;AAC7C,MAAM,sBAAsB,GAAG,0BAA0B,CAAC;AAC1D,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AACxD,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AACxD,MAAM,qBAAqB,GAAG,wBAAwB,CAAC;AACvD,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAEtD,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type BindRoot } from "../dom/index.d.ts";
|
|
2
|
+
import type { ThemeRuntimeOptions } from "./apply.js";
|
|
3
|
+
declare const THEME_ACTIVE_ATTR = "data-tbf-theme-active";
|
|
4
|
+
declare function syncThemeToggle(button: HTMLElement, options?: ThemeRuntimeOptions): void;
|
|
5
|
+
declare function syncThemeSelect(element: HTMLElement, options?: ThemeRuntimeOptions): void;
|
|
6
|
+
declare function syncThemeToggles(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
7
|
+
declare function syncThemeSelects(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
8
|
+
declare function syncThemeControls(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
9
|
+
declare function bindThemeToggle(button: HTMLElement | null, options?: ThemeRuntimeOptions): boolean;
|
|
10
|
+
declare function bindThemeSelect(element: HTMLElement | null, options?: ThemeRuntimeOptions): boolean;
|
|
11
|
+
declare function bindThemeToggles(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
12
|
+
declare function bindThemeSelects(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
13
|
+
declare function bindThemeControls(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
14
|
+
export { THEME_ACTIVE_ATTR, bindThemeControls, bindThemeSelect, bindThemeSelects, bindThemeToggle, bindThemeToggles, syncThemeControls, syncThemeSelect, syncThemeSelects, syncThemeToggle, syncThemeToggles, };
|
|
15
|
+
//# sourceMappingURL=controls.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../src/theme/controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAWxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGtD,QAAA,MAAM,iBAAiB,0BAA0B,CAAC;AAmBlD,iBAAS,eAAe,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAarF;AAYD,iBAAS,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAUtF;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAE5F;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAE5F;AAED,iBAAS,iBAAiB,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAG7F;AASD,iBAAS,eAAe,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAS/F;AASD,iBAAS,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAahG;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAI5F;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAI5F;AAED,iBAAS,iBAAiB,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,mBAAwB,GAAG,IAAI,CAG7F;AAED,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,CAAC"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { queryAll } from "../dom/index.js";
|
|
2
|
+
import { THEME_BOUND_ATTR, THEME_CURRENT_ATTR, THEME_LABEL_SELECTOR, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, } from "./constants.js";
|
|
3
|
+
import { getEffectiveTheme, nextTheme, registerThemeSync, setTheme } from "./apply.js";
|
|
4
|
+
import { configureThemeModes, findThemeMode, getThemeModes, hasThemeModeOptions, themeModeKeyOf } from "./modes.js";
|
|
5
|
+
const THEME_ACTIVE_ATTR = "data-tbf-theme-active";
|
|
6
|
+
let themeSyncRegistered = false;
|
|
7
|
+
function ensureThemeSync() {
|
|
8
|
+
if (themeSyncRegistered)
|
|
9
|
+
return;
|
|
10
|
+
themeSyncRegistered = true;
|
|
11
|
+
registerThemeSync((root) => syncThemeControls(root));
|
|
12
|
+
}
|
|
13
|
+
/* Controls sync against the registered modes, so a caller-supplied list has to become the registry. */
|
|
14
|
+
function adoptThemeModes(options) {
|
|
15
|
+
if (hasThemeModeOptions(options))
|
|
16
|
+
configureThemeModes(options);
|
|
17
|
+
}
|
|
18
|
+
function isTag(element, tagName) {
|
|
19
|
+
return element.tagName.toLowerCase() === tagName;
|
|
20
|
+
}
|
|
21
|
+
function syncThemeToggle(button, options = {}) {
|
|
22
|
+
const registry = getThemeModes(options);
|
|
23
|
+
const key = getEffectiveTheme(undefined, options);
|
|
24
|
+
const label = button.getAttribute(`data-tbf-theme-${key}-label`) || "";
|
|
25
|
+
if (registry.modes.length === 2) {
|
|
26
|
+
button.setAttribute("aria-pressed", key === registry.dark ? "true" : "false");
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
button.removeAttribute("aria-pressed");
|
|
30
|
+
}
|
|
31
|
+
button.setAttribute(THEME_CURRENT_ATTR, key);
|
|
32
|
+
if (label)
|
|
33
|
+
button.setAttribute("aria-label", label);
|
|
34
|
+
const text = button.querySelector(THEME_LABEL_SELECTOR);
|
|
35
|
+
if (text)
|
|
36
|
+
text.textContent = label || findThemeMode(key, options)?.label || key;
|
|
37
|
+
}
|
|
38
|
+
function syncThemeOption(option, active) {
|
|
39
|
+
option.setAttribute(THEME_ACTIVE_ATTR, active ? "true" : "false");
|
|
40
|
+
if (isTag(option, "input")) {
|
|
41
|
+
option.checked = active;
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
if (option.getAttribute("role") === "radio")
|
|
45
|
+
option.setAttribute("aria-checked", active ? "true" : "false");
|
|
46
|
+
else
|
|
47
|
+
option.setAttribute("aria-pressed", active ? "true" : "false");
|
|
48
|
+
}
|
|
49
|
+
function syncThemeSelect(element, options = {}) {
|
|
50
|
+
const key = getEffectiveTheme(undefined, options);
|
|
51
|
+
element.setAttribute(THEME_CURRENT_ATTR, key);
|
|
52
|
+
if (isTag(element, "select")) {
|
|
53
|
+
element.value = key;
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
queryAll(element, THEME_OPTION_SELECTOR).forEach((option) => {
|
|
57
|
+
syncThemeOption(option, themeModeKeyOf(option.getAttribute(THEME_VALUE_ATTR)) === key);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
function syncThemeToggles(root = document, options = {}) {
|
|
61
|
+
queryAll(root, THEME_TOGGLE_SELECTOR).forEach((button) => syncThemeToggle(button, options));
|
|
62
|
+
}
|
|
63
|
+
function syncThemeSelects(root = document, options = {}) {
|
|
64
|
+
queryAll(root, THEME_SELECT_SELECTOR).forEach((element) => syncThemeSelect(element, options));
|
|
65
|
+
}
|
|
66
|
+
function syncThemeControls(root = document, options = {}) {
|
|
67
|
+
syncThemeToggles(root, options);
|
|
68
|
+
syncThemeSelects(root, options);
|
|
69
|
+
}
|
|
70
|
+
function claimThemeControl(element) {
|
|
71
|
+
if (!(element instanceof HTMLElement) || element.hasAttribute(THEME_BOUND_ATTR))
|
|
72
|
+
return false;
|
|
73
|
+
ensureThemeSync();
|
|
74
|
+
element.setAttribute(THEME_BOUND_ATTR, "true");
|
|
75
|
+
return true;
|
|
76
|
+
}
|
|
77
|
+
function bindThemeToggle(button, options = {}) {
|
|
78
|
+
adoptThemeModes(options);
|
|
79
|
+
if (!claimThemeControl(button))
|
|
80
|
+
return false;
|
|
81
|
+
button.addEventListener("click", async (event) => {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
await setTheme(nextTheme(options), options);
|
|
84
|
+
});
|
|
85
|
+
syncThemeToggle(button, options);
|
|
86
|
+
return true;
|
|
87
|
+
}
|
|
88
|
+
function resolveOptionValue(element, event) {
|
|
89
|
+
if (isTag(element, "select"))
|
|
90
|
+
return element.value;
|
|
91
|
+
const target = event.target;
|
|
92
|
+
const option = target instanceof Element ? target.closest(THEME_OPTION_SELECTOR) : null;
|
|
93
|
+
return option ? option.getAttribute(THEME_VALUE_ATTR) || "" : "";
|
|
94
|
+
}
|
|
95
|
+
function bindThemeSelect(element, options = {}) {
|
|
96
|
+
adoptThemeModes(options);
|
|
97
|
+
if (!claimThemeControl(element))
|
|
98
|
+
return false;
|
|
99
|
+
const handle = async (event) => {
|
|
100
|
+
const value = resolveOptionValue(element, event);
|
|
101
|
+
if (!value)
|
|
102
|
+
return;
|
|
103
|
+
if (event.type === "click")
|
|
104
|
+
event.preventDefault();
|
|
105
|
+
await setTheme(value, options);
|
|
106
|
+
};
|
|
107
|
+
element.addEventListener("change", handle);
|
|
108
|
+
if (!isTag(element, "select"))
|
|
109
|
+
element.addEventListener("click", handle);
|
|
110
|
+
syncThemeSelect(element, options);
|
|
111
|
+
return true;
|
|
112
|
+
}
|
|
113
|
+
function bindThemeToggles(root = document, options = {}) {
|
|
114
|
+
queryAll(root, THEME_TOGGLE_SELECTOR).forEach((button) => {
|
|
115
|
+
bindThemeToggle(button, options);
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
function bindThemeSelects(root = document, options = {}) {
|
|
119
|
+
queryAll(root, THEME_SELECT_SELECTOR).forEach((element) => {
|
|
120
|
+
bindThemeSelect(element, options);
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
function bindThemeControls(root = document, options = {}) {
|
|
124
|
+
bindThemeToggles(root, options);
|
|
125
|
+
bindThemeSelects(root, options);
|
|
126
|
+
}
|
|
127
|
+
export { THEME_ACTIVE_ATTR, bindThemeControls, bindThemeSelect, bindThemeSelects, bindThemeToggle, bindThemeToggles, syncThemeControls, syncThemeSelect, syncThemeSelects, syncThemeToggle, syncThemeToggles, };
|
|
128
|
+
//# sourceMappingURL=controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../src/theme/controls.ts"],"names":[],"mappings":"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"}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type
|
|
3
|
-
type ThemePersistenceAdapter = {
|
|
4
|
-
get?: () => Promise<string | null | undefined> | string | null | undefined;
|
|
5
|
-
set?: (theme: ThemeValue) => Promise<unknown> | unknown;
|
|
6
|
-
};
|
|
7
|
-
type ThemeRuntimeOptions = {
|
|
8
|
-
defaultTheme?: ThemeValue;
|
|
9
|
-
persistence?: ThemePersistenceAdapter;
|
|
10
|
-
};
|
|
11
|
-
declare const THEME_TOGGLE_SELECTOR = "[data-tbf-theme-button]";
|
|
12
|
-
declare const THEME_ATTR = "data-tbf-theme";
|
|
13
|
-
declare function normalizeTheme(value: unknown): ThemeValue;
|
|
14
|
-
declare function systemThemeKey(): Exclude<ThemeValue, "">;
|
|
15
|
-
declare function currentDomTheme(): ThemeValue;
|
|
16
|
-
declare function getEffectiveTheme(value?: unknown): Exclude<ThemeValue, "">;
|
|
17
|
-
declare function applyTheme(theme: ThemeValue): "dark" | "light";
|
|
18
|
-
declare function setTheme(theme: ThemeValue, options?: ThemeRuntimeOptions): Promise<"dark" | "light">;
|
|
19
|
-
declare function syncThemeToggles(root?: BindRoot): void;
|
|
20
|
-
declare function bindThemeToggle(button: HTMLElement | null, options?: ThemeRuntimeOptions): boolean;
|
|
21
|
-
declare function bindThemeToggles(root?: BindRoot, options?: ThemeRuntimeOptions): void;
|
|
1
|
+
import type { BindRoot } from "../dom/index.d.ts";
|
|
2
|
+
import type { ThemeRuntimeOptions } from "./apply.js";
|
|
22
3
|
declare function bindThemeRuntime(root?: BindRoot, options?: ThemeRuntimeOptions): Promise<void>;
|
|
23
|
-
|
|
24
|
-
export {
|
|
25
|
-
export
|
|
4
|
+
export { THEME_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, } from "./constants.js";
|
|
5
|
+
export { DEFAULT_THEME_MODE_KEYS, DEFAULT_THEME_MODE_REGISTRY, configureThemeModes, findThemeMode, getThemeModes, hasThemeModeOptions, isThemeMode, normalizeThemeMode, normalizeThemeModeRegistry, themeModeKeys, } from "./modes.js";
|
|
6
|
+
export { applyTheme, currentDomTheme, getEffectiveTheme, nextTheme, normalizeTheme, registerThemeSync, setTheme, systemThemeKey, themeScheme, } from "./apply.js";
|
|
7
|
+
export { bindThemeControls, bindThemeSelect, bindThemeSelects, bindThemeToggle, bindThemeToggles, syncThemeControls, syncThemeSelect, syncThemeSelects, syncThemeToggle, syncThemeToggles, } from "./controls.js";
|
|
8
|
+
export { createThemeBootScript } from "./boot.js";
|
|
9
|
+
export { bindThemeRuntime };
|
|
10
|
+
export type { ThemeMode, ThemeModeDescriptor, ThemeModeInput, ThemeModeOptions, ThemeModeRegistry, ThemeModeScheme, } from "./modes.js";
|
|
11
|
+
export type { ThemePersistenceAdapter, ThemeRuntimeOptions, ThemeValue } from "./apply.js";
|
|
26
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAItD,iBAAe,gBAAgB,CAC7B,IAAI,GAAE,QAAmB,EACzB,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,IAAI,CAAC,CAKf;AAED,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,0BAA0B,EAC1B,aAAa,GACd,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EACV,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/theme/index.js
CHANGED
|
@@ -1,119 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
function normalizeTheme(value) {
|
|
5
|
-
const text = String(value || "").trim().toLowerCase();
|
|
6
|
-
return text === "dark" || text === "light" ? text : "";
|
|
7
|
-
}
|
|
8
|
-
function systemThemeKey() {
|
|
9
|
-
try {
|
|
10
|
-
return window.matchMedia?.("(prefers-color-scheme: light)").matches
|
|
11
|
-
? "light"
|
|
12
|
-
: "dark";
|
|
13
|
-
}
|
|
14
|
-
catch {
|
|
15
|
-
return "dark";
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
function currentDomTheme() {
|
|
19
|
-
if (typeof document === "undefined")
|
|
20
|
-
return "";
|
|
21
|
-
return normalizeTheme(document.documentElement.getAttribute(THEME_ATTR));
|
|
22
|
-
}
|
|
23
|
-
function getEffectiveTheme(value) {
|
|
24
|
-
return normalizeTheme(value) || currentDomTheme() || systemThemeKey();
|
|
25
|
-
}
|
|
26
|
-
function dispatchThemeChange(theme, themeKey) {
|
|
27
|
-
if (typeof window === "undefined")
|
|
28
|
-
return;
|
|
29
|
-
window.dispatchEvent(new CustomEvent("tbf:themechange", {
|
|
30
|
-
detail: { theme, themeKey },
|
|
31
|
-
}));
|
|
32
|
-
}
|
|
33
|
-
function applyTheme(theme) {
|
|
34
|
-
if (typeof document === "undefined")
|
|
35
|
-
return getEffectiveTheme(theme);
|
|
36
|
-
const normalized = normalizeTheme(theme);
|
|
37
|
-
const next = normalized || systemThemeKey();
|
|
38
|
-
const previous = currentDomTheme();
|
|
39
|
-
document.documentElement.setAttribute(THEME_ATTR, next);
|
|
40
|
-
document.documentElement.style.colorScheme = next;
|
|
41
|
-
document.body?.setAttribute(THEME_ATTR, next);
|
|
42
|
-
if (previous !== next)
|
|
43
|
-
dispatchThemeChange(normalized, next);
|
|
44
|
-
syncThemeToggles(document);
|
|
45
|
-
return next;
|
|
46
|
-
}
|
|
47
|
-
async function readPersistedTheme(adapter) {
|
|
48
|
-
if (!adapter?.get)
|
|
49
|
-
return "";
|
|
50
|
-
try {
|
|
51
|
-
return normalizeTheme(await adapter.get());
|
|
52
|
-
}
|
|
53
|
-
catch {
|
|
54
|
-
return "";
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
async function setTheme(theme, options = {}) {
|
|
58
|
-
const normalized = normalizeTheme(theme);
|
|
59
|
-
applyTheme(normalized);
|
|
60
|
-
if (options.persistence?.set) {
|
|
61
|
-
try {
|
|
62
|
-
await options.persistence.set(normalized);
|
|
63
|
-
}
|
|
64
|
-
catch { }
|
|
65
|
-
}
|
|
66
|
-
return getEffectiveTheme(normalized);
|
|
67
|
-
}
|
|
68
|
-
function nextTheme() {
|
|
69
|
-
return getEffectiveTheme() === "light" ? "dark" : "light";
|
|
70
|
-
}
|
|
71
|
-
function syncThemeToggle(button) {
|
|
72
|
-
const theme = getEffectiveTheme();
|
|
73
|
-
button.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
|
|
74
|
-
const label = button.getAttribute(`data-tbf-theme-${theme}-label`);
|
|
75
|
-
if (label)
|
|
76
|
-
button.setAttribute("aria-label", label);
|
|
77
|
-
const text = button.querySelector("[data-tbf-theme-label]");
|
|
78
|
-
if (text)
|
|
79
|
-
text.textContent = label || theme;
|
|
80
|
-
}
|
|
81
|
-
function syncThemeToggles(root = document) {
|
|
82
|
-
queryAll(root, THEME_TOGGLE_SELECTOR).forEach(syncThemeToggle);
|
|
83
|
-
}
|
|
84
|
-
function bindThemeToggle(button, options = {}) {
|
|
85
|
-
if (!(button instanceof HTMLElement) || button.hasAttribute("data-tbf-theme-bound")) {
|
|
86
|
-
return false;
|
|
87
|
-
}
|
|
88
|
-
button.setAttribute("data-tbf-theme-bound", "true");
|
|
89
|
-
button.addEventListener("click", async (event) => {
|
|
90
|
-
event.preventDefault();
|
|
91
|
-
await setTheme(nextTheme(), options);
|
|
92
|
-
});
|
|
93
|
-
syncThemeToggle(button);
|
|
94
|
-
return true;
|
|
95
|
-
}
|
|
96
|
-
function bindThemeToggles(root = document, options = {}) {
|
|
97
|
-
queryAll(root, THEME_TOGGLE_SELECTOR).forEach((button) => {
|
|
98
|
-
bindThemeToggle(button, options);
|
|
99
|
-
});
|
|
100
|
-
}
|
|
1
|
+
import { applyTheme, normalizeTheme, readPersistedTheme } from "./apply.js";
|
|
2
|
+
import { bindThemeControls } from "./controls.js";
|
|
3
|
+
import { configureThemeModes, hasThemeModeOptions } from "./modes.js";
|
|
101
4
|
async function bindThemeRuntime(root = document, options = {}) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
"document.documentElement.style.colorScheme=k;",
|
|
115
|
-
"})();",
|
|
116
|
-
].join("");
|
|
117
|
-
}
|
|
118
|
-
export { THEME_ATTR, THEME_TOGGLE_SELECTOR, applyTheme, bindThemeRuntime, bindThemeToggle, bindThemeToggles, createThemeBootScript, currentDomTheme, getEffectiveTheme, normalizeTheme, setTheme, syncThemeToggles, systemThemeKey, };
|
|
5
|
+
if (hasThemeModeOptions(options))
|
|
6
|
+
configureThemeModes(options);
|
|
7
|
+
const persisted = await readPersistedTheme(options.persistence, options);
|
|
8
|
+
applyTheme(persisted || normalizeTheme(options.defaultTheme, options), options);
|
|
9
|
+
bindThemeControls(root, options);
|
|
10
|
+
}
|
|
11
|
+
export { THEME_ATTR, THEME_CHANGE_EVENT, THEME_CURRENT_ATTR, THEME_OPTION_SELECTOR, THEME_SELECT_SELECTOR, THEME_TOGGLE_SELECTOR, THEME_VALUE_ATTR, } from "./constants.js";
|
|
12
|
+
export { DEFAULT_THEME_MODE_KEYS, DEFAULT_THEME_MODE_REGISTRY, configureThemeModes, findThemeMode, getThemeModes, hasThemeModeOptions, isThemeMode, normalizeThemeMode, normalizeThemeModeRegistry, themeModeKeys, } from "./modes.js";
|
|
13
|
+
export { applyTheme, currentDomTheme, getEffectiveTheme, nextTheme, normalizeTheme, registerThemeSync, setTheme, systemThemeKey, themeScheme, } from "./apply.js";
|
|
14
|
+
export { bindThemeControls, bindThemeSelect, bindThemeSelects, bindThemeToggle, bindThemeToggles, syncThemeControls, syncThemeSelect, syncThemeSelects, syncThemeToggle, syncThemeToggles, } from "./controls.js";
|
|
15
|
+
export { createThemeBootScript } from "./boot.js";
|
|
16
|
+
export { bindThemeRuntime };
|
|
119
17
|
//# sourceMappingURL=index.js.map
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEtE,KAAK,UAAU,gBAAgB,CAC7B,OAAiB,QAAQ,EACzB,UAA+B,EAAE;IAEjC,IAAI,mBAAmB,CAAC,OAAO,CAAC;QAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,MAAM,kBAAkB,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IACzE,UAAU,CAAC,SAAS,IAAI,cAAc,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IAChF,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACnC,CAAC;AAED,OAAO,EACL,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,0BAA0B,EAC1B,aAAa,GACd,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|