@saas-ui/react 3.0.0-next.34 → 3.0.0-next.35
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/page/page.recipe.d.ts +1 -1
- package/dist/components/page/page.recipe.js +1 -1
- package/dist/components/segmented-control/segment-group.recipe.d.ts +1 -1
- package/dist/components/segmented-control/segment-group.recipe.js +1 -1
- package/dist/components/sidebar/sidebar.recipe.d.ts +2 -2
- package/dist/components/sidebar/sidebar.recipe.js +19 -2
- package/dist/theme/global-css.js +3 -4
- package/dist/theme/semantic-tokens/colors.d.ts +6 -0
- package/dist/theme/semantic-tokens/colors.js +3 -0
- package/dist/theme/semantic-tokens/shadows.js +7 -7
- package/dist/theme/slot-recipes.d.ts +12 -12
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const segmentGroupSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
1
|
+
export declare const segmentGroupSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "label" | "root" | "item" | "itemText" | "itemControl", {
|
|
2
2
|
size: {
|
|
3
3
|
xs: {
|
|
4
4
|
root: {
|
|
@@ -59,7 +59,6 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({
|
|
|
59
59
|
},
|
|
60
60
|
},
|
|
61
61
|
indicator: {
|
|
62
|
-
shadow: 'sm',
|
|
63
62
|
pos: 'absolute',
|
|
64
63
|
bg: {
|
|
65
64
|
base: 'bg',
|
|
@@ -71,6 +70,7 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({
|
|
|
71
70
|
left: 'var(--left)',
|
|
72
71
|
zIndex: -1,
|
|
73
72
|
borderRadius: 'var(--segment-radius)',
|
|
73
|
+
boxShadow: '0 0 0 1px {colors.border.emphasized}',
|
|
74
74
|
},
|
|
75
75
|
},
|
|
76
76
|
variants: {
|
|
@@ -12,8 +12,8 @@ export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDef
|
|
|
12
12
|
borderColor: "sidebar.border";
|
|
13
13
|
borderWidth: "1px";
|
|
14
14
|
borderRadius: "panel.md";
|
|
15
|
-
marginBlock:
|
|
16
|
-
marginEnd:
|
|
15
|
+
marginBlock: "var(--inset-gap, {spacing.2})";
|
|
16
|
+
marginEnd: "var(--inset-gap, {spacing.2})";
|
|
17
17
|
overflow: "clip";
|
|
18
18
|
};
|
|
19
19
|
};
|
|
@@ -145,6 +145,7 @@ export const sidebarSlotRecipe = defineSlotRecipe({
|
|
|
145
145
|
minHeight: '0',
|
|
146
146
|
display: 'flex',
|
|
147
147
|
flexDirection: 'column',
|
|
148
|
+
bg: 'bg.content',
|
|
148
149
|
},
|
|
149
150
|
},
|
|
150
151
|
variants: {
|
|
@@ -161,8 +162,8 @@ export const sidebarSlotRecipe = defineSlotRecipe({
|
|
|
161
162
|
borderColor: 'sidebar.border',
|
|
162
163
|
borderWidth: '1px',
|
|
163
164
|
borderRadius: 'panel.md',
|
|
164
|
-
marginBlock: 2,
|
|
165
|
-
marginEnd: 2,
|
|
165
|
+
marginBlock: 'var(--inset-gap, {spacing.2})',
|
|
166
|
+
marginEnd: 'var(--inset-gap, {spacing.2})',
|
|
166
167
|
overflow: 'clip',
|
|
167
168
|
},
|
|
168
169
|
},
|
|
@@ -255,6 +256,22 @@ export const sidebarSlotRecipe = defineSlotRecipe({
|
|
|
255
256
|
},
|
|
256
257
|
},
|
|
257
258
|
},
|
|
259
|
+
compoundVariants: [
|
|
260
|
+
{
|
|
261
|
+
variant: 'inset',
|
|
262
|
+
mode: 'collapsible',
|
|
263
|
+
css: {
|
|
264
|
+
root: {
|
|
265
|
+
py: 'var(--inset-gap, {spacing.2})',
|
|
266
|
+
_closed: {
|
|
267
|
+
'& [class*="__inset"]': {
|
|
268
|
+
ps: 'var(--inset-gap, {spacing.2})',
|
|
269
|
+
},
|
|
270
|
+
},
|
|
271
|
+
},
|
|
272
|
+
},
|
|
273
|
+
},
|
|
274
|
+
],
|
|
258
275
|
defaultVariants: {
|
|
259
276
|
variant: 'sidebar',
|
|
260
277
|
mode: 'collapsible',
|
package/dist/theme/global-css.js
CHANGED
|
@@ -33,15 +33,14 @@ export const globalCss = defineGlobalStyles({
|
|
|
33
33
|
'--global-font-body': 'fonts.body',
|
|
34
34
|
'--global-color-border': 'colors.border',
|
|
35
35
|
'--cursor-button': 'default',
|
|
36
|
-
// '--radius-factor': '1',
|
|
37
|
-
// '--radius-control': '1',
|
|
38
|
-
// '--radius-panel': '1',
|
|
39
|
-
// '--radius-indicator': '1',
|
|
40
36
|
'--radius-full': '9999px',
|
|
41
37
|
'--scale-factor': '1',
|
|
42
38
|
'--overlay-translucency': '95%',
|
|
43
39
|
'--overlay-effect': 'blur({blurs.lg})',
|
|
44
40
|
'--backdrop-effect': 'none',
|
|
41
|
+
'--scrollbar-color': 'colors.border.emphasized',
|
|
42
|
+
scrollbarWidth: 'thin',
|
|
43
|
+
scrollbarColor: 'var(--scrollbar-color) transparent',
|
|
45
44
|
},
|
|
46
45
|
'.dark *': {
|
|
47
46
|
'--overlay-translucency': '85%',
|
|
@@ -66,6 +66,9 @@ export const semanticColors = defineSemanticTokens.colors({
|
|
|
66
66
|
inverted: {
|
|
67
67
|
value: { _light: '{colors.black}', _dark: '{colors.white}' },
|
|
68
68
|
},
|
|
69
|
+
content: {
|
|
70
|
+
value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
|
|
71
|
+
},
|
|
69
72
|
panel: {
|
|
70
73
|
value: { _light: '{colors.white}', _dark: '{colors.gray.900}' },
|
|
71
74
|
},
|
|
@@ -3,37 +3,37 @@ export const semanticShadows = defineSemanticTokens.shadows({
|
|
|
3
3
|
xs: {
|
|
4
4
|
value: {
|
|
5
5
|
_light: '0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/5}',
|
|
6
|
-
_dark: '0px 1px 1px {black/
|
|
6
|
+
_dark: '0px 1px 1px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
|
|
7
7
|
},
|
|
8
8
|
},
|
|
9
9
|
sm: {
|
|
10
10
|
value: {
|
|
11
11
|
_light: '0px 2px 4px {colors.gray.900/5}, 0px 0px 2px {colors.gray.900/5}',
|
|
12
|
-
_dark: '0px 2px 4px {black/
|
|
12
|
+
_dark: '0px 2px 4px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
md: {
|
|
16
16
|
value: {
|
|
17
17
|
_light: '0px 4px 8px {colors.gray.900/5}, 0px 0px 3px {colors.gray.900/5}',
|
|
18
|
-
_dark: '0px 4px 8px {black/
|
|
18
|
+
_dark: '0px 4px 8px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
|
|
19
19
|
},
|
|
20
20
|
},
|
|
21
21
|
lg: {
|
|
22
22
|
value: {
|
|
23
23
|
_light: '0px 8px 16px {colors.gray.900/5}, 0px 0px 4px {colors.gray.900/5}',
|
|
24
|
-
_dark: '0px 8px 16px {black/
|
|
24
|
+
_dark: '0px 8px 16px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
|
|
25
25
|
},
|
|
26
26
|
},
|
|
27
27
|
xl: {
|
|
28
28
|
value: {
|
|
29
29
|
_light: '0px 16px 24px {colors.gray.900/5}, 0px 0px 5px {colors.gray.900/5}',
|
|
30
|
-
_dark: '0px 16px 24px {black/
|
|
30
|
+
_dark: '0px 16px 24px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
|
|
31
31
|
},
|
|
32
32
|
},
|
|
33
33
|
'2xl': {
|
|
34
34
|
value: {
|
|
35
35
|
_light: '0px 24px 40px {colors.gray.900/10}, 0px 0px 6px {colors.gray.900/5}',
|
|
36
|
-
_dark: '0px 24px 40px {black/
|
|
36
|
+
_dark: '0px 24px 40px {black/30}, 0px 0px 1px inset {colors.gray.300/5}',
|
|
37
37
|
},
|
|
38
38
|
},
|
|
39
39
|
inner: {
|
|
@@ -45,7 +45,7 @@ export const semanticShadows = defineSemanticTokens.shadows({
|
|
|
45
45
|
inset: {
|
|
46
46
|
value: {
|
|
47
47
|
_light: 'inset 0 1px 2px 0 {black/5}',
|
|
48
|
-
_dark: 'inset 0 -1px 2px 0 {colors.gray.300/
|
|
48
|
+
_dark: 'inset 0 -1px 2px 0 {colors.gray.300/4}, inset 0 0 0 1px {colors.gray.300/4}',
|
|
49
49
|
},
|
|
50
50
|
},
|
|
51
51
|
});
|
|
@@ -75,7 +75,7 @@ export declare const slotRecipes: {
|
|
|
75
75
|
};
|
|
76
76
|
}>;
|
|
77
77
|
actionBar: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger">>;
|
|
78
|
-
alert: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
78
|
+
alert: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "indicator" | "root" | "title", {
|
|
79
79
|
status: {
|
|
80
80
|
info: {
|
|
81
81
|
root: {
|
|
@@ -381,7 +381,7 @@ export declare const slotRecipes: {
|
|
|
381
381
|
};
|
|
382
382
|
};
|
|
383
383
|
}>;
|
|
384
|
-
card: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
384
|
+
card: import("@chakra-ui/react").SlotRecipeDefinition<"body" | "description" | "root" | "title" | "header" | "footer", {
|
|
385
385
|
size: {
|
|
386
386
|
sm: {
|
|
387
387
|
root: {
|
|
@@ -539,7 +539,7 @@ export declare const slotRecipes: {
|
|
|
539
539
|
};
|
|
540
540
|
};
|
|
541
541
|
}>;
|
|
542
|
-
checkboxCard: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
542
|
+
checkboxCard: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "control" | "indicator" | "label" | "root" | "addon", {
|
|
543
543
|
size: {
|
|
544
544
|
sm: {
|
|
545
545
|
root: {
|
|
@@ -783,7 +783,7 @@ export declare const slotRecipes: {
|
|
|
783
783
|
};
|
|
784
784
|
};
|
|
785
785
|
}>;
|
|
786
|
-
dialog: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
786
|
+
dialog: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "body" | "description" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "footer" | "trigger", {
|
|
787
787
|
variant: {
|
|
788
788
|
dialog: {};
|
|
789
789
|
confirm: {
|
|
@@ -949,7 +949,7 @@ export declare const slotRecipes: {
|
|
|
949
949
|
none: {};
|
|
950
950
|
};
|
|
951
951
|
}>;
|
|
952
|
-
drawer: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
952
|
+
drawer: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "body" | "description" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "footer" | "trigger", {
|
|
953
953
|
size: {
|
|
954
954
|
xs: {
|
|
955
955
|
content: {
|
|
@@ -1099,7 +1099,7 @@ export declare const slotRecipes: {
|
|
|
1099
1099
|
};
|
|
1100
1100
|
};
|
|
1101
1101
|
}>;
|
|
1102
|
-
emptyState: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
1102
|
+
emptyState: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "indicator" | "root" | "title" | "actions", {
|
|
1103
1103
|
size: {
|
|
1104
1104
|
sm: {
|
|
1105
1105
|
root: {
|
|
@@ -1804,7 +1804,7 @@ export declare const slotRecipes: {
|
|
|
1804
1804
|
};
|
|
1805
1805
|
};
|
|
1806
1806
|
}>;
|
|
1807
|
-
popover: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
1807
|
+
popover: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "body" | "description" | "anchor" | "indicator" | "positioner" | "closeTrigger" | "title" | "header" | "footer" | "trigger" | "arrow" | "arrowTip", {
|
|
1808
1808
|
size: {
|
|
1809
1809
|
xs: {
|
|
1810
1810
|
content: {
|
|
@@ -2574,7 +2574,7 @@ export declare const slotRecipes: {
|
|
|
2574
2574
|
};
|
|
2575
2575
|
};
|
|
2576
2576
|
}>;
|
|
2577
|
-
steps: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
2577
|
+
steps: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "indicator" | "progress" | "root" | "item" | "separator" | "title" | "list" | "trigger" | "nextTrigger" | "prevTrigger", {
|
|
2578
2578
|
orientation: {
|
|
2579
2579
|
vertical: {
|
|
2580
2580
|
root: {
|
|
@@ -3302,7 +3302,7 @@ export declare const slotRecipes: {
|
|
|
3302
3302
|
};
|
|
3303
3303
|
};
|
|
3304
3304
|
}>;
|
|
3305
|
-
timeline: import("@chakra-ui/react").SlotRecipeDefinition<"
|
|
3305
|
+
timeline: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "indicator" | "root" | "item" | "separator" | "title" | "connector", {
|
|
3306
3306
|
variant: {
|
|
3307
3307
|
subtle: {
|
|
3308
3308
|
indicator: {
|
|
@@ -3611,8 +3611,8 @@ export declare const slotRecipes: {
|
|
|
3611
3611
|
borderColor: "sidebar.border";
|
|
3612
3612
|
borderWidth: "1px";
|
|
3613
3613
|
borderRadius: "panel.md";
|
|
3614
|
-
marginBlock:
|
|
3615
|
-
marginEnd:
|
|
3614
|
+
marginBlock: "var(--inset-gap, {spacing.2})";
|
|
3615
|
+
marginEnd: "var(--inset-gap, {spacing.2})";
|
|
3616
3616
|
overflow: "clip";
|
|
3617
3617
|
};
|
|
3618
3618
|
};
|
|
@@ -3771,7 +3771,7 @@ export declare const slotRecipes: {
|
|
|
3771
3771
|
variant: {
|
|
3772
3772
|
panel: {
|
|
3773
3773
|
root: {
|
|
3774
|
-
bg: "var(--page-bg-color
|
|
3774
|
+
bg: "var(--page-bg-color)";
|
|
3775
3775
|
zIndex: number;
|
|
3776
3776
|
};
|
|
3777
3777
|
header: {
|