@saas-ui/react 3.0.0-next.26 → 3.0.0-next.27

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 (33) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/.tsbuildinfo.json +1 -1
  3. package/dist/components/avatar/avatar.recipe.d.ts +6 -7
  4. package/dist/components/avatar/avatar.recipe.js +6 -7
  5. package/dist/components/card/card.recipe.d.ts +14 -6
  6. package/dist/components/card/card.recipe.js +18 -9
  7. package/dist/components/checkbox/checkbox.recipe.d.ts +3 -3
  8. package/dist/components/checkbox-card/checkbox-card.recipe.d.ts +3 -3
  9. package/dist/components/checkmark/checkmark.recipe.d.ts +3 -3
  10. package/dist/components/checkmark/checkmark.recipe.js +4 -4
  11. package/dist/components/dialog/dialog.recipe.d.ts +19 -1
  12. package/dist/components/dialog/dialog.recipe.js +34 -3
  13. package/dist/components/grid-list/grid-list.recipe.js +4 -5
  14. package/dist/components/icon-badge/icon-badge.d.ts +1 -1
  15. package/dist/components/icon-badge/icon-badge.recipe.js +1 -0
  16. package/dist/components/input/input-addon.recipe.d.ts +1 -1
  17. package/dist/components/input/input-addon.recipe.js +1 -1
  18. package/dist/components/loading-overlay/loading-overlay.recipe.d.ts +3 -12
  19. package/dist/components/loading-overlay/loading-overlay.recipe.js +3 -12
  20. package/dist/components/menu/menu.recipe.js +2 -2
  21. package/dist/components/navbar/navbar.recipe.d.ts +1 -1
  22. package/dist/components/navbar/navbar.recipe.js +1 -4
  23. package/dist/components/page/page.recipe.d.ts +4 -0
  24. package/dist/components/page/page.recipe.js +4 -2
  25. package/dist/components/radio/index.d.ts +1 -0
  26. package/dist/components/radio/index.js +1 -0
  27. package/dist/components/sidebar/sidebar.d.ts +13 -12
  28. package/dist/components/tabs/tabs.recipe.d.ts +29 -10
  29. package/dist/components/tabs/tabs.recipe.js +28 -9
  30. package/dist/theme/layer-styles.js +12 -4
  31. package/dist/theme/recipes.d.ts +4 -4
  32. package/dist/theme/slot-recipes.d.ts +103 -64
  33. package/package.json +1 -1
