@chakra-ui/panda-preset 3.34.0 → 3.35.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 (18) hide show
  1. package/README.md +94 -4
  2. package/dist/cjs/keyframes.cjs +8 -8
  3. package/dist/cjs/recipes/index.cjs +0 -2
  4. package/dist/cjs/semantic-tokens/shadows.cjs +9 -9
  5. package/dist/cjs/slot-recipes/date-picker.cjs +13 -24
  6. package/dist/cjs/slot-recipes/dialog.cjs +2 -1
  7. package/dist/cjs/slot-recipes/drawer.cjs +2 -1
  8. package/dist/esm/keyframes.js +8 -8
  9. package/dist/esm/recipes/index.js +0 -2
  10. package/dist/esm/semantic-tokens/shadows.js +9 -9
  11. package/dist/esm/slot-recipes/date-picker.js +13 -24
  12. package/dist/esm/slot-recipes/dialog.js +2 -1
  13. package/dist/esm/slot-recipes/drawer.js +2 -1
  14. package/dist/types/recipes/index.d.ts +0 -1
  15. package/package.json +3 -3
  16. package/dist/cjs/recipes/container.cjs +0 -35
  17. package/dist/esm/recipes/container.js +0 -33
  18. package/dist/types/recipes/container.d.ts +0 -1
package/README.md CHANGED
@@ -1,20 +1,110 @@
1
1
  # @chakra-ui/panda-preset
2
2
 
3
- Panda preset for using Chakra UI design system in your Panda CSS.
3
+ Panda CSS preset that mirrors the **Chakra UI** default theme (tokens, semantic
4
+ colors, recipes, slot recipes, and global styles) so you can build with
5
+ **Panda** while keeping Chakra-aligned design tokens.
4
6
 
5
7
  ## Installation
6
8
 
7
9
  ```bash
10
+ pnpm add @chakra-ui/panda-preset
11
+ # or
8
12
  npm install @chakra-ui/panda-preset
9
13
  ```
10
14
 
11
- ## Usage
15
+ Peer expectations: **`@pandacss/dev`** (and your app’s React/Vite/Next setup as
16
+ usual for Panda).
12
17
 
13
- ```tsx
14
- // panda.config.ts
18
+ ## Configure Panda
19
+
20
+ **`panda.config.ts`** (or `.js`):
21
+
22
+ ```ts
15
23
  import { defineConfig } from "@pandacss/dev"
16
24
 
17
25
  export default defineConfig({
18
26
  presets: ["@chakra-ui/panda-preset"],
27
+ preflight: true,
28
+ include: ["./src/**/*.{js,jsx,ts,tsx}"],
29
+ outdir: "styled-system", // default; change if you prefer another folder
19
30
  })
