@chakra-ui/panda-preset 3.34.0 → 3.36.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 (26) 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/recipes/link.cjs +1 -1
  5. package/dist/cjs/semantic-tokens/shadows.cjs +9 -9
  6. package/dist/cjs/slot-recipes/date-picker.cjs +13 -27
  7. package/dist/cjs/slot-recipes/dialog.cjs +2 -1
  8. package/dist/cjs/slot-recipes/drawer.cjs +2 -1
  9. package/dist/cjs/slot-recipes/floating-panel.cjs +92 -0
  10. package/dist/cjs/slot-recipes/index.cjs +3 -1
  11. package/dist/esm/keyframes.js +8 -8
  12. package/dist/esm/recipes/index.js +0 -2
  13. package/dist/esm/recipes/link.js +1 -1
  14. package/dist/esm/semantic-tokens/shadows.js +9 -9
  15. package/dist/esm/slot-recipes/date-picker.js +13 -27
  16. package/dist/esm/slot-recipes/dialog.js +2 -1
  17. package/dist/esm/slot-recipes/drawer.js +2 -1
  18. package/dist/esm/slot-recipes/floating-panel.js +90 -0
  19. package/dist/esm/slot-recipes/index.js +3 -1
  20. package/dist/types/recipes/index.d.ts +0 -1
  21. package/dist/types/slot-recipes/floating-panel.d.ts +1 -0
  22. package/dist/types/slot-recipes/index.d.ts +1 -0
  23. package/package.json +3 -3
  24. package/dist/cjs/recipes/container.cjs +0 -35
  25. package/dist/esm/recipes/container.js +0 -33
  26. 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/recipes/link.cjs CHANGED