package/dist/components/tabs/tabs.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "root" | "list" | "trigger" | "contentGroup", {
1
+ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "indicator" | "list" | "trigger" | "contentGroup", {
2
2
  fitted: {
3
3
  true: {
4
4
  list: {
@@ -33,6 +33,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
33
33
  root: {
34
34
  '--tabs-height': "sizes.6";
35
35
  '--tabs-content-padding': "spacing.2";
36
+ '--tabs-trigger-radius': "radii.control.sm";
36
37
  };
37
38
  trigger: {
38
39
  py: "1";
@@ -44,6 +45,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
44
45
  root: {
45
46
  '--tabs-height': "sizes.7";
46
47
  '--tabs-content-padding': "spacing.3";
48
+ '--tabs-trigger-radius': "radii.control.md";
47
49
  };
48
50
  trigger: {
49
51
  py: "1";
@@ -55,6 +57,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
55
57
  root: {
56
58
  '--tabs-height': "sizes.8";
57
59
  '--tabs-content-padding': "spacing.4";
60
+ '--tabs-trigger-radius': "radii.control.md";
58
61
  };
59
62
  trigger: {
60
63
  py: "2";
@@ -66,6 +69,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
66
69
  root: {
67
70
  '--tabs-height': "sizes.10";
68
71
  '--tabs-content-padding': "spacing.4.5";
72
+ '--tabs-trigger-radius': "radii.control.lg";
69
73
  };
70
74
  trigger: {
71
75
  py: "2";
@@ -97,9 +101,10 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
97
101
  };
98
102
  };
99
103
  _selected: {
100
- color: "fg !important";
104
+ color: "fg";
101
105
  _horizontal: {
102
106
  layerStyle: "indicator.bottom";
107
+ borderTopRadius: "3px";
103
108
  '--indicator-offset-y': "-1px";
104
109
  '--indicator-color': "colors.colorPalette.solid";
105
110
  };
@@ -124,9 +129,13 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
124
129
  color: "fg.subtle";
125
130
  };
126
131
  _selected: {
127
- bg: "colorPalette.subtle !important";
128
- color: "colorPalette.fg !important";
129
- borderColor: "colorPalette.solid/50";
132
+ bg: "colorPalette.subtle";
133
+ color: "colorPalette.fg";
134
+ borderColor: "colorPalette.solid/40";
135
+ _hover: {
136
+ bg: "colorPalette.subtle";
137
+ color: "colorPalette.fg";
138
+ };
130
139
  };
131
140
  };
132
141
  };
@@ -136,14 +145,18 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
136
145
  };
137
146
  trigger: {
138
147
  borderRadius: "var(--tabs-trigger-radius)";
139
- color: "fg.muted";
148
+ color: "fg.subtle";
140
149
  _hover: {
141
- bg: "bg.muted";
142
- color: "fg.subtle";
150
+ bg: "colorPalette.muted";
151
+ color: "colorPalette.fg";
143
152
  };
144
153
  _selected: {
145
- bg: "colorPalette.subtle !important";
146
- color: "colorPalette.fg !important";
154
+ bg: "colorPalette.subtle";
155
+ color: "colorPalette.fg";
156
+ _hover: {
157
+ bg: "colorPalette.subtle";
158
+ color: "colorPalette.fg";
159
+ };
147
160
  };
148
161
  };
149
162
  };
@@ -159,6 +172,9 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
159
172
  justifyContent: "center";
160
173
  color: "fg.muted";
161
174
  borderRadius: "var(--tabs-trigger-radius)";
175
+ _hover: {
176
+ color: "fg.subtle";
177
+ };
162
178
  _selected: {
163
179
  bg: "bg";
164
180
  color: "colorPalette.fg";
@@ -197,6 +213,9 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
197
213
  color: "fg.muted";
198
214
  borderWidth: "1px";
199
215
  borderColor: "transparent";
216
+ _hover: {
217
+ color: "fg.subtle";
218
+ };
200
219
  _selected: {
201
220
  bg: "currentBg";
202
221
  color: "colorPalette.fg";
package/dist/components/tabs/tabs.recipe.js CHANGED
@@ -103,6 +103,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
103
103
  root: {
104
104
  '--tabs-height': 'sizes.6',
105
105
  '--tabs-content-padding': 'spacing.2',
106
+ '--tabs-trigger-radius': 'radii.control.sm',
106
107
  },
107
108
  trigger: {
108
109
  py: '1',
@@ -114,6 +115,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
114
115
  root: {
115
116
  '--tabs-height': 'sizes.7',
116
117
  '--tabs-content-padding': 'spacing.3',
118
+ '--tabs-trigger-radius': 'radii.control.md',
117
119
  },
118
120
  trigger: {
119
121
  py: '1',
@@ -125,6 +127,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
125
127
  root: {
126
128
  '--tabs-height': 'sizes.8',
127
129
  '--tabs-content-padding': 'spacing.4',
130
+ '--tabs-trigger-radius': 'radii.control.md',
128
131
  },
129
132
  trigger: {
130
133
  py: '2',
@@ -136,6 +139,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
136
139
  root: {
137
140
  '--tabs-height': 'sizes.10',
138
141
  '--tabs-content-padding': 'spacing.4.5',
142
+ '--tabs-trigger-radius': 'radii.control.lg',
139
143
  },
140
144
  trigger: {
141
145
  py: '2',
@@ -165,9 +169,10 @@ export const tabsSlotRecipe = defineSlotRecipe({
165
169
  _active: { bg: 'initial' },
166
170
  },
167
171
  _selected: {
168
- color: 'fg !important',
172
+ color: 'fg',
169
173
  _horizontal: {
170
174
  layerStyle: 'indicator.bottom',
175
+ borderTopRadius: '3px',
171
176
  '--indicator-offset-y': '-1px',
172
177
  '--indicator-color': 'colors.colorPalette.solid',
173
178
  },
@@ -192,9 +197,13 @@ export const tabsSlotRecipe = defineSlotRecipe({
192
197
  color: 'fg.subtle',
193
198
  },
194
199
  _selected: {
195
- bg: 'colorPalette.subtle !important',
196
- color: 'colorPalette.fg !important',
197
- borderColor: 'colorPalette.solid/50',
200
+ bg: 'colorPalette.subtle',
201
+ color: 'colorPalette.fg',
202
+ borderColor: 'colorPalette.solid/40',
203
+ _hover: {
204
+ bg: 'colorPalette.subtle',
205
+ color: 'colorPalette.fg',
206
+ },
198
207
  },
199
208
  },
200
209
  },
@@ -204,14 +213,18 @@ export const tabsSlotRecipe = defineSlotRecipe({
204
213
  },
205
214
  trigger: {
206
215
  borderRadius: 'var(--tabs-trigger-radius)',
207
- color: 'fg.muted',
216
+ color: 'fg.subtle',
208
217
  _hover: {
209
- bg: 'bg.muted',
210
- color: 'fg.subtle',
218
+ bg: 'colorPalette.muted',
219
+ color: 'colorPalette.fg',
211
220
  },
212
221
  _selected: {
213
- bg: 'colorPalette.subtle !important',
214
- color: 'colorPalette.fg !important',
222
+ bg: 'colorPalette.subtle',
223
+ color: 'colorPalette.fg',
224
+ _hover: {
225
+ bg: 'colorPalette.subtle',
226
+ color: 'colorPalette.fg',
227
+ },
215
228
  },
216
229
  },
217
230
  },
@@ -227,6 +240,9 @@ export const tabsSlotRecipe = defineSlotRecipe({
227
240
  justifyContent: 'center',
228
241
  color: 'fg.muted',
229
242
  borderRadius: 'var(--tabs-trigger-radius)',
243
+ _hover: {
244
+ color: 'fg.subtle',
245
+ },
230
246
  _selected: {
231
247
  bg: 'bg',
232
248
  color: 'colorPalette.fg',
@@ -265,6 +281,9 @@ export const tabsSlotRecipe = defineSlotRecipe({
265
281
  color: 'fg.muted',
266
282
  borderWidth: '1px',
267
283
  borderColor: 'transparent',
284
+ _hover: {
285
+ color: 'fg.subtle',
286
+ },
268
287
  _selected: {
269
288
  bg: 'currentBg',
270
289
  color: 'colorPalette.fg',
package/dist/theme/layer-styles.js CHANGED
@@ -52,7 +52,9 @@ export const layerStyles = defineLayerStyles({
52
52
  position: 'absolute',
53
53
  bottom: 'var(--indicator-offset-y, 0)',
54
54
  insetInline: 'var(--indicator-offset-x, 0)',
55
- height: 'var(--indicator-thickness, 2px)',
55
+ height: 'var(--indicator-thickness, 3px)',
56
+ borderTopLeftRadius: 'var(--indicator-thickness, 3px)',
57
+ borderTopRightRadius: 'var(--indicator-thickness, 3px)',
56
58
  background: 'var(--indicator-color, var(--indicator-color-fallback))',
57
59
  },
58
60
  },
@@ -66,7 +68,9 @@ export const layerStyles = defineLayerStyles({
66
68
  position: 'absolute',
67
69
  top: 'var(--indicator-offset-y, 0)',
68
70
  insetInline: 'var(--indicator-offset-x, 0)',
69
- height: 'var(--indicator-thickness, 2px)',
71
+ height: 'var(--indicator-thickness, 3px)',
72
+ borderBottomLeftRadius: 'var(--indicator-thickness, 3px)',
73
+ borderBottomRightRadius: 'var(--indicator-thickness, 3px)',
70
74
  background: 'var(--indicator-color, var(--indicator-color-fallback))',
71
75
  },
72
76
  },
@@ -80,7 +84,9 @@ export const layerStyles = defineLayerStyles({
80
84
  position: 'absolute',
81
85
  insetInlineStart: 'var(--indicator-offset-x, 0)',
82
86
  insetBlock: 'var(--indicator-offset-y, 0)',
83
- width: 'var(--indicator-thickness, 2px)',
87
+ width: 'var(--indicator-thickness, 3px)',
88
+ borderTopLeftRadius: 'var(--indicator-thickness, 3px)',
89
+ borderBottomLeftRadius: 'var(--indicator-thickness, 3px)',
84
90
  background: 'var(--indicator-color, var(--indicator-color-fallback))',
85
91
  },
86
92
  },
@@ -94,7 +100,9 @@ export const layerStyles = defineLayerStyles({
94
100
  position: 'absolute',
95
101
  insetInlineEnd: 'var(--indicator-offset-x, 0)',
96
102
  insetBlock: 'var(--indicator-offset-y, 0)',
97
- width: 'var(--indicator-thickness, 2px)',
103
+ width: 'var(--indicator-thickness, 3px)',
104
+ borderTopRightRadius: 'var(--indicator-thickness, 3px)',
105
+ borderBottomRightRadius: 'var(--indicator-thickness, 3px)',
98
106
  background: 'var(--indicator-color, var(--indicator-color-fallback))',
99
107
  },
100
108
  },
package/dist/theme/recipes.d.ts CHANGED
@@ -394,7 +394,7 @@ export declare const recipes: {
394
394
  borderColor: "transparent";
395
395
  bg: {
396
396
  _light: "gray.100";
397
- _dark: "whiteAlpha.50";
397
+ _dark: "white/10";
398
398
  };
399
399
  };
400
400
  flushed: {
@@ -685,7 +685,7 @@ export declare const recipes: {
685
685
  };
686
686
  variant: {
687
687
  solid: {
688
- borderColor: "border";
688
+ borderColor: "border.emphasized";
689
689
  '&:is([data-state=checked], [data-state=indeterminate])': {
690
690
  bg: "colorPalette.solid";
691
691
  color: "colorPalette.contrast";
@@ -693,7 +693,7 @@ export declare const recipes: {
693
693
  };
694
694
  };
695
695
  outline: {
696
- borderColor: "border";
696
+ borderColor: "border.emphasized";
697
697
  '&:is([data-state=checked], [data-state=indeterminate])': {
698
698
  color: "colorPalette.fg";
699
699
  borderColor: "colorPalette.solid";
@@ -701,7 +701,7 @@ export declare const recipes: {
701
701
  };
702
702
  subtle: {
703
703
  bg: "colorPalette.muted";
704
- borderColor: "colorPalette.muted";
704
+ borderColor: "colorPalette.emphasized";
705
705
  '&:is([data-state=checked], [data-state=indeterminate])': {
706
706
  color: "colorPalette.fg";
707
707
  };