@chakra-ui/panda-preset 3.30.0 → 3.31.0

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 (15) hide show
  1. package/dist/cjs/slot-recipes/action-bar.cjs +28 -3
  2. package/dist/cjs/slot-recipes/color-picker.cjs +2 -1
  3. package/dist/cjs/slot-recipes/combobox.cjs +2 -1
  4. package/dist/cjs/slot-recipes/menu.cjs +10 -1
  5. package/dist/cjs/slot-recipes/native-select.cjs +8 -0
  6. package/dist/cjs/slot-recipes/select.cjs +10 -1
  7. package/dist/cjs/slot-recipes/slider.cjs +7 -7
  8. package/dist/esm/slot-recipes/action-bar.js +28 -3
  9. package/dist/esm/slot-recipes/color-picker.js +2 -1
  10. package/dist/esm/slot-recipes/combobox.js +2 -1
  11. package/dist/esm/slot-recipes/menu.js +10 -1
  12. package/dist/esm/slot-recipes/native-select.js +8 -0
  13. package/dist/esm/slot-recipes/select.js +10 -1
  14. package/dist/esm/slot-recipes/slider.js +7 -7
  15. package/package.json +2 -2
package/dist/cjs/slot-recipes/action-bar.cjs CHANGED
@@ -16,11 +16,9 @@ const actionBarSlotRecipe = def.defineSlotRecipe({
16
16
  positioner: {
17
17
  position: "fixed",
18
18
  display: "flex",
19
- justifyContent: "center",
20
19
  pointerEvents: "none",
21
20
  insetInline: "0",
22
- top: "unset",
23
- bottom: "calc(env(safe-area-inset-bottom) + 20px)"
21
+ "--action-bar-offset": "spacing.4"
24
22
  },
25
23
  content: {
26
24
  bg: "bg.panel",
@@ -59,6 +57,33 @@ const actionBarSlotRecipe = def.defineSlotRecipe({
59
57
  borderWidth: "1px",
60
58
  borderStyle: "dashed"
61
59
  }
60
+ },
61
+ variants: {
62
+ placement: {
63
+ bottom: {
64
+ positioner: {
65
+ bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
66
+ justifyContent: "center"
67
+ }
68
+ },
69
+ "bottom-start": {
70
+ positioner: {
71
+ bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
72
+ justifyContent: "flex-start",
73
+ ps: "var(--action-bar-offset)"
74
+ }
75
+ },
76
+ "bottom-end": {
77
+ positioner: {
78
+ bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
79
+ justifyContent: "flex-end",
80
+ pe: "var(--action-bar-offset)"
81
+ }
82
+ }
83
+ }
84
+ },
85
+ defaultVariants: {
86
+ placement: "bottom"
62
87
  }
63
88
  });
64
89
 
package/dist/cjs/slot-recipes/color-picker.cjs CHANGED
@@ -97,7 +97,8 @@ const colorPickerSlotRecipe = def.defineSlotRecipe({
97
97
  width: "64",
98
98
  p: "4",
99
99
  gap: "3",
100
- zIndex: "dropdown",
100
+ "--color-picker-z-index": "zIndex.popover",
101
+ zIndex: "calc(var(--color-picker-z-index) + var(--layer-index, 0))",
101
102
  _open: {
102
103
  animationStyle: "slide-fade-in",
103
104
  animationDuration: "fast"
package/dist/cjs/slot-recipes/combobox.cjs CHANGED
@@ -111,7 +111,8 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
111
111
  background: "bg.panel",
112
112
  display: "flex",
113
113
  flexDirection: "column",
114
- zIndex: "dropdown",
114
+ "--combobox-z-index": "zIndex.popover",
115
+ zIndex: "calc(var(--combobox-z-index) + var(--layer-index, 0))",
115
116
  borderRadius: "l2",
116
117
  outline: 0,
117
118
  maxH: "96",
package/dist/cjs/slot-recipes/menu.cjs CHANGED
@@ -25,7 +25,8 @@ const menuSlotRecipe = def.defineSlotRecipe({
25
25
  base: {
26
26
  content: {
27
27
  outline: 0,
28
- bg: "bg.panel",
28
+ "--menu-bg": "colors.bg.panel",
29
+ bg: "var(--menu-bg)",
29
30
  boxShadow: "lg",
30
31
  color: "fg",
31
32
  maxHeight: "var(--available-height)",
@@ -97,6 +98,14 @@ const menuSlotRecipe = def.defineSlotRecipe({
97
98
  bg: "bg.muted",
98
99
  my: "1",
99
100
  mx: "-1"
101
+ },
102
+ arrow: {
103
+ "--arrow-size": "sizes.3",
104
+ "--arrow-background": "var(--menu-bg)"
105
+ },
106
+ arrowTip: {
107
+ borderTopWidth: "1px",
108
+ borderLeftWidth: "1px"
100
109
  }
101
110
  },
102
111
  variants: {
package/dist/cjs/slot-recipes/native-select.cjs CHANGED
@@ -82,6 +82,14 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
82
82
  color: "fg",
83
83
  focusRingWidth: "2px"
84
84
  }
85
+ },
86
+ ghost: {
87
+ field: {
88
+ bg: "transparent",
89
+ _expanded: {
90
+ bg: "bg.muted"
91
+ }
92
+ }
85
93
  }
86
94
  },
87
95
  size: {
package/dist/cjs/slot-recipes/select.cjs CHANGED
@@ -77,7 +77,8 @@ const selectSlotRecipe = def.defineSlotRecipe({
77
77
  background: "bg.panel",
78
78
  display: "flex",
79
79
  flexDirection: "column",
80
- zIndex: "dropdown",
80
+ "--select-z-index": "zIndex.popover",
81
+ zIndex: "calc(var(--select-z-index) + var(--layer-index, 0))",
81
82
  borderRadius: "l2",
82
83
  outline: 0,
83
84
  maxH: "96",
@@ -168,6 +169,14 @@ const selectSlotRecipe = def.defineSlotRecipe({
168
169
  borderColor: "transparent",
169
170
  bg: "bg.muted"
170
171
  }
172
+ },
173
+ ghost: {
174
+ trigger: {
175
+ bg: "transparent",
176
+ _expanded: {
177
+ bg: "bg.muted"
178
+ }
179
+ }
171
180
  }
172
181
  },
173
182
  size: {
package/dist/cjs/slot-recipes/slider.cjs CHANGED
@@ -16,7 +16,8 @@ const sliderSlotRecipe = def.defineSlotRecipe({
16
16
  "markerGroup",
17
17
  "marker",
18
18
  "draggingIndicator",
19
- "markerIndicator"
19
+ "markerIndicator",
20
+ "markerLabel"
20
21
  ],
21
22
  base: {
22
23
  root: {
@@ -79,11 +80,10 @@ const sliderSlotRecipe = def.defineSlotRecipe({
79
80
  outline: 0,
80
81
  zIndex: "2",
81
82
  borderRadius: "full",
83
+ transition: "shadow",
82
84
  _focusVisible: {
83
- ring: "2px",
84
- ringColor: "colorPalette.focusRing",
85
- ringOffset: "2px",
86
- ringOffsetColor: "bg"
85
+ ring: "3px",
86
+ ringColor: "colorPalette.focusRing/50"
87
87
  }
88
88
  }
89
89
  },
@@ -163,7 +163,7 @@ const sliderSlotRecipe = def.defineSlotRecipe({
163
163
  flexDirection: "column",
164
164
  height: "100%",
165
165
  minWidth: "var(--slider-thumb-size)",
166
- "&[data-has-mark-label], &:has(.slider__marker-label)": {
166
+ "&:has(.slider__markerLabel)": {
167
167
  marginEnd: "4"
168
168
  }
169
169
  },
@@ -187,7 +187,7 @@ const sliderSlotRecipe = def.defineSlotRecipe({
187
187
  flexDirection: "row",
188
188
  width: "100%",
189
189
  minHeight: "var(--slider-thumb-size)",
190
- "&[data-has-mark-label], &:has(.slider__marker-label)": {
190
+ "&:has(.slider__markerLabel)": {
191
191
  marginBottom: "4"
192
192
  }
193
193
  },
package/dist/esm/slot-recipes/action-bar.js CHANGED
@@ -14,11 +14,9 @@ const actionBarSlotRecipe = defineSlotRecipe({
14
14
  positioner: {
15
15
  position: "fixed",
16
16
  display: "flex",
17
- justifyContent: "center",
18
17
  pointerEvents: "none",
19
18
  insetInline: "0",
20
- top: "unset",
21
- bottom: "calc(env(safe-area-inset-bottom) + 20px)"
19
+ "--action-bar-offset": "spacing.4"
22
20
  },
23
21
  content: {
24
22
  bg: "bg.panel",
@@ -57,6 +55,33 @@ const actionBarSlotRecipe = defineSlotRecipe({
57
55
  borderWidth: "1px",
58
56
  borderStyle: "dashed"
59
57
  }
58
+ },
59
+ variants: {
60
+ placement: {
61
+ bottom: {
62
+ positioner: {
63
+ bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
64
+ justifyContent: "center"
65
+ }
66
+ },
67
+ "bottom-start": {
68
+ positioner: {
69
+ bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
70
+ justifyContent: "flex-start",
71
+ ps: "var(--action-bar-offset)"
72
+ }
73
+ },
74
+ "bottom-end": {
75
+ positioner: {
76
+ bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
77
+ justifyContent: "flex-end",
78
+ pe: "var(--action-bar-offset)"
79
+ }
80
+ }
81
+ }
82
+ },
83
+ defaultVariants: {
84
+ placement: "bottom"
60
85
  }
61
86
  });
62
87
 
package/dist/esm/slot-recipes/color-picker.js CHANGED
@@ -95,7 +95,8 @@ const colorPickerSlotRecipe = defineSlotRecipe({
95
95
  width: "64",
96
96
  p: "4",
97
97
  gap: "3",
98
- zIndex: "dropdown",
98
+ "--color-picker-z-index": "zIndex.popover",
99
+ zIndex: "calc(var(--color-picker-z-index) + var(--layer-index, 0))",
99
100
  _open: {
100
101
  animationStyle: "slide-fade-in",
101
102
  animationDuration: "fast"
package/dist/esm/slot-recipes/combobox.js CHANGED
@@ -109,7 +109,8 @@ const comboboxSlotRecipe = defineSlotRecipe({
109
109
  background: "bg.panel",
110
110
  display: "flex",
111
111
  flexDirection: "column",
112
- zIndex: "dropdown",
112
+ "--combobox-z-index": "zIndex.popover",
113
+ zIndex: "calc(var(--combobox-z-index) + var(--layer-index, 0))",
113
114
  borderRadius: "l2",
114
115
  outline: 0,
115
116
  maxH: "96",
package/dist/esm/slot-recipes/menu.js CHANGED
@@ -23,7 +23,8 @@ const menuSlotRecipe = defineSlotRecipe({
23
23
  base: {
24
24
  content: {
25
25
  outline: 0,
26
- bg: "bg.panel",
26
+ "--menu-bg": "colors.bg.panel",
27
+ bg: "var(--menu-bg)",
27
28
  boxShadow: "lg",
28
29
  color: "fg",
29
30
  maxHeight: "var(--available-height)",
@@ -95,6 +96,14 @@ const menuSlotRecipe = defineSlotRecipe({
95
96
  bg: "bg.muted",
96
97
  my: "1",
97
98
  mx: "-1"
99
+ },
100
+ arrow: {
101
+ "--arrow-size": "sizes.3",
102
+ "--arrow-background": "var(--menu-bg)"
103
+ },
104
+ arrowTip: {
105
+ borderTopWidth: "1px",
106
+ borderLeftWidth: "1px"
98
107
  }
99
108
  },
100
109
  variants: {
package/dist/esm/slot-recipes/native-select.js CHANGED
@@ -80,6 +80,14 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
80
80
  color: "fg",
81
81
  focusRingWidth: "2px"
82
82
  }
83
+ },
84
+ ghost: {
85
+ field: {
86
+ bg: "transparent",
87
+ _expanded: {
88
+ bg: "bg.muted"
89
+ }
90
+ }
83
91
  }
84
92
  },
85
93
  size: {
package/dist/esm/slot-recipes/select.js CHANGED
@@ -75,7 +75,8 @@ const selectSlotRecipe = defineSlotRecipe({
75
75
  background: "bg.panel",
76
76
  display: "flex",
77
77
  flexDirection: "column",
78
- zIndex: "dropdown",
78
+ "--select-z-index": "zIndex.popover",
79
+ zIndex: "calc(var(--select-z-index) + var(--layer-index, 0))",
79
80
  borderRadius: "l2",
80
81
  outline: 0,
81
82
  maxH: "96",
@@ -166,6 +167,14 @@ const selectSlotRecipe = defineSlotRecipe({
166
167
  borderColor: "transparent",
167
168
  bg: "bg.muted"
168
169
  }
170
+ },
171
+ ghost: {
172
+ trigger: {
173
+ bg: "transparent",
174
+ _expanded: {
175
+ bg: "bg.muted"
176
+ }
177
+ }
169
178
  }
170
179
  },
171
180
  size: {
package/dist/esm/slot-recipes/slider.js CHANGED
@@ -14,7 +14,8 @@ const sliderSlotRecipe = defineSlotRecipe({
14
14
  "markerGroup",
15
15
  "marker",
16
16
  "draggingIndicator",
17
- "markerIndicator"
17
+ "markerIndicator",
18
+ "markerLabel"
18
19
  ],
19
20
  base: {
20
21
  root: {
@@ -77,11 +78,10 @@ const sliderSlotRecipe = defineSlotRecipe({
77
78
  outline: 0,
78
79
  zIndex: "2",
79
80
  borderRadius: "full",
81
+ transition: "shadow",
80
82
  _focusVisible: {
81
- ring: "2px",
82
- ringColor: "colorPalette.focusRing",
83
- ringOffset: "2px",
84
- ringOffsetColor: "bg"
83
+ ring: "3px",
84
+ ringColor: "colorPalette.focusRing/50"
85
85
  }
86
86
  }
87
87
  },
@@ -161,7 +161,7 @@ const sliderSlotRecipe = defineSlotRecipe({
161
161
  flexDirection: "column",
162
162
  height: "100%",
163
163
  minWidth: "var(--slider-thumb-size)",
164
- "&[data-has-mark-label], &:has(.slider__marker-label)": {
164
+ "&:has(.slider__markerLabel)": {
165
165
  marginEnd: "4"
166
166
  }
167
167
  },
@@ -185,7 +185,7 @@ const sliderSlotRecipe = defineSlotRecipe({
185
185
  flexDirection: "row",
186
186
  width: "100%",
187
187
  minHeight: "var(--slider-thumb-size)",
188
- "&[data-has-mark-label], &:has(.slider__marker-label)": {
188
+ "&:has(.slider__markerLabel)": {
189
189
  marginBottom: "4"
190
190
  }
191
191
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chakra-ui/panda-preset",
3
- "version": "3.30.0",
3
+ "version": "3.31.0",
4
4
  "description": "Panda preset for Chakra UI",
5
5
  "type": "module",
6
6
  "main": "dist/cjs/index.cjs",
@@ -49,7 +49,7 @@
49
49
  },
50
50
  "devDependencies": {
51
51
  "globby": "14.1.0",
52
- "@chakra-ui/cli": "3.30.0"
52
+ "@chakra-ui/cli": "3.31.0"
53
53
  },
54
54
  "scripts": {
55
55
  "theme:eject": "chakra eject --outdir=src",