@vygruppen/spor-react 13.1.0 → 13.1.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.
Files changed (12) hide show
  1. package/.turbo/turbo-build.log +12 -12
  2. package/.turbo/turbo-postinstall.log +4 -3
  3. package/CHANGELOG.md +9 -0
  4. package/dist/index.cjs +99 -26
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +3 -2
  7. package/dist/index.d.ts +3 -2
  8. package/dist/index.mjs +99 -26
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +2 -2
  11. package/src/input/Menu.tsx +9 -5
  12. package/src/theme/recipes/badge.ts +97 -25
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
3
  "type": "module",
4
- "version": "13.1.0",
4
+ "version": "13.1.1",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
47
47
  "react-stately": "^3.31.1",
48
48
  "react-swipeable": "^7.0.1",
49
49
  "usehooks-ts": "^3.1.0",
50
- "@vygruppen/spor-design-tokens": "5.0.0",
50
+ "@vygruppen/spor-design-tokens": "5.0.1",
51
51
  "@vygruppen/spor-icon-react": "5.0.0",
52
52
  "@vygruppen/spor-loader": "0.7.0"
53
53
  },
package/src/input/Menu.tsx CHANGED
@@ -74,7 +74,8 @@ export const MenuContent = ({
74
74
 
75
75
  export type MenuTriggerProps = {
76
76
  icon?: ReactNode;
77
- } & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
77
+ withChevron?: boolean;
78
+ } & Omit<ButtonProps, "rightIcon" | "leftIcon"> & {
78
79
  ref?: Ref<HTMLButtonElement>;
79
80
  };
80
81
 
@@ -83,6 +84,7 @@ export const MenuTrigger = ({
83
84
  size,
84
85
  children,
85
86
  ref,
87
+ withChevron = true,
86
88
  ...props
87
89
  }: MenuTriggerProps) => {
88
90
  const { variant } = useMenuContext();
@@ -104,10 +106,12 @@ export const MenuTrigger = ({
104
106
  size={size}
105
107
  {...props}
106
108
  rightIcon={
107
- <ChevronIcon
108
- transform={open ? "rotate(180deg)" : undefined}
109
- transition="transform 0.3s"
110
- />
109
+ withChevron && (
110
+ <ChevronIcon
111
+ transform={open ? "rotate(180deg)" : undefined}
112
+ transition="transform 0.3s"
113
+ />
114
+ )
111
115
  }
112
116
  >
113
117
  {children}
package/src/theme/recipes/badge.ts CHANGED
@@ -25,7 +25,7 @@ export const badgeRecipie = defineRecipe({
25
25
  },
26
26
  },
27
27
  green: {
28
- backgroundColor: "surface.subtle",
28
+ backgroundColor: "surface.success",
29
29
  color: "text.success",
30
30
  "& svg": {
31
31
  color: "icon.success",
@@ -108,10 +108,19 @@ export const badgeRecipie = defineRecipe({
108
108
  colorPalette: "blue",
109
109
  inverted: true,
110
110
  css: {
111
- backgroundColor: "badge.blue.surface.inverted",
112
- color: "badge.blue.text.inverted",
111
+ backgroundColor: {
112
+ _light: "darkBlue",
113
+ _dark: "lightBlue",
114
+ },
115
+ color: {
116
+ _light: "icyBlue",
117
+ _dark: "royal",
118
+ },
113
119
  "& svg": {
114
- color: "badge.blue.icon.inverted",
120
+ color: {
121
+ _light: "royal",
122
+ _dark: "icyBlue",
123
+ },
115
124
  },
116
125
  },
117
126
  },
@@ -119,10 +128,19 @@ export const badgeRecipie = defineRecipe({
119
128
  colorPalette: "green",
120
129
  inverted: true,
121
130
  css: {
122
- backgroundColor: "badge.green.surface.inverted",
123
- color: "badge.green.text.inverted",
131
+ backgroundColor: {
132
+ _light: "darkTeal",
133
+ _dark: "seaMist",
134
+ },
135
+ color: {
136
+ _light: "mint",
137
+ _dark: "jungle",
138
+ },
124
139
  "& svg": {
125
- color: "badge.green.icon.inverted",
140
+ color: {
141
+ _light: "mint",
142
+ _dark: "jungle",
143
+ },
126
144
  },
127
145
  },
128
146
  },
@@ -130,10 +148,19 @@ export const badgeRecipie = defineRecipe({
130
148
  colorPalette: "grey",
131
149
  inverted: true,
132
150
  css: {
133
- backgroundColor: "badge.grey.surface.inverted",
134
- color: "badge.grey.text.inverted",
151
+ backgroundColor: {
152
+ _light: "carbon",
153
+ _dark: "platinum",
154
+ },
155
+ color: {
156
+ _light: "white",
157
+ _dark: "darkGrey",
158
+ },
135
159
  "& svg": {
136
- color: "badge.grey.icon.inverted",
160
+ color: {
161
+ _light: "white",
162
+ _dark: "darkGrey",
163
+ },
137
164
  },
138
165
  },
139
166
  },
@@ -142,10 +169,19 @@ export const badgeRecipie = defineRecipe({
142
169
  colorPalette: "cream",
143
170
  inverted: true,
144
171
  css: {
145
- backgroundColor: "badge.cream.surface.inverted",
146
- color: "badge.cream.text.inverted",
172
+ backgroundColor: {
173
+ _light: "coffee",
174
+ _dark: "blonde",
175
+ },
176
+ color: {
177
+ _light: "cornsilk",
178
+ _dark: "coffee",
179
+ },
147
180
  "& svg": {
148
- color: "badge.cream.icon.inverted",
181
+ color: {
182
+ _light: "cornsilk",
183
+ _dark: "coffee",
184
+ },
149
185
  },
150
186
  },
151
187
  },
@@ -153,10 +189,19 @@ export const badgeRecipie = defineRecipe({
153
189
  colorPalette: "yellow",
154
190
  inverted: true,
155
191
  css: {
156
- backgroundColor: "badge.yellow.surface.inverted",
157
- color: "badge.yellow.text.inverted",
192
+ backgroundColor: {
193
+ _light: "bronze",
194
+ _dark: "banana",
195
+ },
196
+ color: {
197
+ _light: "cornsilk",
198
+ _dark: "coffee",
199
+ },
158
200
  "& svg": {
159
- color: "badge.yellow.icon.inverted",
201
+ color: {
202
+ _light: "cornsilk",
203
+ _dark: "coffee",
204
+ },
160
205
  },
161
206
  },
162
207
  },
@@ -164,10 +209,19 @@ export const badgeRecipie = defineRecipe({
164
209
  colorPalette: "orange",
165
210
  inverted: true,
166
211
  css: {
167
- backgroundColor: "badge.orange.surface.inverted",
168
- color: "badge.orange.text.inverted",
212
+ backgroundColor: {
213
+ _light: "wood",
214
+ _dark: "champagne",
215
+ },
216
+ color: {
217
+ _light: "bisque",
218
+ _dark: "wood",
219
+ },
169
220
  "& svg": {
170
- color: "badge.orange.icon.inverted",
221
+ color: {
222
+ _light: "bisque",
223
+ _dark: "wood",
224
+ },
171
225
  },
172
226
  },
173
227
  },
@@ -175,10 +229,19 @@ export const badgeRecipie = defineRecipe({
175
229
  colorPalette: "red",
176
230
  inverted: true,
177
231
  css: {
178
- backgroundColor: "badge.red.surface.inverted",
179
- color: "badge.red.text.inverted",
232
+ backgroundColor: {
233
+ _light: "burgundy",
234
+ _dark: "lightRed",
235
+ },
236
+ color: {
237
+ _light: "pink",
238
+ _dark: "maroon",
239
+ },
180
240
  "& svg": {
181
- color: "badge.red.icon.inverted",
241
+ color: {
242
+ _light: "pink",
243
+ _dark: "maroon",
244
+ },
182
245
  },
183
246
  },
184
247
  },
@@ -187,10 +250,19 @@ export const badgeRecipie = defineRecipe({
187
250
  colorPalette: "neutral",
188
251
  inverted: true,
189
252
  css: {
190
- backgroundColor: "badge.surface.inverted",
191
- color: "badge.text.inverted",
253
+ backgroundColor: {
254
+ _light: "ink",
255
+ _dark: "white",
256
+ },
257
+ color: {
258
+ _light: "white",
259
+ _dark: "darkGrey",
260
+ },
192
261
  "& svg": {
193
- color: "badge.icon.inverted",
262
+ color: {
263
+ _light: "white",
264
+ _dark: "darkGrey",
265
+ },
194
266
  },
195
267
  },
196
268
  },