@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.
- package/CHANGELOG.md +6 -0
- package/dist/.tsbuildinfo.json +1 -1
- package/dist/components/avatar/avatar.recipe.d.ts +6 -7
- package/dist/components/avatar/avatar.recipe.js +6 -7
- package/dist/components/card/card.recipe.d.ts +14 -6
- package/dist/components/card/card.recipe.js +18 -9
- package/dist/components/checkbox/checkbox.recipe.d.ts +3 -3
- package/dist/components/checkbox-card/checkbox-card.recipe.d.ts +3 -3
- package/dist/components/checkmark/checkmark.recipe.d.ts +3 -3
- package/dist/components/checkmark/checkmark.recipe.js +4 -4
- package/dist/components/dialog/dialog.recipe.d.ts +19 -1
- package/dist/components/dialog/dialog.recipe.js +34 -3
- package/dist/components/grid-list/grid-list.recipe.js +4 -5
- package/dist/components/icon-badge/icon-badge.d.ts +1 -1
- package/dist/components/icon-badge/icon-badge.recipe.js +1 -0
- package/dist/components/input/input-addon.recipe.d.ts +1 -1
- package/dist/components/input/input-addon.recipe.js +1 -1
- package/dist/components/loading-overlay/loading-overlay.recipe.d.ts +3 -12
- package/dist/components/loading-overlay/loading-overlay.recipe.js +3 -12
- package/dist/components/menu/menu.recipe.js +2 -2
- package/dist/components/navbar/navbar.recipe.d.ts +1 -1
- package/dist/components/navbar/navbar.recipe.js +1 -4
- package/dist/components/page/page.recipe.d.ts +4 -0
- package/dist/components/page/page.recipe.js +4 -2
- package/dist/components/radio/index.d.ts +1 -0
- package/dist/components/radio/index.js +1 -0
- package/dist/components/sidebar/sidebar.d.ts +13 -12
- package/dist/components/tabs/tabs.recipe.d.ts +29 -10
- package/dist/components/tabs/tabs.recipe.js +28 -9
- package/dist/theme/layer-styles.js +12 -4
- package/dist/theme/recipes.d.ts +4 -4
- package/dist/theme/slot-recipes.d.ts +103 -64
- package/package.json +1 -1
@@ -1,4 +1,4 @@
|
|
1
|
-
export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "
|
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
|
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
|
128
|
-
color: "colorPalette.fg
|
129
|
-
borderColor: "colorPalette.solid/
|
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.
|
148
|
+
color: "fg.subtle";
|
140
149
|
_hover: {
|
141
|
-
bg: "
|
142
|
-
color: "fg
|
150
|
+
bg: "colorPalette.muted";
|
151
|
+
color: "colorPalette.fg";
|
143
152
|
};
|
144
153
|
_selected: {
|
145
|
-
bg: "colorPalette.subtle
|
146
|
-
color: "colorPalette.fg
|
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";
|
@@ -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
|
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
|
196
|
-
color: 'colorPalette.fg
|
197
|
-
borderColor: 'colorPalette.solid/
|
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.
|
216
|
+
color: 'fg.subtle',
|
208
217
|
_hover: {
|
209
|
-
bg: '
|
210
|
-
color: 'fg
|
218
|
+
bg: 'colorPalette.muted',
|
219
|
+
color: 'colorPalette.fg',
|
211
220
|
},
|
212
221
|
_selected: {
|
213
|
-
bg: 'colorPalette.subtle
|
214
|
-
color: 'colorPalette.fg
|
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',
|
@@ -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,
|
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,
|
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,
|
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,
|
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: "
|
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.
|
704
|
+
borderColor: "colorPalette.emphasized";
|
705
705
|
'&:is([data-state=checked], [data-state=indeterminate])': {
|
706
706
|
color: "colorPalette.fg";
|
707
707
|
};
|