@vygruppen/spor-react 13.7.0 → 13.7.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 +12 -12
- package/.turbo/turbo-postinstall.log +1 -1
- package/CHANGELOG.md +17 -0
- package/dist/index.cjs +29 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.mjs +29 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/input/Field.tsx +2 -4
- package/src/layout/RadioCard.tsx +4 -1
- package/src/theme/recipes/badge.ts +20 -0
- package/src/theme/slot-recipes/select.ts +5 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vygruppen/spor-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "13.7.
|
|
4
|
+
"version": "13.7.2",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"react-swipeable": "^7.0.1",
|
|
48
48
|
"usehooks-ts": "^3.1.0",
|
|
49
49
|
"@vygruppen/spor-design-tokens": "5.1.1",
|
|
50
|
-
"@vygruppen/spor-
|
|
51
|
-
"@vygruppen/spor-
|
|
50
|
+
"@vygruppen/spor-icon-react": "5.0.3",
|
|
51
|
+
"@vygruppen/spor-loader": "0.7.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@react-types/datepicker": "^3.10.0",
|
package/src/input/Field.tsx
CHANGED
|
@@ -121,23 +121,21 @@ export const Field = ({
|
|
|
121
121
|
gap={gap}
|
|
122
122
|
>
|
|
123
123
|
{label && !floatingLabel && (
|
|
124
|
-
<Label asChild={labelAsChild}
|
|
124
|
+
<Label asChild={labelAsChild} css={styles.label}>
|
|
125
125
|
{renderLabelWithIndicator(label, labelAsChild)}
|
|
126
126
|
</Label>
|
|
127
127
|
)}
|
|
128
128
|
|
|
129
|
-
{children}
|
|
130
|
-
|
|
131
129
|
{label && floatingLabel && (
|
|
132
130
|
<FloatingLabel
|
|
133
131
|
data-float={shouldFloat ? true : undefined}
|
|
134
132
|
asChild={labelAsChild}
|
|
135
|
-
aria-hidden
|
|
136
133
|
css={styles.label}
|
|
137
134
|
>
|
|
138
135
|
{renderLabelWithIndicator(label, labelAsChild)}
|
|
139
136
|
</FloatingLabel>
|
|
140
137
|
)}
|
|
138
|
+
{children}
|
|
141
139
|
{errorText && (
|
|
142
140
|
<ChakraField.ErrorText aria-live="polite">
|
|
143
141
|
{errorText}
|
package/src/layout/RadioCard.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
|
+
Flex,
|
|
3
4
|
RadioCard as ChakraRadioCard,
|
|
4
5
|
RecipeVariantProps,
|
|
5
6
|
useSlotRecipe,
|
|
@@ -64,7 +65,9 @@ export const RadioCard = ({
|
|
|
64
65
|
/>
|
|
65
66
|
<ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
|
|
66
67
|
{showIndicator && <ChakraRadioCard.ItemIndicator />}
|
|
67
|
-
|
|
68
|
+
<Flex direction="column" width="100%">
|
|
69
|
+
{children}
|
|
70
|
+
</Flex>
|
|
68
71
|
</ChakraRadioCard.ItemControl>
|
|
69
72
|
</ChakraRadioCard.Item>
|
|
70
73
|
);
|
|
@@ -7,57 +7,69 @@ export const badgeRecipie = defineRecipe({
|
|
|
7
7
|
justifyContent: "center",
|
|
8
8
|
height: "fit-content",
|
|
9
9
|
gap: "0.5",
|
|
10
|
+
outline: "1px solid",
|
|
11
|
+
outlineOffset: "-1px",
|
|
10
12
|
},
|
|
11
13
|
variants: {
|
|
12
14
|
colorPalette: {
|
|
13
15
|
neutral: {
|
|
14
16
|
backgroundColor: "surface",
|
|
15
17
|
color: "text",
|
|
18
|
+
outlineColor: "outline",
|
|
16
19
|
"& svg": { color: "icon" },
|
|
17
20
|
},
|
|
18
21
|
grey: {
|
|
19
22
|
backgroundColor: "surface.neutral",
|
|
20
23
|
color: "text.neutral",
|
|
24
|
+
outlineColor: "outline.neutral",
|
|
21
25
|
"& svg": { color: "icon.neutral" },
|
|
22
26
|
},
|
|
23
27
|
green: {
|
|
24
28
|
backgroundColor: "surface.success",
|
|
25
29
|
color: "text.success",
|
|
30
|
+
outlineColor: "outline.success",
|
|
26
31
|
"& svg": { color: "icon.success" },
|
|
27
32
|
},
|
|
28
33
|
blue: {
|
|
29
34
|
backgroundColor: "surface.info",
|
|
30
35
|
color: "text.info",
|
|
36
|
+
outlineColor: "outline.info",
|
|
31
37
|
"& svg": { color: "icon.info" },
|
|
32
38
|
},
|
|
33
39
|
cream: {
|
|
34
40
|
backgroundColor: "surface.warning",
|
|
35
41
|
color: "text.warning",
|
|
42
|
+
outlineColor: "outline.warning",
|
|
36
43
|
"& svg": { color: "icon.warning" },
|
|
37
44
|
},
|
|
38
45
|
yellow: {
|
|
39
46
|
backgroundColor: "surface.notice",
|
|
40
47
|
color: "text.notice",
|
|
48
|
+
outlineColor: "outline.notice",
|
|
41
49
|
"& svg": { color: "icon.notice" },
|
|
42
50
|
},
|
|
43
51
|
orange: {
|
|
44
52
|
backgroundColor: "surface.caution",
|
|
45
53
|
color: "text.caution",
|
|
54
|
+
outlineColor: "outline.caution",
|
|
46
55
|
"& svg": { color: "icon.caution" },
|
|
47
56
|
},
|
|
48
57
|
red: {
|
|
49
58
|
backgroundColor: "surface.critical",
|
|
50
59
|
color: "text.critical",
|
|
60
|
+
outlineColor: "outline.critical",
|
|
51
61
|
"& svg": { color: "icon.critical" },
|
|
52
62
|
},
|
|
53
63
|
brightRed: {
|
|
54
64
|
backgroundColor: { _light: "brightRed", _dark: "brightRed" },
|
|
55
65
|
color: { _light: "pink", _dark: "pink" },
|
|
66
|
+
outlineColor: "outline.error",
|
|
56
67
|
"& svg": { color: { _light: "pink", _dark: "pink" } },
|
|
57
68
|
},
|
|
58
69
|
disabled: {
|
|
59
70
|
backgroundColor: "surface.disabled",
|
|
60
71
|
color: "text.disabled",
|
|
72
|
+
outlineColor: "outline.disabled",
|
|
61
73
|
"& svg": { color: "icon.disabled" },
|
|
62
74
|
},
|
|
63
75
|
},
|
|
@@ -100,6 +112,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
100
112
|
css: {
|
|
101
113
|
backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
|
|
102
114
|
color: { _light: "icyBlue", _dark: "royal" },
|
|
115
|
+
outlineColor: { _light: "ocean", _dark: "cloudy" },
|
|
103
116
|
"& svg": { color: { _light: "royal", _dark: "icyBlue" } },
|
|
104
117
|
},
|
|
105
118
|
},
|
|
@@ -109,6 +122,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
109
122
|
css: {
|
|
110
123
|
backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
|
|
111
124
|
color: { _light: "mint", _dark: "jungle" },
|
|
125
|
+
outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
|
|
112
126
|
"& svg": { color: { _light: "mint", _dark: "jungle" } },
|
|
113
127
|
},
|
|
114
128
|
},
|
|
@@ -118,6 +132,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
118
132
|
css: {
|
|
119
133
|
backgroundColor: { _light: "carbon", _dark: "platinum" },
|
|
120
134
|
color: { _light: "white", _dark: "darkGrey" },
|
|
135
|
+
outlineColor: { _light: "iron", _dark: "silver" },
|
|
121
136
|
"& svg": { color: { _light: "white", _dark: "darkGrey" } },
|
|
122
137
|
},
|
|
123
138
|
},
|
|
@@ -128,6 +143,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
128
143
|
css: {
|
|
129
144
|
backgroundColor: { _light: "coffee", _dark: "blonde" },
|
|
130
145
|
color: { _light: "cornsilk", _dark: "coffee" },
|
|
146
|
+
outlineColor: { _light: "bronze", _dark: "banana" },
|
|
131
147
|
"& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
|
|
132
148
|
},
|
|
133
149
|
},
|
|
@@ -137,6 +153,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
137
153
|
css: {
|
|
138
154
|
backgroundColor: { _light: "bronze", _dark: "banana" },
|
|
139
155
|
color: { _light: "cornsilk", _dark: "coffee" },
|
|
156
|
+
outlineColor: { _light: "golden", _dark: "banana" },
|
|
140
157
|
"& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
|
|
141
158
|
},
|
|
142
159
|
},
|
|
@@ -146,6 +163,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
146
163
|
css: {
|
|
147
164
|
backgroundColor: { _light: "wood", _dark: "champagne" },
|
|
148
165
|
color: { _light: "bisque", _dark: "wood" },
|
|
166
|
+
outlineColor: { _light: "russet", _dark: "saffron" },
|
|
149
167
|
"& svg": { color: { _light: "bisque", _dark: "wood" } },
|
|
150
168
|
},
|
|
151
169
|
},
|
|
@@ -155,6 +173,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
155
173
|
css: {
|
|
156
174
|
backgroundColor: { _light: "burgundy", _dark: "lightRed" },
|
|
157
175
|
color: { _light: "pink", _dark: "maroon" },
|
|
176
|
+
outlineColor: { _light: "crimson", _dark: "salmon" },
|
|
158
177
|
"& svg": { color: { _light: "pink", _dark: "maroon" } },
|
|
159
178
|
},
|
|
160
179
|
},
|
|
@@ -164,6 +183,7 @@ export const badgeRecipie = defineRecipe({
|
|
|
164
183
|
inverted: true,
|
|
165
184
|
css: {
|
|
166
185
|
backgroundColor: { _light: "ink", _dark: "white" },
|
|
186
|
+
outlineColor: { _light: "whiteAlpha.400", _dark: "blackAlpha.400" },
|
|
167
187
|
color: { _light: "white", _dark: "darkGrey" },
|
|
168
188
|
"& svg": { color: { _light: "white", _dark: "darkGrey" } },
|
|
169
189
|
},
|
|
@@ -166,6 +166,11 @@ export const selectSlotRecipe = defineSlotRecipe({
|
|
|
166
166
|
outlineColor: "outline.error",
|
|
167
167
|
},
|
|
168
168
|
},
|
|
169
|
+
valueText: {
|
|
170
|
+
textOverflow: "ellipsis",
|
|
171
|
+
whiteSpace: "nowrap",
|
|
172
|
+
overflow: "hidden",
|
|
173
|
+
},
|
|
169
174
|
itemText: {
|
|
170
175
|
flex: "1",
|
|
171
176
|
alignItems: "center",
|