@vygruppen/spor-react 13.3.0 → 13.3.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/.turbo/turbo-build.log +10 -10
- package/.turbo/turbo-postinstall.log +2 -2
- package/CHANGELOG.md +17 -0
- package/dist/index.cjs +43 -156
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.mjs +43 -156
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/accordion/types.ts +8 -6
- package/src/theme/recipes/badge.ts +41 -155
- package/src/theme/slot-recipes/datepicker.ts +1 -1
- package/src/theme/slot-recipes/popover.ts +2 -0
- package/src/typography/Badge.tsx +2 -6
- package/tsconfig.json +1 -3
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vygruppen/spor-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "13.3.
|
|
4
|
+
"version": "13.3.2",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"react-stately": "^3.31.1",
|
|
47
47
|
"react-swipeable": "^7.0.1",
|
|
48
48
|
"usehooks-ts": "^3.1.0",
|
|
49
|
-
"@vygruppen/spor-design-tokens": "5.0.
|
|
49
|
+
"@vygruppen/spor-design-tokens": "5.0.4",
|
|
50
50
|
"@vygruppen/spor-icon-react": "5.0.0",
|
|
51
51
|
"@vygruppen/spor-loader": "0.7.0"
|
|
52
52
|
},
|
package/src/accordion/types.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Accordion as ChakraAccordion,
|
|
3
|
+
AccordionItemProps,
|
|
3
4
|
AccordionRootProps as ChakraAccordionProps,
|
|
4
5
|
RecipeVariantProps,
|
|
5
6
|
} from "@chakra-ui/react";
|
|
@@ -59,9 +60,10 @@ export type ExpandableProps = Omit<
|
|
|
59
60
|
title: ReactNode;
|
|
60
61
|
};
|
|
61
62
|
|
|
62
|
-
export type ExpandableItemProps = HeadingLevel &
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
export type ExpandableItemProps = HeadingLevel &
|
|
64
|
+
Omit<AccordionItemProps, "title"> & {
|
|
65
|
+
value: string;
|
|
66
|
+
title: ReactNode;
|
|
67
|
+
children?: React.ReactNode;
|
|
68
|
+
startElement?: React.ReactNode;
|
|
69
|
+
};
|
|
@@ -13,74 +13,52 @@ export const badgeRecipie = defineRecipe({
|
|
|
13
13
|
neutral: {
|
|
14
14
|
backgroundColor: "surface",
|
|
15
15
|
color: "text",
|
|
16
|
-
"& svg": {
|
|
17
|
-
color: "icon",
|
|
18
|
-
},
|
|
16
|
+
"& svg": { color: "icon" },
|
|
19
17
|
},
|
|
20
18
|
grey: {
|
|
21
19
|
backgroundColor: "surface.neutral",
|
|
22
20
|
color: "text.neutral",
|
|
23
|
-
"& svg": {
|
|
24
|
-
color: "icon.neutral",
|
|
25
|
-
},
|
|
21
|
+
"& svg": { color: "icon.neutral" },
|
|
26
22
|
},
|
|
27
23
|
green: {
|
|
28
24
|
backgroundColor: "surface.success",
|
|
29
25
|
color: "text.success",
|
|
30
|
-
"& svg": {
|
|
31
|
-
color: "icon.success",
|
|
32
|
-
},
|
|
26
|
+
"& svg": { color: "icon.success" },
|
|
33
27
|
},
|
|
34
28
|
blue: {
|
|
35
29
|
backgroundColor: "surface.info",
|
|
36
30
|
color: "text.info",
|
|
37
|
-
"& svg": {
|
|
38
|
-
color: "icon.info",
|
|
39
|
-
},
|
|
31
|
+
"& svg": { color: "icon.info" },
|
|
40
32
|
},
|
|
41
33
|
cream: {
|
|
42
34
|
backgroundColor: "surface.warning",
|
|
43
35
|
color: "text.warning",
|
|
44
|
-
"& svg": {
|
|
45
|
-
color: "icon.warning",
|
|
46
|
-
},
|
|
36
|
+
"& svg": { color: "icon.warning" },
|
|
47
37
|
},
|
|
48
38
|
yellow: {
|
|
49
39
|
backgroundColor: "surface.notice",
|
|
50
40
|
color: "text.notice",
|
|
51
|
-
"& svg": {
|
|
52
|
-
color: "icon.notice",
|
|
53
|
-
},
|
|
41
|
+
"& svg": { color: "icon.notice" },
|
|
54
42
|
},
|
|
55
43
|
orange: {
|
|
56
44
|
backgroundColor: "surface.caution",
|
|
57
45
|
color: "text.caution",
|
|
58
|
-
"& svg": {
|
|
59
|
-
color: "icon.caution",
|
|
60
|
-
},
|
|
46
|
+
"& svg": { color: "icon.caution" },
|
|
61
47
|
},
|
|
62
48
|
red: {
|
|
63
49
|
backgroundColor: "surface.critical",
|
|
64
50
|
color: "text.critical",
|
|
65
|
-
"& svg": {
|
|
66
|
-
color: "icon.critical",
|
|
67
|
-
},
|
|
51
|
+
"& svg": { color: "icon.critical" },
|
|
68
52
|
},
|
|
69
53
|
brightRed: {
|
|
70
|
-
backgroundColor: {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
},
|
|
78
|
-
"& svg": {
|
|
79
|
-
color: {
|
|
80
|
-
_light: "pink",
|
|
81
|
-
_dark: "pink",
|
|
82
|
-
},
|
|
83
|
-
},
|
|
54
|
+
backgroundColor: { _light: "brightRed", _dark: "brightRed" },
|
|
55
|
+
color: { _light: "pink", _dark: "pink" },
|
|
56
|
+
"& svg": { color: { _light: "pink", _dark: "pink" } },
|
|
57
|
+
},
|
|
58
|
+
disabled: {
|
|
59
|
+
backgroundColor: "surface.disabled",
|
|
60
|
+
color: "text.disabled",
|
|
61
|
+
"& svg": { color: "icon.disabled" },
|
|
84
62
|
},
|
|
85
63
|
},
|
|
86
64
|
size: {
|
|
@@ -106,11 +84,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
106
84
|
borderRadius: "xs",
|
|
107
85
|
},
|
|
108
86
|
},
|
|
109
|
-
attached: {
|
|
110
|
-
true: {
|
|
111
|
-
borderBottomRadius: "none",
|
|
112
|
-
},
|
|
113
|
-
},
|
|
87
|
+
attached: { true: { borderBottomRadius: "none" } },
|
|
114
88
|
inverted: { true: {} },
|
|
115
89
|
},
|
|
116
90
|
defaultVariants: {
|
|
@@ -124,60 +98,27 @@ export const badgeRecipie = defineRecipe({
|
|
|
124
98
|
colorPalette: "blue",
|
|
125
99
|
inverted: true,
|
|
126
100
|
css: {
|
|
127
|
-
backgroundColor: {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
},
|
|
131
|
-
color: {
|
|
132
|
-
_light: "icyBlue",
|
|
133
|
-
_dark: "royal",
|
|
134
|
-
},
|
|
135
|
-
"& svg": {
|
|
136
|
-
color: {
|
|
137
|
-
_light: "royal",
|
|
138
|
-
_dark: "icyBlue",
|
|
139
|
-
},
|
|
140
|
-
},
|
|
101
|
+
backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
|
|
102
|
+
color: { _light: "icyBlue", _dark: "royal" },
|
|
103
|
+
"& svg": { color: { _light: "royal", _dark: "icyBlue" } },
|
|
141
104
|
},
|
|
142
105
|
},
|
|
143
106
|
{
|
|
144
107
|
colorPalette: "green",
|
|
145
108
|
inverted: true,
|
|
146
109
|
css: {
|
|
147
|
-
backgroundColor: {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
},
|
|
151
|
-
color: {
|
|
152
|
-
_light: "mint",
|
|
153
|
-
_dark: "jungle",
|
|
154
|
-
},
|
|
155
|
-
"& svg": {
|
|
156
|
-
color: {
|
|
157
|
-
_light: "mint",
|
|
158
|
-
_dark: "jungle",
|
|
159
|
-
},
|
|
160
|
-
},
|
|
110
|
+
backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
|
|
111
|
+
color: { _light: "mint", _dark: "jungle" },
|
|
112
|
+
"& svg": { color: { _light: "mint", _dark: "jungle" } },
|
|
161
113
|
},
|
|
162
114
|
},
|
|
163
115
|
{
|
|
164
116
|
colorPalette: "grey",
|
|
165
117
|
inverted: true,
|
|
166
118
|
css: {
|
|
167
|
-
backgroundColor: {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
},
|
|
171
|
-
color: {
|
|
172
|
-
_light: "white",
|
|
173
|
-
_dark: "darkGrey",
|
|
174
|
-
},
|
|
175
|
-
"& svg": {
|
|
176
|
-
color: {
|
|
177
|
-
_light: "white",
|
|
178
|
-
_dark: "darkGrey",
|
|
179
|
-
},
|
|
180
|
-
},
|
|
119
|
+
backgroundColor: { _light: "carbon", _dark: "platinum" },
|
|
120
|
+
color: { _light: "white", _dark: "darkGrey" },
|
|
121
|
+
"& svg": { color: { _light: "white", _dark: "darkGrey" } },
|
|
181
122
|
},
|
|
182
123
|
},
|
|
183
124
|
{
|
|
@@ -185,80 +126,36 @@ export const badgeRecipie = defineRecipe({
|
|
|
185
126
|
colorPalette: "cream",
|
|
186
127
|
inverted: true,
|
|
187
128
|
css: {
|
|
188
|
-
backgroundColor: {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
},
|
|
192
|
-
color: {
|
|
193
|
-
_light: "cornsilk",
|
|
194
|
-
_dark: "coffee",
|
|
195
|
-
},
|
|
196
|
-
"& svg": {
|
|
197
|
-
color: {
|
|
198
|
-
_light: "cornsilk",
|
|
199
|
-
_dark: "coffee",
|
|
200
|
-
},
|
|
201
|
-
},
|
|
129
|
+
backgroundColor: { _light: "coffee", _dark: "blonde" },
|
|
130
|
+
color: { _light: "cornsilk", _dark: "coffee" },
|
|
131
|
+
"& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
|
|
202
132
|
},
|
|
203
133
|
},
|
|
204
134
|
{
|
|
205
135
|
colorPalette: "yellow",
|
|
206
136
|
inverted: true,
|
|
207
137
|
css: {
|
|
208
|
-
backgroundColor: {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
},
|
|
212
|
-
color: {
|
|
213
|
-
_light: "cornsilk",
|
|
214
|
-
_dark: "coffee",
|
|
215
|
-
},
|
|
216
|
-
"& svg": {
|
|
217
|
-
color: {
|
|
218
|
-
_light: "cornsilk",
|
|
219
|
-
_dark: "coffee",
|
|
220
|
-
},
|
|
221
|
-
},
|
|
138
|
+
backgroundColor: { _light: "bronze", _dark: "banana" },
|
|
139
|
+
color: { _light: "cornsilk", _dark: "coffee" },
|
|
140
|
+
"& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
|
|
222
141
|
},
|
|
223
142
|
},
|
|
224
143
|
{
|
|
225
144
|
colorPalette: "orange",
|
|
226
145
|
inverted: true,
|
|
227
146
|
css: {
|
|
228
|
-
backgroundColor: {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
},
|
|
232
|
-
color: {
|
|
233
|
-
_light: "bisque",
|
|
234
|
-
_dark: "wood",
|
|
235
|
-
},
|
|
236
|
-
"& svg": {
|
|
237
|
-
color: {
|
|
238
|
-
_light: "bisque",
|
|
239
|
-
_dark: "wood",
|
|
240
|
-
},
|
|
241
|
-
},
|
|
147
|
+
backgroundColor: { _light: "wood", _dark: "champagne" },
|
|
148
|
+
color: { _light: "bisque", _dark: "wood" },
|
|
149
|
+
"& svg": { color: { _light: "bisque", _dark: "wood" } },
|
|
242
150
|
},
|
|
243
151
|
},
|
|
244
152
|
{
|
|
245
153
|
colorPalette: "red",
|
|
246
154
|
inverted: true,
|
|
247
155
|
css: {
|
|
248
|
-
backgroundColor: {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
},
|
|
252
|
-
color: {
|
|
253
|
-
_light: "pink",
|
|
254
|
-
_dark: "maroon",
|
|
255
|
-
},
|
|
256
|
-
"& svg": {
|
|
257
|
-
color: {
|
|
258
|
-
_light: "pink",
|
|
259
|
-
_dark: "maroon",
|
|
260
|
-
},
|
|
261
|
-
},
|
|
156
|
+
backgroundColor: { _light: "burgundy", _dark: "lightRed" },
|
|
157
|
+
color: { _light: "pink", _dark: "maroon" },
|
|
158
|
+
"& svg": { color: { _light: "pink", _dark: "maroon" } },
|
|
262
159
|
},
|
|
263
160
|
},
|
|
264
161
|
{
|
|
@@ -266,20 +163,9 @@ export const badgeRecipie = defineRecipe({
|
|
|
266
163
|
colorPalette: "neutral",
|
|
267
164
|
inverted: true,
|
|
268
165
|
css: {
|
|
269
|
-
backgroundColor: {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
},
|
|
273
|
-
color: {
|
|
274
|
-
_light: "white",
|
|
275
|
-
_dark: "darkGrey",
|
|
276
|
-
},
|
|
277
|
-
"& svg": {
|
|
278
|
-
color: {
|
|
279
|
-
_light: "white",
|
|
280
|
-
_dark: "darkGrey",
|
|
281
|
-
},
|
|
282
|
-
},
|
|
166
|
+
backgroundColor: { _light: "ink", _dark: "white" },
|
|
167
|
+
color: { _light: "white", _dark: "darkGrey" },
|
|
168
|
+
"& svg": { color: { _light: "white", _dark: "darkGrey" } },
|
|
283
169
|
},
|
|
284
170
|
},
|
|
285
171
|
],
|
|
@@ -24,6 +24,8 @@ export const popoverSlotRecipe = defineSlotRecipe({
|
|
|
24
24
|
|
|
25
25
|
transformOrigin: "var(--transform-origin)",
|
|
26
26
|
maxHeight: "var(--available-height)",
|
|
27
|
+
maxWidth: "var(--available-width)",
|
|
28
|
+
|
|
27
29
|
_open: {
|
|
28
30
|
animationStyle: "scale-fade-in",
|
|
29
31
|
animationDuration: "fast",
|
package/src/typography/Badge.tsx
CHANGED
|
@@ -6,18 +6,14 @@ import {
|
|
|
6
6
|
} from "@chakra-ui/react";
|
|
7
7
|
import { IconComponent } from "@vygruppen/spor-icon-react";
|
|
8
8
|
|
|
9
|
-
export type BadgeProps = ChakraBadgeProps & {
|
|
10
|
-
icon?: IconComponent;
|
|
11
|
-
};
|
|
9
|
+
export type BadgeProps = ChakraBadgeProps & { icon?: IconComponent };
|
|
12
10
|
|
|
13
11
|
export const Badge = function Badge({
|
|
14
12
|
ref,
|
|
15
13
|
icon,
|
|
16
14
|
children,
|
|
17
15
|
...props
|
|
18
|
-
}: BadgeProps & {
|
|
19
|
-
ref?: React.Ref<HTMLSpanElement>;
|
|
20
|
-
}) {
|
|
16
|
+
}: BadgeProps & { ref?: React.Ref<HTMLSpanElement> }) {
|
|
21
17
|
return (
|
|
22
18
|
<ChakraBadge ref={ref} {...props}>
|
|
23
19
|
{children}
|