@stealthscale/component-feedback 0.1.0 → 0.2.1
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 +514 -37
- package/dist/cyclonedx/bom.json +1 -1
- package/dist/index.d.ts +716 -60
- package/dist/index.js +1741 -92
- package/dist/recipe-CX1gSsN7.js +1290 -0
- package/dist/theme.d.ts +3 -4
- package/dist/theme.js +14 -7
- package/package.json +36 -23
- package/dist/recipe-0Xo90j3-.js +0 -162
package/dist/theme.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
//#region src/theme.d.ts
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
4
|
-
* to install.
|
|
3
|
+
* Registers every recipe in the package in the preset an application's style compiler installs.
|
|
5
4
|
*
|
|
6
5
|
* @remarks
|
|
7
|
-
* The list is written by hand.
|
|
8
|
-
*
|
|
6
|
+
* The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so
|
|
7
|
+
* no generator writes it.
|
|
9
8
|
*/
|
|
10
9
|
declare const _default: import("@stealthscale/theme/authoring").Preset;
|
|
11
10
|
//#endregion
|
package/dist/theme.js
CHANGED
|
@@ -1,22 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as recipe$6, d as recipe$4, f as recipe$3, i as recipe$7, l as recipe$2, n as recipe, r as recipe$1, t as recipe$8, u as recipe$5 } from "./recipe-CX1gSsN7.js";
|
|
2
2
|
import { definePreset } from "@stealthscale/theme/authoring";
|
|
3
3
|
//#region src/theme.ts
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* to install.
|
|
5
|
+
* Registers every recipe in the package in the preset an application's style compiler installs.
|
|
7
6
|
*
|
|
8
7
|
* @remarks
|
|
9
|
-
* The list is written by hand.
|
|
10
|
-
*
|
|
8
|
+
* The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so
|
|
9
|
+
* no generator writes it.
|
|
11
10
|
*/
|
|
12
11
|
var theme_default = definePreset({
|
|
13
12
|
name: "@stealthscale/component-feedback",
|
|
14
13
|
theme: { extend: {
|
|
15
14
|
recipes: {
|
|
16
15
|
skeleton: recipe,
|
|
17
|
-
skeletonText: recipe$1
|
|
16
|
+
skeletonText: recipe$1,
|
|
17
|
+
spinner: recipe$2
|
|
18
18
|
},
|
|
19
|
-
slotRecipes: {
|
|
19
|
+
slotRecipes: {
|
|
20
|
+
alert: recipe$3,
|
|
21
|
+
emptyState: recipe$4,
|
|
22
|
+
loader: recipe$5,
|
|
23
|
+
progress: recipe$6,
|
|
24
|
+
progressCircle: recipe$7,
|
|
25
|
+
toast: recipe$8
|
|
26
|
+
}
|
|
20
27
|
} }
|
|
21
28
|
});
|
|
22
29
|
//#endregion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stealthscale/component-feedback",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Draws the system reporting on itself: what is loading, what went wrong, what state a thing is in.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
"react",
|
|
9
9
|
"status"
|
|
10
10
|
],
|
|
11
|
-
"homepage": "https://github.com/stealth-scale/
|
|
12
|
-
"bugs": "https://github.com/stealth-scale/
|
|
11
|
+
"homepage": "https://github.com/stealth-scale/scale/tree/main/components/feedback#readme",
|
|
12
|
+
"bugs": "https://github.com/stealth-scale/scale/issues",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"repository": {
|
|
15
15
|
"type": "git",
|
|
16
|
-
"url": "git+https://github.com/stealth-scale/
|
|
16
|
+
"url": "git+https://github.com/stealth-scale/scale.git",
|
|
17
17
|
"directory": "components/feedback"
|
|
18
18
|
},
|
|
19
19
|
"files": [
|
|
@@ -34,29 +34,42 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@zag-js/progress": "1.45.0",
|
|
39
|
+
"@zag-js/react": "1.45.0",
|
|
40
|
+
"@zag-js/toast": "1.45.0",
|
|
41
|
+
"@zag-js/types": "1.45.0",
|
|
42
|
+
"@zag-js/utils": "1.45.0"
|
|
43
|
+
},
|
|
37
44
|
"devDependencies": {
|
|
38
|
-
"@arethetypeswrong/core": "^0.18
|
|
39
|
-
"@
|
|
40
|
-
"@stealthscale/
|
|
41
|
-
"@stealthscale/
|
|
42
|
-
"@stealthscale/
|
|
43
|
-
"@stealthscale/
|
|
45
|
+
"@arethetypeswrong/core": "^0.18",
|
|
46
|
+
"@stealthscale/component-actions": "^0.2.1",
|
|
47
|
+
"@stealthscale/component-layout": "^0.2.1",
|
|
48
|
+
"@stealthscale/component-surfaces": "^0.1.1",
|
|
49
|
+
"@stealthscale/hooks": "^0.3.0",
|
|
50
|
+
"@stealthscale/theme": "^0.5.0",
|
|
51
|
+
"@stealthscale/vite-config": "^0.8.0",
|
|
52
|
+
"@stealthscale/vite-config-i18n": "^0.2.1",
|
|
53
|
+
"@stealthscale/vite-config-react": "^0.9.1",
|
|
54
|
+
"@stealthscale/vite-config-specimen": "^0.2.1",
|
|
55
|
+
"@stealthscale/vite-config-theme": "^0.2.1",
|
|
44
56
|
"@stealthscale/vite-config-typescript": "^0.3.0",
|
|
45
|
-
"@testing-library/react": "^16.3
|
|
46
|
-
"@types/react": "^19.3
|
|
47
|
-
"@types/react-dom": "^19.3
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"oxc-transform-react": "^0.
|
|
51
|
-
"publint": "^0.3
|
|
52
|
-
"react": "^19.3
|
|
53
|
-
"react-dom": "^19.3
|
|
54
|
-
"typescript": "^7.0
|
|
55
|
-
"vitest": "
|
|
57
|
+
"@testing-library/react": "^16.3",
|
|
58
|
+
"@types/react": "^19.3",
|
|
59
|
+
"@types/react-dom": "^19.3",
|
|
60
|
+
"happy-dom": "^20.14",
|
|
61
|
+
"lucide-react": "^1.52",
|
|
62
|
+
"oxc-transform-react": "^0.153",
|
|
63
|
+
"publint": "^0.3",
|
|
64
|
+
"react": "^19.3",
|
|
65
|
+
"react-dom": "^19.3",
|
|
66
|
+
"typescript": "^7.0",
|
|
67
|
+
"vitest": "5.0.3"
|
|
56
68
|
},
|
|
57
69
|
"peerDependencies": {
|
|
58
|
-
"@stealthscale/
|
|
59
|
-
"
|
|
70
|
+
"@stealthscale/hooks": "^0.3.0",
|
|
71
|
+
"@stealthscale/theme": "^0.5.0",
|
|
72
|
+
"react": "^19.3"
|
|
60
73
|
},
|
|
61
74
|
"engines": {
|
|
62
75
|
"node": ">=26.0.0"
|
package/dist/recipe-0Xo90j3-.js
DELETED
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import { cornerVariants, defineRecipe, defineSlotRecipe, gapSizes, iconSizes, insetSizes, onSlots, textSizes } from "@stealthscale/theme/authoring";
|
|
2
|
-
//#region src/empty-state/recipe.ts
|
|
3
|
-
/**
|
|
4
|
-
* States what an empty state is: the panel a page draws where there is nothing to show, holding a
|
|
5
|
-
* mark, a heading and a line saying what would be here.
|
|
6
|
-
*
|
|
7
|
-
* @remarks
|
|
8
|
-
* Five parts, because each is styled and a caller composes them in whatever order a page wants.
|
|
9
|
-
* The root is the panel, the content centres what is inside it, the indicator draws the mark, and
|
|
10
|
-
* the title and the description carry the words.
|
|
11
|
-
* One axis moves all of them together. The room inside the panel, the gap in the content, the box
|
|
12
|
-
* of the mark and the size of the title each read the scale of the same name, so a small empty
|
|
13
|
-
* state in a side panel and a large one filling a page are one name apart. The description holds
|
|
14
|
-
* its size, because a line of explanation is read at the size the rest of the page is read at
|
|
15
|
-
* however big the panel is.
|
|
16
|
-
*/
|
|
17
|
-
/**
|
|
18
|
-
* Draws a centred panel at the middle size until a caller says otherwise.
|
|
19
|
-
*/
|
|
20
|
-
const recipe$2 = defineSlotRecipe({
|
|
21
|
-
base: {
|
|
22
|
-
content: {
|
|
23
|
-
alignItems: "center",
|
|
24
|
-
display: "flex",
|
|
25
|
-
flexDirection: "column",
|
|
26
|
-
justifyContent: "center",
|
|
27
|
-
textAlign: "center"
|
|
28
|
-
},
|
|
29
|
-
description: {
|
|
30
|
-
color: "fg.muted",
|
|
31
|
-
textStyle: "body.sm"
|
|
32
|
-
},
|
|
33
|
-
indicator: {
|
|
34
|
-
"& svg": { boxSize: "100%" },
|
|
35
|
-
alignItems: "center",
|
|
36
|
-
color: "fg.muted",
|
|
37
|
-
display: "flex",
|
|
38
|
-
justifyContent: "center"
|
|
39
|
-
},
|
|
40
|
-
root: {
|
|
41
|
-
alignItems: "center",
|
|
42
|
-
display: "flex",
|
|
43
|
-
justifyContent: "center",
|
|
44
|
-
width: "full"
|
|
45
|
-
},
|
|
46
|
-
title: { fontWeight: "semibold" }
|
|
47
|
-
},
|
|
48
|
-
className: "empty-state",
|
|
49
|
-
defaultVariants: { size: "md" },
|
|
50
|
-
jsx: [/^EmptyState(\.\w+)?$/u],
|
|
51
|
-
slots: [
|
|
52
|
-
"root",
|
|
53
|
-
"content",
|
|
54
|
-
"indicator",
|
|
55
|
-
"title",
|
|
56
|
-
"description"
|
|
57
|
-
],
|
|
58
|
-
variants: {
|
|
59
|
-
/**
|
|
60
|
-
* How much room the panel takes, which every part steps with.
|
|
61
|
-
*/
|
|
62
|
-
size: onSlots({
|
|
63
|
-
content: gapSizes(),
|
|
64
|
-
indicator: iconSizes(),
|
|
65
|
-
root: insetSizes(),
|
|
66
|
-
title: textSizes("heading")
|
|
67
|
-
}) }
|
|
68
|
-
});
|
|
69
|
-
//#endregion
|
|
70
|
-
//#region src/skeleton-text/recipe.ts
|
|
71
|
-
/**
|
|
72
|
-
* States what a paragraph of skeleton is: a column of bars standing in for lines of text that have
|
|
73
|
-
* not arrived.
|
|
74
|
-
*
|
|
75
|
-
* @remarks
|
|
76
|
-
* Every length here is read off the line the bars stand in for. A bar is one line tall and the
|
|
77
|
-
* space between two is half a line, so a column of stand-ins occupies what the real paragraph
|
|
78
|
-
* will occupy and the page does not jump when the words land. Nothing states a size of its own,
|
|
79
|
-
* which is what lets a caller drop a paragraph of stand-ins wherever text is read and have it
|
|
80
|
-
* come out the size of that text.
|
|
81
|
-
* The last bar of several is short. A paragraph rarely fills its final line, and a block of bars
|
|
82
|
-
* all the same width reads as a table rather than as prose.
|
|
83
|
-
*/
|
|
84
|
-
/**
|
|
85
|
-
* Draws a column of bars, each the height of the line it stands in for.
|
|
86
|
-
*/
|
|
87
|
-
const recipe$1 = defineRecipe({
|
|
88
|
-
base: {
|
|
89
|
-
"& > *": { height: "1lh" },
|
|
90
|
-
"& > *:last-child:not(:only-child)": { maxWidth: "80%" },
|
|
91
|
-
display: "flex",
|
|
92
|
-
flexDirection: "column",
|
|
93
|
-
gap: "0.5lh",
|
|
94
|
-
width: "full"
|
|
95
|
-
},
|
|
96
|
-
className: "skeleton-text",
|
|
97
|
-
jsx: [/^SkeletonText$/u]
|
|
98
|
-
});
|
|
99
|
-
//#endregion
|
|
100
|
-
//#region src/skeleton/recipe.ts
|
|
101
|
-
/**
|
|
102
|
-
* States what a skeleton is: a box standing in for content that has not arrived, drawn in one of
|
|
103
|
-
* the theme's own motions and revealed once the content does.
|
|
104
|
-
*
|
|
105
|
-
* @remarks
|
|
106
|
-
* A skeleton wraps the content it stands in for rather than replacing it, so a caller writes one
|
|
107
|
-
* tree and flips one prop. While it is loading it takes the content's own box and hides
|
|
108
|
-
* everything inside it, which is what makes the stand-in the size of the thing it stands in for
|
|
109
|
-
* without anybody stating a width. Once it has loaded it fades the content in and gets out of
|
|
110
|
-
* the way.
|
|
111
|
-
* Every motion is an animation style the theme owns, so a reader who asked for less motion is
|
|
112
|
-
* answered once in the theme rather than in every recipe. Nothing here states a colour, a length
|
|
113
|
-
* or a duration of its own.
|
|
114
|
-
*/
|
|
115
|
-
/**
|
|
116
|
-
* Draws a pulsing stand-in at the middle corner until a caller says otherwise.
|
|
117
|
-
*/
|
|
118
|
-
const recipe = defineRecipe({
|
|
119
|
-
base: {},
|
|
120
|
-
className: "skeleton",
|
|
121
|
-
defaultVariants: {
|
|
122
|
-
loading: true,
|
|
123
|
-
motion: "pulse",
|
|
124
|
-
radius: "l2"
|
|
125
|
-
},
|
|
126
|
-
jsx: [/^Skeleton$/u],
|
|
127
|
-
variants: {
|
|
128
|
-
/**
|
|
129
|
-
* Whether the content it stands in for has arrived.
|
|
130
|
-
*/
|
|
131
|
-
loading: {
|
|
132
|
-
false: { animationStyle: "fade.in" },
|
|
133
|
-
true: {
|
|
134
|
-
"&::before, &::after, *": { visibility: "hidden" },
|
|
135
|
-
backgroundClip: "padding-box",
|
|
136
|
-
boxShadow: "none",
|
|
137
|
-
color: "transparent",
|
|
138
|
-
flexShrink: "0",
|
|
139
|
-
pointerEvents: "none",
|
|
140
|
-
userSelect: "none"
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
/**
|
|
144
|
-
* How it moves while it waits.
|
|
145
|
-
*/
|
|
146
|
-
motion: {
|
|
147
|
-
none: { animation: "none" },
|
|
148
|
-
pulse: {
|
|
149
|
-
animationStyle: "pulse",
|
|
150
|
-
background: "bg.emphasized"
|
|
151
|
-
},
|
|
152
|
-
shimmer: {
|
|
153
|
-
animationStyle: "shimmer",
|
|
154
|
-
backgroundImage: "linear-gradient(270deg, {colors.bg.muted}, {colors.bg.emphasized})",
|
|
155
|
-
backgroundSize: "400% 100%"
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
radius: cornerVariants()
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
//#endregion
|
|
162
|
-
export { recipe$1 as n, recipe$2 as r, recipe as t };
|