@stealthscale/component-screen 0.0.1 → 0.2.2
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 +211 -54
- package/dist/cyclonedx/bom.json +1 -1
- package/dist/index.d.ts +327 -444
- package/dist/index.js +2246 -1905
- package/dist/{recipe-CRJrRAI8.js → recipe-BWmweBfv.js} +469 -456
- package/dist/recipe-DRMsitrw.js +283 -0
- package/dist/root-DDwipXru.d.ts +327 -0
- package/dist/root-qEh4u7y5.js +1182 -0
- package/dist/shell.d.ts +42 -0
- package/dist/shell.js +166 -0
- package/dist/theme.js +4 -3
- package/package.json +57 -41
package/dist/shell.d.ts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { n as RootProps } from "./root-DDwipXru.js";
|
|
2
|
+
import { ReactElement } from "react";
|
|
3
|
+
//#region src/locale-switcher/locale-switcher.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Describes the props of the locale switcher: the switcher's props without its choices.
|
|
6
|
+
*/
|
|
7
|
+
interface LocaleSwitcherProps extends Omit<RootProps, "defaultValue" | "items" | "label" | "onValueChange" | "value"> {
|
|
8
|
+
/**
|
|
9
|
+
* Name of the control, which a screen reader announces before the current language. "Language"
|
|
10
|
+
* unless the caller passes another.
|
|
11
|
+
*/
|
|
12
|
+
readonly label?: string | undefined;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Renders `Switcher.Root` with a row per locale on offer, and switches to the locale a person
|
|
16
|
+
* picks.
|
|
17
|
+
*
|
|
18
|
+
* @param props - The control's name and the switcher's props.
|
|
19
|
+
* @returns The switcher, or nothing where the application offers one locale.
|
|
20
|
+
*/
|
|
21
|
+
export declare function LocaleSwitcher({ label, ...props }: LocaleSwitcherProps): null | ReactElement;
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/theme-switcher/theme-switcher.d.ts
|
|
24
|
+
/**
|
|
25
|
+
* Describes the props of the theme switcher: the switcher's props without its choices.
|
|
26
|
+
*/
|
|
27
|
+
interface ThemeSwitcherProps extends Omit<RootProps, "defaultValue" | "items" | "label" | "onValueChange" | "value"> {
|
|
28
|
+
/**
|
|
29
|
+
* Name of the control, which a screen reader announces before the current theme. "Theme" unless
|
|
30
|
+
* the caller passes another.
|
|
31
|
+
*/
|
|
32
|
+
readonly label?: string | undefined;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Renders `Switcher.Root` with a row per theme on offer, and switches to the theme a person picks.
|
|
36
|
+
*
|
|
37
|
+
* @param props - The control's name and the switcher's props.
|
|
38
|
+
* @returns The switcher, or nothing where the application offers fewer than two themes.
|
|
39
|
+
*/
|
|
40
|
+
export declare function ThemeSwitcher({ label, ...props }: ThemeSwitcherProps): null | ReactElement;
|
|
41
|
+
//#endregion
|
|
42
|
+
export type { LocaleSwitcherProps, ThemeSwitcherProps };
|
package/dist/shell.js
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { t as Root } from "./root-qEh4u7y5.js";
|
|
2
|
+
import { c } from "react/compiler-runtime";
|
|
3
|
+
import { token } from "@stealthscale/theme";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { ColorSwatch } from "@stealthscale/component-data";
|
|
6
|
+
import { useLocale } from "@stealthscale/provider-locale";
|
|
7
|
+
import { useThemeChoice } from "@stealthscale/provider-shell";
|
|
8
|
+
//#region src/locale-switcher/endonym.ts
|
|
9
|
+
/**
|
|
10
|
+
* Writes a locale's name in its own language, and the short mark a switcher shows beside it.
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Matches the region and every subtag after the language in a tag.
|
|
14
|
+
*/
|
|
15
|
+
const AFTER_LANGUAGE = /-.*$/u;
|
|
16
|
+
/**
|
|
17
|
+
* Returns a locale's name in its own language, `Nederlands` for `nl`, or the tag where the runtime
|
|
18
|
+
* has no name for it.
|
|
19
|
+
*
|
|
20
|
+
* @remarks
|
|
21
|
+
* `Intl.DisplayNames` runs with `fallback: "none"`, so it returns undefined for a tag it cannot
|
|
22
|
+
* name, and it throws for a malformed tag. The function returns the tag in both cases.
|
|
23
|
+
* @param tag - The locale, as a BCP 47 tag.
|
|
24
|
+
* @returns The name in its own language, or the tag.
|
|
25
|
+
*/
|
|
26
|
+
function endonymOf(tag) {
|
|
27
|
+
try {
|
|
28
|
+
return new Intl.DisplayNames([tag], {
|
|
29
|
+
fallback: "none",
|
|
30
|
+
type: "language"
|
|
31
|
+
}).of(tag) ?? tag;
|
|
32
|
+
} catch {
|
|
33
|
+
return tag;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Returns a locale's language subtag in capitals, `NL` for `nl-BE`.
|
|
38
|
+
*
|
|
39
|
+
* @param tag - The locale, as a BCP 47 tag.
|
|
40
|
+
* @returns The language subtag in capitals.
|
|
41
|
+
*/
|
|
42
|
+
function markOf(tag) {
|
|
43
|
+
return tag.replace(AFTER_LANGUAGE, "").toUpperCase();
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region src/locale-switcher/locale-switcher.tsx
|
|
47
|
+
/**
|
|
48
|
+
* Renders `Switcher.Root` with a row per locale on offer, and switches to the locale a person
|
|
49
|
+
* picks.
|
|
50
|
+
*
|
|
51
|
+
* @param props - The control's name and the switcher's props.
|
|
52
|
+
* @returns The switcher, or nothing where the application offers one locale.
|
|
53
|
+
*/
|
|
54
|
+
function LocaleSwitcher(t0) {
|
|
55
|
+
const $ = c(11);
|
|
56
|
+
let props;
|
|
57
|
+
let t1;
|
|
58
|
+
if ($[0] !== t0) {
|
|
59
|
+
({label: t1, ...props} = t0);
|
|
60
|
+
$[0] = t0;
|
|
61
|
+
$[1] = props;
|
|
62
|
+
$[2] = t1;
|
|
63
|
+
} else {
|
|
64
|
+
props = $[1];
|
|
65
|
+
t1 = $[2];
|
|
66
|
+
}
|
|
67
|
+
const label = t1 === void 0 ? "Language" : t1;
|
|
68
|
+
const { locale, locales, setLocale } = useLocale();
|
|
69
|
+
if (locales.length < 2) return null;
|
|
70
|
+
let t2;
|
|
71
|
+
if ($[3] !== locales) {
|
|
72
|
+
t2 = locales.map(_temp$1);
|
|
73
|
+
$[3] = locales;
|
|
74
|
+
$[4] = t2;
|
|
75
|
+
} else t2 = $[4];
|
|
76
|
+
let t3;
|
|
77
|
+
if ($[5] !== label || $[6] !== locale || $[7] !== props || $[8] !== setLocale || $[9] !== t2) {
|
|
78
|
+
t3 = /* @__PURE__ */ jsx(Root, {
|
|
79
|
+
...props,
|
|
80
|
+
items: t2,
|
|
81
|
+
label,
|
|
82
|
+
onValueChange: setLocale,
|
|
83
|
+
value: locale
|
|
84
|
+
});
|
|
85
|
+
$[5] = label;
|
|
86
|
+
$[6] = locale;
|
|
87
|
+
$[7] = props;
|
|
88
|
+
$[8] = setLocale;
|
|
89
|
+
$[9] = t2;
|
|
90
|
+
$[10] = t3;
|
|
91
|
+
} else t3 = $[10];
|
|
92
|
+
return t3;
|
|
93
|
+
}
|
|
94
|
+
function _temp$1(tag) {
|
|
95
|
+
return {
|
|
96
|
+
label: endonymOf(tag),
|
|
97
|
+
mark: markOf(tag),
|
|
98
|
+
value: tag
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
//#endregion
|
|
102
|
+
//#region src/theme-switcher/theme-switcher.tsx
|
|
103
|
+
/**
|
|
104
|
+
* Colour of a theme's swatch: the primary solid of the theme in the swatch's `data-theme`.
|
|
105
|
+
*/
|
|
106
|
+
const PRIMARY = token.var("colors.primary.solid");
|
|
107
|
+
/**
|
|
108
|
+
* Renders `Switcher.Root` with a row per theme on offer, and switches to the theme a person picks.
|
|
109
|
+
*
|
|
110
|
+
* @param props - The control's name and the switcher's props.
|
|
111
|
+
* @returns The switcher, or nothing where the application offers fewer than two themes.
|
|
112
|
+
*/
|
|
113
|
+
function ThemeSwitcher(t0) {
|
|
114
|
+
const $ = c(11);
|
|
115
|
+
let props;
|
|
116
|
+
let t1;
|
|
117
|
+
if ($[0] !== t0) {
|
|
118
|
+
({label: t1, ...props} = t0);
|
|
119
|
+
$[0] = t0;
|
|
120
|
+
$[1] = props;
|
|
121
|
+
$[2] = t1;
|
|
122
|
+
} else {
|
|
123
|
+
props = $[1];
|
|
124
|
+
t1 = $[2];
|
|
125
|
+
}
|
|
126
|
+
const label = t1 === void 0 ? "Theme" : t1;
|
|
127
|
+
const { setTheme, theme, themes } = useThemeChoice();
|
|
128
|
+
if (themes.length < 2) return null;
|
|
129
|
+
let t2;
|
|
130
|
+
if ($[3] !== themes) {
|
|
131
|
+
t2 = themes.map(_temp);
|
|
132
|
+
$[3] = themes;
|
|
133
|
+
$[4] = t2;
|
|
134
|
+
} else t2 = $[4];
|
|
135
|
+
let t3;
|
|
136
|
+
if ($[5] !== label || $[6] !== props || $[7] !== setTheme || $[8] !== t2 || $[9] !== theme) {
|
|
137
|
+
t3 = /* @__PURE__ */ jsx(Root, {
|
|
138
|
+
...props,
|
|
139
|
+
items: t2,
|
|
140
|
+
label,
|
|
141
|
+
onValueChange: setTheme,
|
|
142
|
+
value: theme
|
|
143
|
+
});
|
|
144
|
+
$[5] = label;
|
|
145
|
+
$[6] = props;
|
|
146
|
+
$[7] = setTheme;
|
|
147
|
+
$[8] = t2;
|
|
148
|
+
$[9] = theme;
|
|
149
|
+
$[10] = t3;
|
|
150
|
+
} else t3 = $[10];
|
|
151
|
+
return t3;
|
|
152
|
+
}
|
|
153
|
+
function _temp(name) {
|
|
154
|
+
return {
|
|
155
|
+
label: name,
|
|
156
|
+
mark: /* @__PURE__ */ jsx(ColorSwatch, {
|
|
157
|
+
"data-theme": name,
|
|
158
|
+
shape: "circle",
|
|
159
|
+
size: "inherit",
|
|
160
|
+
value: PRIMARY
|
|
161
|
+
}),
|
|
162
|
+
value: name
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
//#endregion
|
|
166
|
+
export { LocaleSwitcher, ThemeSwitcher };
|
package/dist/theme.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { d as recipe$1, i as recipe$4, l as recipe$3, n as recipe$6, r as recipe$5, t as recipe$7, u as recipe$2, w as recipe } from "./recipe-BWmweBfv.js";
|
|
2
|
+
import { t as recipe$8 } from "./recipe-DRMsitrw.js";
|
|
2
3
|
import { definePreset } from "@stealthscale/theme/authoring";
|
|
3
4
|
//#region src/theme.ts
|
|
4
5
|
/**
|
|
@@ -19,8 +20,8 @@ var theme_default = definePreset({
|
|
|
19
20
|
section: recipe$4,
|
|
20
21
|
sidebar: recipe$5,
|
|
21
22
|
splitter: recipe$6,
|
|
22
|
-
switcher: recipe$
|
|
23
|
-
toolbar: recipe$
|
|
23
|
+
switcher: recipe$8,
|
|
24
|
+
toolbar: recipe$7
|
|
24
25
|
} } }
|
|
25
26
|
});
|
|
26
27
|
//#endregion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stealthscale/component-screen",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Lays an application out on whatever screen it is opened on: the shell, the page, the toolbar and the sidebar, each folding on its own as the screen narrows.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"exports": {
|
|
30
30
|
".": "./dist/index.js",
|
|
31
|
+
"./shell": "./dist/shell.js",
|
|
31
32
|
"./theme": "./dist/theme.js",
|
|
32
33
|
"./package.json": "./package.json"
|
|
33
34
|
},
|
|
@@ -35,60 +36,75 @@
|
|
|
35
36
|
"access": "public"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@zag-js/dom-query": "1.
|
|
39
|
-
"@zag-js/floating-panel": "1.
|
|
40
|
-
"@zag-js/react": "1.
|
|
41
|
-
"@zag-js/splitter": "1.
|
|
42
|
-
"@zag-js/types": "1.
|
|
39
|
+
"@zag-js/dom-query": "1.45.0",
|
|
40
|
+
"@zag-js/floating-panel": "1.45.0",
|
|
41
|
+
"@zag-js/react": "1.45.0",
|
|
42
|
+
"@zag-js/splitter": "1.45.0",
|
|
43
|
+
"@zag-js/types": "1.45.0"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"@arethetypeswrong/core": "^0.18",
|
|
46
|
-
"@stealthscale/component-a11y": "^0.1.
|
|
47
|
-
"@stealthscale/component-actions": "^0.
|
|
48
|
-
"@stealthscale/component-data": "^0.1
|
|
49
|
-
"@stealthscale/component-disclosure": "^0.
|
|
50
|
-
"@stealthscale/component-forms": "^0.1
|
|
51
|
-
"@stealthscale/component-layout": "^0.1
|
|
52
|
-
"@stealthscale/component-modals": "^0.
|
|
53
|
-
"@stealthscale/component-navigation": "^0.1
|
|
54
|
-
"@stealthscale/component-primitives": "^0.
|
|
55
|
-
"@stealthscale/component-typography": "^0.1
|
|
56
|
-
"@stealthscale/hooks": "^0.
|
|
57
|
-
"@stealthscale/provider-
|
|
58
|
-
"@stealthscale/
|
|
59
|
-
"@stealthscale/
|
|
60
|
-
"@stealthscale/
|
|
61
|
-
"@stealthscale/
|
|
62
|
-
"@stealthscale/
|
|
63
|
-
"@stealthscale/vite-config
|
|
47
|
+
"@stealthscale/component-a11y": "^0.1.2",
|
|
48
|
+
"@stealthscale/component-actions": "^0.2.2",
|
|
49
|
+
"@stealthscale/component-data": "^0.2.1",
|
|
50
|
+
"@stealthscale/component-disclosure": "^0.2.3",
|
|
51
|
+
"@stealthscale/component-forms": "^0.3.1",
|
|
52
|
+
"@stealthscale/component-layout": "^0.2.1",
|
|
53
|
+
"@stealthscale/component-modals": "^0.2.1",
|
|
54
|
+
"@stealthscale/component-navigation": "^0.3.1",
|
|
55
|
+
"@stealthscale/component-primitives": "^0.3.0",
|
|
56
|
+
"@stealthscale/component-typography": "^0.3.1",
|
|
57
|
+
"@stealthscale/hooks": "^0.3.0",
|
|
58
|
+
"@stealthscale/provider-color-mode": "^0.2.2",
|
|
59
|
+
"@stealthscale/provider-locale": "^0.1.1",
|
|
60
|
+
"@stealthscale/provider-shell": "^0.2.2",
|
|
61
|
+
"@stealthscale/provider-viewport": "^0.2.1",
|
|
62
|
+
"@stealthscale/settings": "^0.2.0",
|
|
63
|
+
"@stealthscale/theme": "^0.5.0",
|
|
64
|
+
"@stealthscale/vite-config": "^0.8.0",
|
|
65
|
+
"@stealthscale/vite-config-i18n": "^0.2.1",
|
|
66
|
+
"@stealthscale/vite-config-react": "^0.9.1",
|
|
67
|
+
"@stealthscale/vite-config-specimen": "^0.2.1",
|
|
68
|
+
"@stealthscale/vite-config-theme": "^0.3.0",
|
|
64
69
|
"@stealthscale/vite-config-typescript": "^0.3.0",
|
|
65
70
|
"@testing-library/react": "^16.3",
|
|
66
71
|
"@types/react": "^19.3",
|
|
67
72
|
"@types/react-dom": "^19.3",
|
|
68
73
|
"happy-dom": "^20.14",
|
|
69
|
-
"lucide-react": "^1.
|
|
70
|
-
"oxc-transform-react": "^0.
|
|
74
|
+
"lucide-react": "^1.52",
|
|
75
|
+
"oxc-transform-react": "^0.153",
|
|
71
76
|
"publint": "^0.3",
|
|
72
77
|
"react": "^19.3",
|
|
73
78
|
"react-dom": "^19.3",
|
|
74
79
|
"typescript": "^7.0",
|
|
75
|
-
"vitest": "5.0.
|
|
80
|
+
"vitest": "5.0.3"
|
|
76
81
|
},
|
|
77
82
|
"peerDependencies": {
|
|
78
|
-
"@stealthscale/component-a11y": "^0.1.
|
|
79
|
-
"@stealthscale/component-actions": "^0.
|
|
80
|
-
"@stealthscale/component-data": "^0.1
|
|
81
|
-
"@stealthscale/component-disclosure": "^0.
|
|
82
|
-
"@stealthscale/component-forms": "^0.1
|
|
83
|
-
"@stealthscale/component-layout": "^0.1
|
|
84
|
-
"@stealthscale/component-modals": "^0.
|
|
85
|
-
"@stealthscale/component-navigation": "^0.1
|
|
86
|
-
"@stealthscale/component-primitives": "^0.
|
|
87
|
-
"@stealthscale/component-typography": "^0.1
|
|
88
|
-
"@stealthscale/hooks": "^0.
|
|
89
|
-
"@stealthscale/provider-
|
|
90
|
-
"@stealthscale/
|
|
91
|
-
"
|
|
83
|
+
"@stealthscale/component-a11y": "^0.1.2",
|
|
84
|
+
"@stealthscale/component-actions": "^0.2.2",
|
|
85
|
+
"@stealthscale/component-data": "^0.2.1",
|
|
86
|
+
"@stealthscale/component-disclosure": "^0.2.3",
|
|
87
|
+
"@stealthscale/component-forms": "^0.3.1",
|
|
88
|
+
"@stealthscale/component-layout": "^0.2.1",
|
|
89
|
+
"@stealthscale/component-modals": "^0.2.1",
|
|
90
|
+
"@stealthscale/component-navigation": "^0.3.1",
|
|
91
|
+
"@stealthscale/component-primitives": "^0.3.0",
|
|
92
|
+
"@stealthscale/component-typography": "^0.3.1",
|
|
93
|
+
"@stealthscale/hooks": "^0.3.0",
|
|
94
|
+
"@stealthscale/provider-locale": "^0.1.1",
|
|
95
|
+
"@stealthscale/provider-shell": "^0.2.2",
|
|
96
|
+
"@stealthscale/provider-viewport": "^0.2.1",
|
|
97
|
+
"@stealthscale/theme": "^0.5.0",
|
|
98
|
+
"react": "^19.3",
|
|
99
|
+
"react-dom": "^19.3"
|
|
100
|
+
},
|
|
101
|
+
"peerDependenciesMeta": {
|
|
102
|
+
"@stealthscale/provider-locale": {
|
|
103
|
+
"optional": true
|
|
104
|
+
},
|
|
105
|
+
"@stealthscale/provider-shell": {
|
|
106
|
+
"optional": true
|
|
107
|
+
}
|
|
92
108
|
},
|
|
93
109
|
"engines": {
|
|
94
110
|
"node": ">=26.0.0"
|