@r2digisolutions/components 0.6.9 → 0.7.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/README.md +47 -0
- package/dist/components/atoms/Input/Input.svelte +61 -44
- package/dist/components/molecules/InfiniteScroll/InfiniteScroll.svelte +16 -25
- package/dist/components/molecules/InfiniteScroll/InfiniteScroll.svelte.d.ts +1 -1
- package/dist/components/molecules/Select/Select.svelte +3 -4
- package/dist/components/molecules/TreePanel/TreePanel.stories.d.ts +26 -0
- package/dist/components/molecules/TreePanel/TreePanel.stories.js +18 -0
- package/dist/components/molecules/TreePanel/TreePanel.svelte +278 -0
- package/dist/components/molecules/TreePanel/TreePanel.svelte.d.ts +37 -0
- package/dist/components/molecules/TreePanel/TreePanelStory.svelte +54 -0
- package/dist/components/molecules/TreePanel/TreePanelStory.svelte.d.ts +7 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -0
- package/dist/styles.css +247 -202
- package/dist/utils/theme.svelte.d.ts +16 -2
- package/dist/utils/theme.svelte.js +44 -7
- package/package.json +1 -1
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Theme store —
|
|
2
|
+
* Theme store — light/dark + gray palette for R2DigiSolutions components.
|
|
3
|
+
*
|
|
4
|
+
* Mode: `class="dark"` on `<html>`
|
|
5
|
+
* Palette: `data-theme="slate" | "neutral"` on `<html>`
|
|
3
6
|
*
|
|
4
7
|
* - Persists preference to localStorage
|
|
5
8
|
* - Detects system preference via prefers-color-scheme
|
|
6
|
-
* - Applies 'dark' class to <html> element
|
|
7
9
|
* - Reactive via Svelte 5 runes ($state)
|
|
8
10
|
*/
|
|
9
11
|
const STORAGE_KEY = 'r2-theme';
|
|
12
|
+
const PALETTE_KEY = 'r2-theme-palette';
|
|
13
|
+
const DEFAULT_PALETTE = 'slate';
|
|
10
14
|
function getSystemTheme() {
|
|
11
15
|
if (typeof window === 'undefined')
|
|
12
16
|
return 'light';
|
|
@@ -17,23 +21,39 @@ function getStoredTheme() {
|
|
|
17
21
|
return 'system';
|
|
18
22
|
return localStorage.getItem(STORAGE_KEY) ?? 'system';
|
|
19
23
|
}
|
|
20
|
-
function
|
|
24
|
+
function isPalette(value) {
|
|
25
|
+
return value === 'slate' || value === 'neutral';
|
|
26
|
+
}
|
|
27
|
+
function getStoredPalette() {
|
|
28
|
+
if (typeof localStorage === 'undefined')
|
|
29
|
+
return DEFAULT_PALETTE;
|
|
30
|
+
const stored = localStorage.getItem(PALETTE_KEY);
|
|
31
|
+
return isPalette(stored) ? stored : DEFAULT_PALETTE;
|
|
32
|
+
}
|
|
33
|
+
function applyMode(theme) {
|
|
21
34
|
if (typeof document === 'undefined')
|
|
22
35
|
return;
|
|
23
36
|
const resolved = theme === 'system' ? getSystemTheme() : theme;
|
|
24
37
|
document.documentElement.classList.toggle('dark', resolved === 'dark');
|
|
25
38
|
}
|
|
39
|
+
function applyPalette(palette) {
|
|
40
|
+
if (typeof document === 'undefined')
|
|
41
|
+
return;
|
|
42
|
+
document.documentElement.setAttribute('data-theme', palette);
|
|
43
|
+
}
|
|
26
44
|
class ThemeStore {
|
|
27
45
|
#theme = $state('system');
|
|
46
|
+
#palette = $state(DEFAULT_PALETTE);
|
|
28
47
|
#resolved = $derived(this.#theme === 'system' ? getSystemTheme() : this.#theme);
|
|
29
48
|
constructor() {
|
|
30
49
|
if (typeof window !== 'undefined') {
|
|
31
50
|
this.#theme = getStoredTheme();
|
|
32
|
-
|
|
33
|
-
|
|
51
|
+
this.#palette = getStoredPalette();
|
|
52
|
+
applyMode(this.#theme);
|
|
53
|
+
applyPalette(this.#palette);
|
|
34
54
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
35
55
|
if (this.#theme === 'system') {
|
|
36
|
-
|
|
56
|
+
applyMode('system');
|
|
37
57
|
}
|
|
38
58
|
});
|
|
39
59
|
}
|
|
@@ -41,6 +61,9 @@ class ThemeStore {
|
|
|
41
61
|
get theme() {
|
|
42
62
|
return this.#theme;
|
|
43
63
|
}
|
|
64
|
+
get palette() {
|
|
65
|
+
return this.#palette;
|
|
66
|
+
}
|
|
44
67
|
get resolved() {
|
|
45
68
|
return this.#resolved;
|
|
46
69
|
}
|
|
@@ -52,7 +75,21 @@ class ThemeStore {
|
|
|
52
75
|
if (typeof localStorage !== 'undefined') {
|
|
53
76
|
localStorage.setItem(STORAGE_KEY, theme);
|
|
54
77
|
}
|
|
55
|
-
|
|
78
|
+
applyMode(theme);
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Gray family for surfaces, borders and body text.
|
|
82
|
+
* `slate` = cool (hue 265). `neutral` = chroma 0, no blue cast.
|
|
83
|
+
*
|
|
84
|
+
* Pass `{ persist: false }` for a page-level override that does not
|
|
85
|
+
* stick in localStorage.
|
|
86
|
+
*/
|
|
87
|
+
setPalette(palette, opts) {
|
|
88
|
+
this.#palette = palette;
|
|
89
|
+
if (opts?.persist !== false && typeof localStorage !== 'undefined') {
|
|
90
|
+
localStorage.setItem(PALETTE_KEY, palette);
|
|
91
|
+
}
|
|
92
|
+
applyPalette(palette);
|
|
56
93
|
}
|
|
57
94
|
toggle() {
|
|
58
95
|
this.set(this.isDark ? 'light' : 'dark');
|