@noxlovette/material 0.1.36 → 0.1.37
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/components/containers/app/App.svelte +13 -4
- package/dist/components/containers/app/App.svelte.d.ts +2 -1
- package/dist/components/containers/app/types.d.ts +8 -0
- package/dist/components/containers/panes/theme.d.ts +9 -0
- package/dist/components/containers/panes/theme.js +5 -2
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
@component
|
|
3
3
|
The core App wrapper that gives default backgrounds and sets up tooltips and icons.
|
|
4
|
-
|
|
4
|
+
By default it also manages the Material 3 Dynamic Theme and dark mode; pass
|
|
5
|
+
`dynamicTheme={false}` to opt out and rely on static theme CSS instead.
|
|
5
6
|
-->
|
|
6
7
|
<script lang="ts">
|
|
7
8
|
import { MaterialSymbolsProvider, Theme } from '../../../utils/index.js';
|
|
@@ -10,13 +11,21 @@ It manages the Material 3 Dynamic Theme, dark mode, and icon providers.
|
|
|
10
11
|
import type { AppProps } from './types';
|
|
11
12
|
import ThemeScript from '../../../utils/ThemeScript.svelte';
|
|
12
13
|
|
|
13
|
-
let {
|
|
14
|
+
let {
|
|
15
|
+
children,
|
|
16
|
+
class: className,
|
|
17
|
+
iconProviderProps = {},
|
|
18
|
+
dynamicTheme = true,
|
|
19
|
+
...restProps
|
|
20
|
+
}: AppProps = $props();
|
|
14
21
|
|
|
15
22
|
const baseCls = $derived(app({ class: className }));
|
|
16
23
|
</script>
|
|
17
24
|
|
|
18
|
-
|
|
19
|
-
<
|
|
25
|
+
{#if dynamicTheme}
|
|
26
|
+
<ThemeScript />
|
|
27
|
+
<Theme />
|
|
28
|
+
{/if}
|
|
20
29
|
<MaterialSymbolsProvider {...iconProviderProps} />
|
|
21
30
|
<Tooltip.Provider>
|
|
22
31
|
<div class={baseCls} {...restProps}>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { AppProps } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* The core App wrapper that gives default backgrounds and sets up tooltips and icons.
|
|
4
|
-
*
|
|
4
|
+
* By default it also manages the Material 3 Dynamic Theme and dark mode; pass
|
|
5
|
+
* `dynamicTheme={false}` to opt out and rely on static theme CSS instead.
|
|
5
6
|
*/
|
|
6
7
|
declare const App: import("svelte").Component<AppProps, {}, "">;
|
|
7
8
|
type App = ReturnType<typeof App>;
|
|
@@ -8,4 +8,12 @@ export type AppProps = DivAttrs & {
|
|
|
8
8
|
class?: string;
|
|
9
9
|
/** Props to pass to the material symbols provider */
|
|
10
10
|
iconProviderProps?: Partial<MaterialSymbolsProviderProps>;
|
|
11
|
+
/**
|
|
12
|
+
* Whether App manages the M3 dynamic theme (source-color extraction, dark-mode
|
|
13
|
+
* sync, and the injected `<ThemeScript>`/`<Theme>` head elements).
|
|
14
|
+
* Set to `false` if you supply your own static `@noxlovette/material/theme/*` CSS
|
|
15
|
+
* and want to opt out of the runtime dynamic-theming machinery entirely.
|
|
16
|
+
* @default true
|
|
17
|
+
*/
|
|
18
|
+
dynamicTheme?: boolean;
|
|
11
19
|
};
|
|
@@ -16,6 +16,7 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
|
|
|
16
16
|
};
|
|
17
17
|
full: {
|
|
18
18
|
true: {
|
|
19
|
+
left: string;
|
|
19
20
|
right: string;
|
|
20
21
|
};
|
|
21
22
|
false: string;
|
|
@@ -23,9 +24,11 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
|
|
|
23
24
|
rounded: {
|
|
24
25
|
true: {
|
|
25
26
|
left: string;
|
|
27
|
+
right: string;
|
|
26
28
|
};
|
|
27
29
|
false: {
|
|
28
30
|
left: string;
|
|
31
|
+
right: string;
|
|
29
32
|
};
|
|
30
33
|
};
|
|
31
34
|
}, {
|
|
@@ -49,6 +52,7 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
|
|
|
49
52
|
};
|
|
50
53
|
full: {
|
|
51
54
|
true: {
|
|
55
|
+
left: string;
|
|
52
56
|
right: string;
|
|
53
57
|
};
|
|
54
58
|
false: string;
|
|
@@ -56,9 +60,11 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
|
|
|
56
60
|
rounded: {
|
|
57
61
|
true: {
|
|
58
62
|
left: string;
|
|
63
|
+
right: string;
|
|
59
64
|
};
|
|
60
65
|
false: {
|
|
61
66
|
left: string;
|
|
67
|
+
right: string;
|
|
62
68
|
};
|
|
63
69
|
};
|
|
64
70
|
}, {
|
|
@@ -82,6 +88,7 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
|
|
|
82
88
|
};
|
|
83
89
|
full: {
|
|
84
90
|
true: {
|
|
91
|
+
left: string;
|
|
85
92
|
right: string;
|
|
86
93
|
};
|
|
87
94
|
false: string;
|
|
@@ -89,9 +96,11 @@ export declare const splitPane: import("tailwind-variants").TVReturnType<{
|
|
|
89
96
|
rounded: {
|
|
90
97
|
true: {
|
|
91
98
|
left: string;
|
|
99
|
+
right: string;
|
|
92
100
|
};
|
|
93
101
|
false: {
|
|
94
102
|
left: string;
|
|
103
|
+
right: string;
|
|
95
104
|
};
|
|
96
105
|
};
|
|
97
106
|
}, {
|
|
@@ -22,16 +22,19 @@ export const splitPane = tv({
|
|
|
22
22
|
},
|
|
23
23
|
full: {
|
|
24
24
|
true: {
|
|
25
|
+
left: 'md:bottom-[30px]',
|
|
25
26
|
right: 'md:min-h-[calc(100dvh-30px)]'
|
|
26
27
|
},
|
|
27
28
|
false: ''
|
|
28
29
|
},
|
|
29
30
|
rounded: {
|
|
30
31
|
true: {
|
|
31
|
-
left: 'md:rounded-t-lg'
|
|
32
|
+
left: 'md:rounded-t-lg md:rounded-b-lg',
|
|
33
|
+
right: 'md:rounded-b-lg'
|
|
32
34
|
},
|
|
33
35
|
false: {
|
|
34
|
-
left: ''
|
|
36
|
+
left: '',
|
|
37
|
+
right: ''
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
},
|