20
31
  ```
32
+
33
+ Then generate the runtime:
34
+
35
+ ```bash
36
+ pnpm exec panda codegen
37
+ ```
38
+
39
+ In your app, import the CSS layers Panda emits (for example the generated
40
+ `styled-system/styles.css` or your own entry that matches Panda’s layer setup)
41
+ and use `css()`, **recipes**, and **patterns** from your `outdir` like any other
42
+ Panda project.
43
+
44
+ ## Color mode (light / dark)
45
+
46
+ Semantic tokens in this preset use **`_light`** and **`_dark`** (e.g. colors,
47
+ shadows). For those values to apply correctly, the document root should carry a
48
+ **class** that selects the active color mode:
49
+
50
+ - Set **`class="light"`** or **`class="dark"`** on **`<html>`** (or another
51
+ wrapping element your setup uses).
52
+
53
+ Example:
54
+
55
+ ```html
56
+ <html class="light">
57
+ <!-- ... -->
58
+ </html>
59
+ ```
60
+
61
+ Without one of these classes, light/dark–dependent tokens may not resolve the
62
+ way you expect.
63
+
64
+ ### Next.js and `next-themes`
65
+
66
+ With [**next-themes**](https://github.com/pacocoursey/next-themes), use
67
+ **`attribute="class"`** so the active theme is reflected as `light` / `dark` on
68
+ **`<html>`**, matching Panda’s **`_light`** / **`_dark`** semantic tokens.
69
+ `defaultTheme` / `enableSystem` are up to your product defaults.
70
+
71
+ ```tsx
72
+ // e.g. app/providers.tsx — mark as a Client Component in the App Router
73
+ "use client"
74
+
75
+ import { ThemeProvider } from "next-themes"
76
+
77
+ export function Providers({ children }: { children: React.ReactNode }) {
78
+ return (
79
+ <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
80
+ {children}
81
+ </ThemeProvider>
82
+ )
83
+ }
84
+ ```
85
+
86
+ ```tsx
87
+ // e.g. app/layout.tsx — wrap the app; suppressHydrationWarning avoids a class mismatch warning on <html>
88
+ import { Providers } from "./providers"
89
+
90
+ export default function RootLayout({
91
+ children,
92
+ }: {
93
+ children: React.ReactNode
94
+ }) {
95
+ return (
96
+ <html lang="en" suppressHydrationWarning>
97
+ <body>
98
+ <Providers>{children}</Providers>
99
+ </body>
100
+ </html>
101
+ )
102
+ }
103
+ ```
104
+
105
+ Install: `pnpm add next-themes`.
106
+
107
+ ## Related
108
+
109
+ - [Chakra UI documentation](https://www.chakra-ui.com)
110
+ - [Panda CSS documentation](https://panda-css.com)
package/dist/cjs/keyframes.cjs CHANGED
@@ -177,7 +177,7 @@ const keyframes = {
177
177
  },
178
178
  "slide-from-top": {
179
179
  "0%": {
180
- translate: "0 -0.5rem"
180
+ translate: "0 calc(var(--slide-from-top-distance, 0.5rem) * -1)"
181
181
  },
182
182
  to: {
183
183
  translate: "0"
@@ -185,7 +185,7 @@ const keyframes = {
185
185
  },
186
186
  "slide-from-bottom": {
187
187
  "0%": {
188
- translate: "0 0.5rem"
188
+ translate: "0 var(--slide-from-bottom-distance, 0.5rem)"
189
189
  },
190
190
  to: {
191
191
  translate: "0"
@@ -193,7 +193,7 @@ const keyframes = {
193
193
  },
194
194
  "slide-from-left": {
195
195
  "0%": {
196
- translate: "-0.5rem 0"
196
+ translate: "calc(var(--slide-from-left-distance, 0.5rem) * -1) 0"
197
197
  },
198
198
  to: {
199
199
  translate: "0"
@@ -201,7 +201,7 @@ const keyframes = {
201
201
  },
202
202
  "slide-from-right": {
203
203
  "0%": {
204
- translate: "0.5rem 0"
204
+ translate: "var(--slide-from-right-distance, 0.5rem) 0"
205
205
  },
206
206
  to: {
207
207
  translate: "0"
@@ -212,7 +212,7 @@ const keyframes = {
212
212
  translate: "0"
213
213
  },
214
214
  to: {
215
- translate: "0 -0.5rem"
215
+ translate: "0 calc(var(--slide-to-top-distance, 0.5rem) * -1)"
216
216
  }
217
217
  },
218
218
  "slide-to-bottom": {
@@ -220,7 +220,7 @@ const keyframes = {
220
220
  translate: "0"
221
221
  },
222
222
  to: {
223
- translate: "0 0.5rem"
223
+ translate: "0 var(--slide-to-bottom-distance, 0.5rem)"
224
224
  }
225
225
  },
226
226
  "slide-to-left": {
@@ -228,7 +228,7 @@ const keyframes = {
228
228
  translate: "0"
229
229
  },
230
230
  to: {
231
- translate: "-0.5rem 0"
231
+ translate: "calc(var(--slide-to-left-distance, 0.5rem) * -1) 0"
232
232
  }
233
233
  },
234
234
  "slide-to-right": {
@@ -236,7 +236,7 @@ const keyframes = {
236
236
  translate: "0"
237
237
  },
238
238
  to: {
239
- translate: "0.5rem 0"
239
+ translate: "var(--slide-to-right-distance, 0.5rem) 0"
240
240
  }
241
241
  },
242
242
  "scale-in": {
package/dist/cjs/recipes/index.cjs CHANGED
@@ -6,7 +6,6 @@ var button = require('./button.cjs');
6
6
  var checkmark = require('./checkmark.cjs');
7
7
  var code = require('./code.cjs');
8
8
  var colorSwatch = require('./color-swatch.cjs');
9
- var container = require('./container.cjs');
10
9
  var heading = require('./heading.cjs');
11
10
  var icon = require('./icon.cjs');
12
11
  var input = require('./input.cjs');
@@ -25,7 +24,6 @@ const recipes = {
25
24
  badge: badge.badgeRecipe,
26
25
  button: button.buttonRecipe,
27
26
  code: code.codeRecipe,
28
- container: container.containerRecipe,
29
27
  heading: heading.headingRecipe,
30
28
  input: input.inputRecipe,
31
29
  inputAddon: inputAddon.inputAddonRecipe,
package/dist/cjs/semantic-tokens/shadows.cjs CHANGED
@@ -7,48 +7,48 @@ const shadows = def.defineSemanticTokens.shadows({
7
7
  xs: {
8
8
  value: {
9
9
  _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
10
- _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
10
+ _dark: "0px 1px 1px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/20}"
11
11
  }
12
12
  },
13
13
  sm: {
14
14
  value: {
15
15
  _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
16
- _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
16
+ _dark: "0px 2px 4px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
17
17
  }
18
18
  },
19
19
  md: {
20
20
  value: {
21
21
  _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
22
- _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
22
+ _dark: "0px 4px 8px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
23
23
  }
24
24
  },
25
25
  lg: {
26
26
  value: {
27
27
  _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
28
- _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
28
+ _dark: "0px 8px 16px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
29
29
  }
30
30
  },
31
31
  xl: {
32
32
  value: {
33
33
  _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
34
- _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
34
+ _dark: "0px 16px 24px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
35
35
  }
36
36
  },
37
37
  "2xl": {
38
38
  value: {
39
39
  _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
40
- _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
40
+ _dark: "0px 24px 40px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
41
41
  }
42
42
  },
43
43
  inner: {
44
44
  value: {
45
- _light: "inset 0 2px 4px 0 {black/5}",
46
- _dark: "inset 0 2px 4px 0 black"
45
+ _light: "inset 0 2px 4px 0 {colors.black/5}",
46
+ _dark: "inset 0 2px 4px 0 {colors.black}"
47
47
  }
48
48
  },
49
49
  inset: {
50
50
  value: {
51
- _light: "inset 0 0 0 1px {black/5}",
51
+ _light: "inset 0 0 0 1px {colors.black/5}",
52
52
  _dark: "inset 0 0 0 1px {colors.gray.300/5}"
53
53
  }
54
54
  }
package/dist/cjs/slot-recipes/date-picker.cjs CHANGED
@@ -116,7 +116,6 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
116
116
  borderRadius: "l2",
117
117
  boxShadow: "lg",
118
118
  color: "fg",
119
- maxHeight: "var(--available-height)",
120
119
  "--date-picker-z-index": "zIndex.popover",
121
120
  zIndex: "calc(var(--date-picker-z-index) + var(--layer-index, 0))",
122
121
  outline: "none",
@@ -254,7 +253,7 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
254
253
  textUnderlineOffset: "3px",
255
254
  textDecorationThickness: "2px"
256
255
  },
257
- _selected: {
256
+ "&[data-selected]": {
258
257
  bg: "colorPalette.solid",
259
258
  color: "colorPalette.contrast",
260
259
  _hover: {
@@ -269,33 +268,23 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
269
268
  bg: "colorPalette.subtle"
270
269
  }
271
270
  },
272
- "&[data-range-start]": {
271
+ "&[data-in-range][data-selected]": {
273
272
  bg: "colorPalette.solid",
274
273
  color: "colorPalette.contrast",
275
274
  borderRadius: "0",
276
- borderStartRadius: "l2",
277
- _hover: {
278
- bg: "colorPalette.solid"
279
- }
280
- },
281
- "&[data-range-end]": {
282
- bg: "colorPalette.solid",
283
- color: "colorPalette.contrast",
284
- borderRadius: "0",
285
- borderEndRadius: "l2",
286
- _hover: {
287
- bg: "colorPalette.solid"
288
- }
289
- },
290
- "&[data-range-start][data-range-end]": {
291
- borderRadius: "l2"
292
- },
293
- "&[data-selected][data-in-range]": {
294
- bg: "colorPalette.solid",
295
- color: "colorPalette.contrast",
296
- borderRadius: "l2",
297
275
  _hover: {
298
276
  bg: "colorPalette.solid"
277
+ },
278
+ "&[data-range-start][data-range-end]": {
279
+ borderRadius: "l2"
280
+ },
281
+ "&[data-range-start]:not([data-range-end])": {
282
+ borderStartRadius: "l2",
283
+ borderEndRadius: "0"
284
+ },
285
+ "&[data-range-end]:not([data-range-start])": {
286
+ borderEndRadius: "l2",
287
+ borderStartRadius: "0"
299
288
  }
300
289
  },
301
290
  _disabled: {
package/dist/cjs/slot-recipes/dialog.cjs CHANGED
@@ -26,7 +26,8 @@ const dialogSlotRecipe = def.defineSlotRecipe({
26
26
  top: 0,
27
27
  w: "100dvw",
28
28
  h: "100dvh",
29
- zIndex: "var(--z-index)",
29
+ "--dialog-z-index": "zIndex.popover",
30
+ zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0) - 1)",
30
31
  _open: {
31
32
  animationName: "fade-in",
32
33
  animationDuration: "slow"
package/dist/cjs/slot-recipes/drawer.cjs CHANGED
@@ -26,7 +26,8 @@ const drawerSlotRecipe = def.defineSlotRecipe({
26
26
  top: 0,
27
27
  w: "100vw",
28
28
  h: "100dvh",
29
- zIndex: "var(--z-index)",
29
+ "--drawer-z-index": "zIndex.popover",
30
+ zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0) - 1)",
30
31
  _open: {
31
32
  animationName: "fade-in",
32
33
  animationDuration: "slow"
package/dist/esm/keyframes.js CHANGED
@@ -175,7 +175,7 @@ const keyframes = {
175
175
  },
176
176
  "slide-from-top": {
177
177
  "0%": {
178
- translate: "0 -0.5rem"
178
+ translate: "0 calc(var(--slide-from-top-distance, 0.5rem) * -1)"
179
179
  },
180
180
  to: {
181
181
  translate: "0"
@@ -183,7 +183,7 @@ const keyframes = {
183
183
  },
184
184
  "slide-from-bottom": {
185
185
  "0%": {
186
- translate: "0 0.5rem"
186
+ translate: "0 var(--slide-from-bottom-distance, 0.5rem)"
187
187
  },
188
188
  to: {
189
189
  translate: "0"
@@ -191,7 +191,7 @@ const keyframes = {
191
191
  },
192
192
  "slide-from-left": {
193
193
  "0%": {
194
- translate: "-0.5rem 0"
194
+ translate: "calc(var(--slide-from-left-distance, 0.5rem) * -1) 0"
195
195
  },
196
196
  to: {
197
197
  translate: "0"
@@ -199,7 +199,7 @@ const keyframes = {
199
199
  },
200
200
  "slide-from-right": {
201
201
  "0%": {
202
- translate: "0.5rem 0"
202
+ translate: "var(--slide-from-right-distance, 0.5rem) 0"
203
203
  },
204
204
  to: {
205
205
  translate: "0"
@@ -210,7 +210,7 @@ const keyframes = {
210
210
  translate: "0"
211
211
  },
212
212
  to: {
213
- translate: "0 -0.5rem"
213
+ translate: "0 calc(var(--slide-to-top-distance, 0.5rem) * -1)"
214
214
  }
215
215
  },
216
216
  "slide-to-bottom": {
@@ -218,7 +218,7 @@ const keyframes = {
218
218
  translate: "0"
219
219
  },
220
220
  to: {
221
- translate: "0 0.5rem"
221
+ translate: "0 var(--slide-to-bottom-distance, 0.5rem)"
222
222
  }
223
223
  },
224
224
  "slide-to-left": {
@@ -226,7 +226,7 @@ const keyframes = {
226
226
  translate: "0"
227
227
  },
228
228
  to: {
229
- translate: "-0.5rem 0"
229
+ translate: "calc(var(--slide-to-left-distance, 0.5rem) * -1) 0"
230
230
  }
231
231
  },
232
232
  "slide-to-right": {
@@ -234,7 +234,7 @@ const keyframes = {
234
234
  translate: "0"
235
235
  },
236
236
  to: {
237
- translate: "0.5rem 0"
237
+ translate: "var(--slide-to-right-distance, 0.5rem) 0"
238
238
  }
239
239
  },
240
240
  "scale-in": {
package/dist/esm/recipes/index.js CHANGED
@@ -4,7 +4,6 @@ import { buttonRecipe } from './button.js';
4
4
  import { checkmarkRecipe } from './checkmark.js';
5
5
  import { codeRecipe } from './code.js';
6
6
  import { colorSwatchRecipe } from './color-swatch.js';
7
- import { containerRecipe } from './container.js';
8
7
  import { headingRecipe } from './heading.js';
9
8
  import { iconRecipe } from './icon.js';
10
9
  import { inputRecipe } from './input.js';
@@ -23,7 +22,6 @@ const recipes = {
23
22
  badge: badgeRecipe,
24
23
  button: buttonRecipe,
25
24
  code: codeRecipe,
26
- container: containerRecipe,
27
25
  heading: headingRecipe,
28
26
  input: inputRecipe,
29
27
  inputAddon: inputAddonRecipe,
package/dist/esm/semantic-tokens/shadows.js CHANGED
@@ -5,48 +5,48 @@ const shadows = defineSemanticTokens.shadows({
5
5
  xs: {
6
6
  value: {
7
7
  _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
8
- _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
8
+ _dark: "0px 1px 1px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/20}"
9
9
  }
10
10
  },
11
11
  sm: {
12
12
  value: {
13
13
  _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
14
- _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
14
+ _dark: "0px 2px 4px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
15
15
  }
16
16
  },
17
17
  md: {
18
18
  value: {
19
19
  _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
20
- _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
20
+ _dark: "0px 4px 8px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
21
21
  }
22
22
  },
23
23
  lg: {
24
24
  value: {
25
25
  _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
26
- _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
26
+ _dark: "0px 8px 16px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
27
27
  }
28
28
  },
29
29
  xl: {
30
30
  value: {
31
31
  _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
32
- _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
32
+ _dark: "0px 16px 24px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
33
33
  }
34
34
  },
35
35
  "2xl": {
36
36
  value: {
37
37
  _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
38
- _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
38
+ _dark: "0px 24px 40px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
39
39
  }
40
40
  },
41
41
  inner: {
42
42
  value: {
43
- _light: "inset 0 2px 4px 0 {black/5}",
44
- _dark: "inset 0 2px 4px 0 black"
43
+ _light: "inset 0 2px 4px 0 {colors.black/5}",
44
+ _dark: "inset 0 2px 4px 0 {colors.black}"
45
45
  }
46
46
  },
47
47
  inset: {
48
48
  value: {
49
- _light: "inset 0 0 0 1px {black/5}",
49
+ _light: "inset 0 0 0 1px {colors.black/5}",
50
50
  _dark: "inset 0 0 0 1px {colors.gray.300/5}"
51
51
  }
52
52
  }
package/dist/esm/slot-recipes/date-picker.js CHANGED
@@ -114,7 +114,6 @@ const datePickerSlotRecipe = defineSlotRecipe({
114
114
  borderRadius: "l2",
115
115
  boxShadow: "lg",
116
116
  color: "fg",
117
- maxHeight: "var(--available-height)",
118
117
  "--date-picker-z-index": "zIndex.popover",
119
118
  zIndex: "calc(var(--date-picker-z-index) + var(--layer-index, 0))",
120
119
  outline: "none",
@@ -252,7 +251,7 @@ const datePickerSlotRecipe = defineSlotRecipe({
252
251
  textUnderlineOffset: "3px",
253
252
  textDecorationThickness: "2px"
254
253
  },
255
- _selected: {
254
+ "&[data-selected]": {
256
255
  bg: "colorPalette.solid",
257
256
  color: "colorPalette.contrast",
258
257
  _hover: {
@@ -267,33 +266,23 @@ const datePickerSlotRecipe = defineSlotRecipe({
267
266
  bg: "colorPalette.subtle"
268
267
  }
269
268
  },
270
- "&[data-range-start]": {
269
+ "&[data-in-range][data-selected]": {
271
270
  bg: "colorPalette.solid",
272
271
  color: "colorPalette.contrast",
273
272
  borderRadius: "0",
274
- borderStartRadius: "l2",
275
- _hover: {
276
- bg: "colorPalette.solid"
277
- }
278
- },
279
- "&[data-range-end]": {
280
- bg: "colorPalette.solid",
281
- color: "colorPalette.contrast",
282
- borderRadius: "0",
283
- borderEndRadius: "l2",
284
- _hover: {
285
- bg: "colorPalette.solid"
286
- }
287
- },
288
- "&[data-range-start][data-range-end]": {
289
- borderRadius: "l2"
290
- },
291
- "&[data-selected][data-in-range]": {
292
- bg: "colorPalette.solid",
293
- color: "colorPalette.contrast",
294
- borderRadius: "l2",
295
273
  _hover: {
296
274
  bg: "colorPalette.solid"
275
+ },
276
+ "&[data-range-start][data-range-end]": {
277
+ borderRadius: "l2"
278
+ },
279
+ "&[data-range-start]:not([data-range-end])": {
280
+ borderStartRadius: "l2",
281
+ borderEndRadius: "0"
282
+ },
283
+ "&[data-range-end]:not([data-range-start])": {
284
+ borderEndRadius: "l2",
285
+ borderStartRadius: "0"
297
286
  }
298
287
  },
299
288
  _disabled: {
package/dist/esm/slot-recipes/dialog.js CHANGED
@@ -24,7 +24,8 @@ const dialogSlotRecipe = defineSlotRecipe({
24
24
  top: 0,
25
25
  w: "100dvw",
26
26
  h: "100dvh",
27
- zIndex: "var(--z-index)",
27
+ "--dialog-z-index": "zIndex.popover",
28
+ zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0) - 1)",
28
29
  _open: {
29
30
  animationName: "fade-in",
30
31
  animationDuration: "slow"
package/dist/esm/slot-recipes/drawer.js CHANGED
@@ -24,7 +24,8 @@ const drawerSlotRecipe = defineSlotRecipe({
24
24
  top: 0,
25
25
  w: "100vw",
26
26
  h: "100dvh",
27
- zIndex: "var(--z-index)",
27
+ "--drawer-z-index": "zIndex.popover",
28
+ zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0) - 1)",
28
29
  _open: {
29
30
  animationName: "fade-in",
30
31
  animationDuration: "slow"
package/dist/types/recipes/index.d.ts CHANGED
@@ -2,7 +2,6 @@ export declare const recipes: {
2
2
  badge: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
3
3
  button: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
4
4
  code: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
5
- container: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
6
5
  heading: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
7
6
  input: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
8
7
  inputAddon: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chakra-ui/panda-preset",
3
- "version": "3.34.0",
3
+ "version": "3.35.0",
4
4
  "description": "Panda preset for Chakra UI",
5
5
  "type": "module",
6
6
  "main": "dist/cjs/index.cjs",
@@ -48,8 +48,8 @@
48
48
  "@pandacss/types": "^1.4.2"
49
49
  },
50
50
  "devDependencies": {
51
- "globby": "14.1.0",
52
- "@chakra-ui/cli": "3.34.0"
51
+ "globby": "16.1.1",
52
+ "@chakra-ui/cli": "3.35.0"
53
53
  },
54
54
  "scripts": {
55
55
  "theme:eject": "chakra eject --outdir=src",
package/dist/cjs/recipes/container.cjs DELETED
@@ -1,35 +0,0 @@
1
- "use strict";
2
- 'use strict';
3
-
4
- var def = require('../def.cjs');
5
-
6
- const containerRecipe = def.defineRecipe({
7
- className: "container",
8
- base: {
9
- position: "relative",
10
- maxWidth: "8xl",
11
- w: "100%",
12
- mx: "auto",
13
- px: {
14
- base: "4",
15
- md: "6",
16
- lg: "8"
17
- }
18
- },
19
- variants: {
20
- centerContent: {
21
- true: {
22
- display: "flex",
23
- flexDirection: "column",
24
- alignItems: "center"
25
- }
26
- },
27
- fluid: {
28
- true: {
29
- maxWidth: "full"
30
- }
31
- }
32
- }
33
- });
34
-
35
- exports.containerRecipe = containerRecipe;
package/dist/esm/recipes/container.js DELETED
@@ -1,33 +0,0 @@
1
- "use strict";
2
- import { defineRecipe } from '../def.js';
3
-
4
- const containerRecipe = defineRecipe({
5
- className: "container",
6
- base: {
7
- position: "relative",
8
- maxWidth: "8xl",
9
- w: "100%",
10
- mx: "auto",
11
- px: {
12
- base: "4",
13
- md: "6",
14
- lg: "8"
15
- }
16
- },
17
- variants: {
18
- centerContent: {
19
- true: {
20
- display: "flex",
21
- flexDirection: "column",
22
- alignItems: "center"
23
- }
24
- },
25
- fluid: {
26
- true: {
27
- maxWidth: "full"
28
- }
29
- }
30
- }
31
- });
32
-
33
- export { containerRecipe };
package/dist/types/recipes/container.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const containerRecipe: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;