@@ -12,7 +12,7 @@ const linkRecipe = def.defineRecipe({
12
12
  gap: "1.5",
13
13
  cursor: "pointer",
14
14
  borderRadius: "l1",
15
- focusRing: "outside"
15
+ focusVisibleRing: "outside"
16
16
  },
17
17
  variants: {
18
18
  variant: {
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
@@ -80,9 +80,6 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
80
80
  color: "fg",
81
81
  "--focus-color": "colors.colorPalette.focusRing",
82
82
  "--error-color": "colors.border.error",
83
- _placeholder: {
84
- color: "fg.muted"
85
- },
86
83
  _invalid: {
87
84
  focusRingColor: "var(--error-color)",
88
85
  borderColor: "var(--error-color)"
@@ -116,7 +113,6 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
116
113
  borderRadius: "l2",
117
114
  boxShadow: "lg",
118
115
  color: "fg",
119
- maxHeight: "var(--available-height)",
120
116
  "--date-picker-z-index": "zIndex.popover",
121
117
  zIndex: "calc(var(--date-picker-z-index) + var(--layer-index, 0))",
122
118
  outline: "none",
@@ -254,7 +250,7 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
254
250
  textUnderlineOffset: "3px",
255
251
  textDecorationThickness: "2px"
256
252
  },
257
- _selected: {
253
+ "&[data-selected]": {
258
254
  bg: "colorPalette.solid",
259
255
  color: "colorPalette.contrast",
260
256
  _hover: {
@@ -269,33 +265,23 @@ const datePickerSlotRecipe = def.defineSlotRecipe({
269
265
  bg: "colorPalette.subtle"
270
266
  }
271
267
  },
272
- "&[data-range-start]": {
268
+ "&[data-in-range][data-selected]": {
273
269
  bg: "colorPalette.solid",
274
270
  color: "colorPalette.contrast",
275
271
  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
272
  _hover: {
298
273
  bg: "colorPalette.solid"
274
+ },
275
+ "&[data-range-start][data-range-end]": {
276
+ borderRadius: "l2"
277
+ },
278
+ "&[data-range-start]:not([data-range-end])": {
279
+ borderStartRadius: "l2",
280
+ borderEndRadius: "0"
281
+ },
282
+ "&[data-range-end]:not([data-range-start])": {
283
+ borderEndRadius: "l2",
284
+ borderStartRadius: "0"
299
285
  }
300
286
  },
301
287
  _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/cjs/slot-recipes/floating-panel.cjs ADDED
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var def = require('../def.cjs');
5
+
6
+ const floatingPanelSlotRecipe = def.defineSlotRecipe({
7
+ slots: [
8
+ "trigger",
9
+ "positioner",
10
+ "content",
11
+ "header",
12
+ "body",
13
+ "title",
14
+ "resizeTrigger",
15
+ "dragTrigger",
16
+ "stageTrigger",
17
+ "closeTrigger",
18
+ "control"
19
+ ],
20
+ className: "floating-panel",
21
+ base: {
22
+ positioner: {
23
+ "--floating-panel-z-index": "zIndex.popover",
24
+ zIndex: "calc(var(--floating-panel-z-index) + var(--layer-index, 0))",
25
+ "&:has([data-topmost])": {
26
+ "--layer-index": "100"
27
+ },
28
+ "&:has([data-behind])": {
29
+ "--layer-index": "-100"
30
+ }
31
+ },
32
+ content: {
33
+ display: "flex",
34
+ flexDirection: "column",
35
+ bg: "bg.panel",
36
+ borderRadius: "l2",
37
+ boxShadow: "lg",
38
+ overflow: "hidden",
39
+ outline: 0,
40
+ position: "relative",
41
+ _open: {
42
+ animationName: "scale-in, fade-in",
43
+ animationDuration: "moderate"
44
+ }
45
+ },
46
+ dragTrigger: {
47
+ flex: "1",
48
+ display: "flex",
49
+ alignItems: "center",
50
+ gap: "2",
51
+ minW: "0"
52
+ },
53
+ header: {
54
+ display: "flex",
55
+ alignItems: "center",
56
+ gap: "2",
57
+ px: "3",
58
+ py: "2",
59
+ borderBottomWidth: "1px",
60
+ bg: "bg.subtle",
61
+ flex: "none"
62
+ },
63
+ title: {
64
+ fontWeight: "semibold",
65
+ textStyle: "sm",
66
+ flex: "1",
67
+ truncate: true
68
+ },
69
+ body: {
70
+ flex: "1",
71
+ overflow: "auto",
72
+ p: "3",
73
+ textStyle: "sm"
74
+ },
75
+ resizeTrigger: {
76
+ zIndex: "1",
77
+ "--size": "sizes.2.5",
78
+ '&[data-axis="n"], &[data-axis="s"]': {
79
+ h: "var(--size)"
80
+ },
81
+ '&[data-axis="e"], &[data-axis="w"]': {
82
+ w: "var(--size)"
83
+ },
84
+ '&[data-axis]:is([data-axis="ne"], [data-axis="nw"], [data-axis="se"], [data-axis="sw"])': {
85
+ w: "var(--size)",
86
+ h: "var(--size)"
87
+ }
88
+ }
89
+ }
90
+ });
91
+
92
+ exports.floatingPanelSlotRecipe = floatingPanelSlotRecipe;
package/dist/cjs/slot-recipes/index.cjs CHANGED
@@ -24,6 +24,7 @@ var emptyState = require('./empty-state.cjs');
24
24
  var field = require('./field.cjs');
25
25
  var fieldset = require('./fieldset.cjs');
26
26
  var fileUpload = require('./file-upload.cjs');
27
+ var floatingPanel = require('./floating-panel.cjs');
27
28
  var hoverCard = require('./hover-card.cjs');
28
29
  var list = require('./list.cjs');
29
30
  var listbox = require('./listbox.cjs');
@@ -112,7 +113,8 @@ const slotRecipes = {
112
113
  colorPicker: colorPicker.colorPickerSlotRecipe,
113
114
  qrCode: qrCode.qrCodeSlotRecipe,
114
115
  treeView: treeView.treeViewSlotRecipe,
115
- marquee: marquee.marqueeSlotRecipe
116
+ marquee: marquee.marqueeSlotRecipe,
117
+ floatingPanel: floatingPanel.floatingPanelSlotRecipe
116
118
  };
117
119
 
118
120
  exports.slotRecipes = slotRecipes;
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/recipes/link.js CHANGED
@@ -10,7 +10,7 @@ const linkRecipe = defineRecipe({
10
10
  gap: "1.5",
11
11
  cursor: "pointer",
12
12
  borderRadius: "l1",
13
- focusRing: "outside"
13
+ focusVisibleRing: "outside"
14
14
  },
15
15
  variants: {
16
16
  variant: {
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
@@ -78,9 +78,6 @@ const datePickerSlotRecipe = defineSlotRecipe({
78
78
  color: "fg",
79
79
  "--focus-color": "colors.colorPalette.focusRing",
80
80
  "--error-color": "colors.border.error",
81
- _placeholder: {
82
- color: "fg.muted"
83
- },
84
81
  _invalid: {
85
82
  focusRingColor: "var(--error-color)",
86
83
  borderColor: "var(--error-color)"
@@ -114,7 +111,6 @@ const datePickerSlotRecipe = defineSlotRecipe({
114
111
  borderRadius: "l2",
115
112
  boxShadow: "lg",
116
113
  color: "fg",
117
- maxHeight: "var(--available-height)",
118
114
  "--date-picker-z-index": "zIndex.popover",
119
115
  zIndex: "calc(var(--date-picker-z-index) + var(--layer-index, 0))",
120
116
  outline: "none",
@@ -252,7 +248,7 @@ const datePickerSlotRecipe = defineSlotRecipe({
252
248
  textUnderlineOffset: "3px",
253
249
  textDecorationThickness: "2px"
254
250
  },
255
- _selected: {
251
+ "&[data-selected]": {
256
252
  bg: "colorPalette.solid",
257
253
  color: "colorPalette.contrast",
258
254
  _hover: {
@@ -267,33 +263,23 @@ const datePickerSlotRecipe = defineSlotRecipe({
267
263
  bg: "colorPalette.subtle"
268
264
  }
269
265
  },
270
- "&[data-range-start]": {
266
+ "&[data-in-range][data-selected]": {
271
267
  bg: "colorPalette.solid",
272
268
  color: "colorPalette.contrast",
273
269
  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
270
  _hover: {
296
271
  bg: "colorPalette.solid"
272
+ },
273
+ "&[data-range-start][data-range-end]": {
274
+ borderRadius: "l2"
275
+ },
276
+ "&[data-range-start]:not([data-range-end])": {
277
+ borderStartRadius: "l2",
278
+ borderEndRadius: "0"
279
+ },
280
+ "&[data-range-end]:not([data-range-start])": {
281
+ borderEndRadius: "l2",
282
+ borderStartRadius: "0"
297
283
  }
298
284
  },
299
285
  _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/esm/slot-recipes/floating-panel.js ADDED
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+ import { defineSlotRecipe } from '../def.js';
3
+
4
+ const floatingPanelSlotRecipe = defineSlotRecipe({
5
+ slots: [
6
+ "trigger",
7
+ "positioner",
8
+ "content",
9
+ "header",
10
+ "body",
11
+ "title",
12
+ "resizeTrigger",
13
+ "dragTrigger",
14
+ "stageTrigger",
15
+ "closeTrigger",
16
+ "control"
17
+ ],
18
+ className: "floating-panel",
19
+ base: {
20
+ positioner: {
21
+ "--floating-panel-z-index": "zIndex.popover",
22
+ zIndex: "calc(var(--floating-panel-z-index) + var(--layer-index, 0))",
23
+ "&:has([data-topmost])": {
24
+ "--layer-index": "100"
25
+ },
26
+ "&:has([data-behind])": {
27
+ "--layer-index": "-100"
28
+ }
29
+ },
30
+ content: {
31
+ display: "flex",
32
+ flexDirection: "column",
33
+ bg: "bg.panel",
34
+ borderRadius: "l2",
35
+ boxShadow: "lg",
36
+ overflow: "hidden",
37
+ outline: 0,
38
+ position: "relative",
39
+ _open: {
40
+ animationName: "scale-in, fade-in",
41
+ animationDuration: "moderate"
42
+ }
43
+ },
44
+ dragTrigger: {
45
+ flex: "1",
46
+ display: "flex",
47
+ alignItems: "center",
48
+ gap: "2",
49
+ minW: "0"
50
+ },
51
+ header: {
52
+ display: "flex",
53
+ alignItems: "center",
54
+ gap: "2",
55
+ px: "3",
56
+ py: "2",
57
+ borderBottomWidth: "1px",
58
+ bg: "bg.subtle",
59
+ flex: "none"
60
+ },
61
+ title: {
62
+ fontWeight: "semibold",
63
+ textStyle: "sm",
64
+ flex: "1",
65
+ truncate: true
66
+ },
67
+ body: {
68
+ flex: "1",
69
+ overflow: "auto",
70
+ p: "3",
71
+ textStyle: "sm"
72
+ },
73
+ resizeTrigger: {
74
+ zIndex: "1",
75
+ "--size": "sizes.2.5",
76
+ '&[data-axis="n"], &[data-axis="s"]': {
77
+ h: "var(--size)"
78
+ },
79
+ '&[data-axis="e"], &[data-axis="w"]': {
80
+ w: "var(--size)"
81
+ },
82
+ '&[data-axis]:is([data-axis="ne"], [data-axis="nw"], [data-axis="se"], [data-axis="sw"])': {
83
+ w: "var(--size)",
84
+ h: "var(--size)"
85
+ }
86
+ }
87
+ }
88
+ });
89
+
90
+ export { floatingPanelSlotRecipe };
package/dist/esm/slot-recipes/index.js CHANGED
@@ -22,6 +22,7 @@ import { emptyStateSlotRecipe } from './empty-state.js';
22
22
  import { fieldSlotRecipe } from './field.js';
23
23
  import { fieldsetSlotRecipe } from './fieldset.js';
24
24
  import { fileUploadSlotRecipe } from './file-upload.js';
25
+ import { floatingPanelSlotRecipe } from './floating-panel.js';
25
26
  import { hoverCardSlotRecipe } from './hover-card.js';
26
27
  import { listSlotRecipe } from './list.js';
27
28
  import { listboxSlotRecipe } from './listbox.js';
@@ -110,7 +111,8 @@ const slotRecipes = {
110
111
  colorPicker: colorPickerSlotRecipe,
111
112
  qrCode: qrCodeSlotRecipe,
112
113
  treeView: treeViewSlotRecipe,
113
- marquee: marqueeSlotRecipe
114
+ marquee: marqueeSlotRecipe,
115
+ floatingPanel: floatingPanelSlotRecipe
114
116
  };
115
117
 
116
118
  export { slotRecipes };
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/dist/types/slot-recipes/floating-panel.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const floatingPanelSlotRecipe: import("@pandacss/types").SlotRecipeConfig;
package/dist/types/slot-recipes/index.d.ts CHANGED
@@ -54,4 +54,5 @@ export declare const slotRecipes: {
54
54
  qrCode: import("@pandacss/types").SlotRecipeConfig;
55
55
  treeView: import("@pandacss/types").SlotRecipeConfig;
56
56
  marquee: import("@pandacss/types").SlotRecipeConfig;
57
+ floatingPanel: import("@pandacss/types").SlotRecipeConfig;
57
58
  };
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.36.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.36.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>;