@chakra-ui/panda-preset 3.33.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 (22) 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 +462 -0
  6. package/dist/cjs/slot-recipes/dialog.cjs +2 -1
  7. package/dist/cjs/slot-recipes/drawer.cjs +2 -1
  8. package/dist/cjs/slot-recipes/index.cjs +2 -0
  9. package/dist/esm/keyframes.js +8 -8
  10. package/dist/esm/recipes/index.js +0 -2
  11. package/dist/esm/semantic-tokens/shadows.js +9 -9
  12. package/dist/esm/slot-recipes/date-picker.js +460 -0
  13. package/dist/esm/slot-recipes/dialog.js +2 -1
  14. package/dist/esm/slot-recipes/drawer.js +2 -1
  15. package/dist/esm/slot-recipes/index.js +2 -0
  16. package/dist/types/recipes/index.d.ts +0 -1
  17. package/dist/types/slot-recipes/date-picker.d.ts +1 -0
  18. package/dist/types/slot-recipes/index.d.ts +1 -0
  19. package/package.json +3 -3
  20. package/dist/cjs/recipes/container.cjs +0 -35
  21. package/dist/esm/recipes/container.js +0 -33
  22. 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
  }