@chakra-ui/panda-preset 3.16.0 → 3.17.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 (10) hide show
  1. package/dist/cjs/index.cjs +8 -8
  2. package/dist/cjs/slot-recipes/dialog.cjs +1 -2
  3. package/dist/cjs/slot-recipes/drawer.cjs +1 -2
  4. package/dist/cjs/slot-recipes/rating-group.cjs +5 -1
  5. package/dist/cjs/slot-recipes/segment-group.cjs +28 -21
  6. package/dist/esm/slot-recipes/dialog.js +1 -2
  7. package/dist/esm/slot-recipes/drawer.js +1 -2
  8. package/dist/esm/slot-recipes/rating-group.js +5 -1
  9. package/dist/esm/slot-recipes/segment-group.js +28 -21
  10. package/package.json +4 -4
package/dist/cjs/index.cjs CHANGED
@@ -9,11 +9,11 @@ var def = require('./def.cjs');
9
9
  var globalCss = require('./global-css.cjs');
10
10
  var keyframes = require('./keyframes.cjs');
11
11
  var layerStyles = require('./layer-styles.cjs');
12
- var index$3 = require('./recipes/index.cjs');
13
- var index$2 = require('./semantic-tokens/index.cjs');
14
- var index$4 = require('./slot-recipes/index.cjs');
12
+ var index$2 = require('./recipes/index.cjs');
13
+ var index$3 = require('./semantic-tokens/index.cjs');
14
+ var index$1 = require('./slot-recipes/index.cjs');
15
15
  var textStyles = require('./text-styles.cjs');
16
- var index$1 = require('./tokens/index.cjs');
16
+ var index$4 = require('./tokens/index.cjs');
17
17
  var utilities = require('./utilities.cjs');
18
18
 
19
19
  var index = def.definePreset({
@@ -22,10 +22,10 @@ var index = def.definePreset({
22
22
  theme: {
23
23
  breakpoints: breakpoints.breakpoints,
24
24
  keyframes: keyframes.keyframes,
25
- tokens: index$1.tokens,
26
- semanticTokens: index$2.semanticTokens,
27
- recipes: index$3.recipes,
28
- slotRecipes: index$4.slotRecipes,
25
+ tokens: index$4.tokens,
26
+ semanticTokens: index$3.semanticTokens,
27
+ recipes: index$2.recipes,
28
+ slotRecipes: index$1.slotRecipes,
29
29
  textStyles: textStyles.textStyles,
30
30
  layerStyles: layerStyles.layerStyles,
31
31
  animationStyles: animationStyles.animationStyles
package/dist/cjs/slot-recipes/dialog.cjs CHANGED
@@ -26,8 +26,7 @@ const dialogSlotRecipe = def.defineSlotRecipe({
26
26
  top: 0,
27
27
  w: "100vw",
28
28
  h: "100dvh",
29
- "--dialog-z-index": "zIndex.modal",
30
- zIndex: "calc(var(--dialog-z-index) - 1)",
29
+ zIndex: "overlay",
31
30
  _open: {
32
31
  animationName: "fade-in",
33
32
  animationDuration: "slow"
package/dist/cjs/slot-recipes/drawer.cjs CHANGED
@@ -26,8 +26,7 @@ const drawerSlotRecipe = def.defineSlotRecipe({
26
26
  top: 0,
27
27
  w: "100vw",
28
28
  h: "100dvh",
29
- "--drawer-z-index": "zIndex.modal",
30
- zIndex: "calc(var(--drawer-z-index) - 1)",
29
+ zIndex: "overlay",
31
30
  _open: {
32
31
  animationName: "fade-in",
33
32
  animationDuration: "slow"
package/dist/cjs/slot-recipes/rating-group.cjs CHANGED
@@ -27,6 +27,10 @@ const ratingGroupSlotRecipe = def.defineSlotRecipe({
27
27
  width: "1em",
28
28
  height: "1em",
29
29
  position: "relative",
30
+ "--clip-path": {
31
+ base: "inset(0 50% 0 0)",
32
+ _rtl: "inset(0 0 0 50%)"
33
+ },
30
34
  _icon: {
31
35
  stroke: "currentColor",
32
36
  width: "100%",
@@ -51,7 +55,7 @@ const ratingGroupSlotRecipe = def.defineSlotRecipe({
51
55
  "&[data-half]": {
52
56
  "& [data-fg]": {
53
57
  color: "colorPalette.solid",
54
- clipPath: "inset(0 50% 0 0)"
58
+ clipPath: "var(--clip-path)"
55
59
  }
56
60
  }
57
61
  }
package/dist/cjs/slot-recipes/segment-group.cjs CHANGED
@@ -16,11 +16,15 @@ const segmentGroupSlotRecipe = def.defineSlotRecipe({
16
16
  textAlign: "center",
17
17
  position: "relative",
18
18
  isolation: "isolate",
19
- bg: "bg.muted"
19
+ bg: "bg.muted",
20
+ _vertical: {
21
+ flexDirection: "column"
22
+ }
20
23
  },
21
24
  item: {
22
25
  display: "flex",
23
26
  alignItems: "center",
27
+ justifyContent: "center",
24
28
  userSelect: "none",
25
29
  fontSize: "sm",
26
30
  position: "relative",
@@ -35,12 +39,23 @@ const segmentGroupSlotRecipe = def.defineSlotRecipe({
35
39
  _before: {
36
40
  content: '""',
37
41
  position: "absolute",
38
- insetInlineStart: 0,
39
- insetBlock: "1.5",
40
42
  bg: "border",
41
- width: "1px",
42
43
  transition: "opacity 0.2s"
43
44
  },
45
+ _horizontal: {
46
+ _before: {
47
+ insetInlineStart: 0,
48
+ insetBlock: "1.5",
49
+ width: "1px"
50
+ }
51
+ },
52
+ _vertical: {
53
+ _before: {
54
+ insetBlockStart: 0,
55
+ insetInline: "1.5",
56
+ height: "1px"
57
+ }
58
+ },
44
59
  "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
45
60
  _before: {
46
61
  opacity: "0"
@@ -70,43 +85,35 @@ const segmentGroupSlotRecipe = def.defineSlotRecipe({
70
85
  variants: {
71
86
  size: {
72
87
  xs: {
73
- root: {
74
- height: "6"
75
- },
76
88
  item: {
77
89
  textStyle: "xs",
78
90
  px: "3",
79
- gap: "1"
91
+ gap: "1",
92
+ height: "6"
80
93
  }
81
94
  },
82
95
  sm: {
83
- root: {
84
- height: "8"
85
- },
86
96
  item: {
87
97
  textStyle: "sm",
88
98
  px: "4",
89
- gap: "2"
99
+ gap: "2",
100
+ height: "8"
90
101
  }
91
102
  },
92
103
  md: {
93
- root: {
94
- height: "10"
95
- },
96
104
  item: {
97
105
  textStyle: "sm",
98
106
  px: "4",
99
- gap: "2"
107
+ gap: "2",
108
+ height: "10"
100
109
  }
101
110
  },
102
111
  lg: {
103
- root: {
104
- height: "10"
105
- },
106
112
  item: {
107
113
  textStyle: "md",
108
- px: "5",
109
- gap: "3"
114
+ px: "4.5",
115
+ gap: "3",
116
+ height: "11"
110
117
  }
111
118
  }
112
119
  }
package/dist/esm/slot-recipes/dialog.js CHANGED
@@ -24,8 +24,7 @@ const dialogSlotRecipe = defineSlotRecipe({
24
24
  top: 0,
25
25
  w: "100vw",
26
26
  h: "100dvh",
27
- "--dialog-z-index": "zIndex.modal",
28
- zIndex: "calc(var(--dialog-z-index) - 1)",
27
+ zIndex: "overlay",
29
28
  _open: {
30
29
  animationName: "fade-in",
31
30
  animationDuration: "slow"
package/dist/esm/slot-recipes/drawer.js CHANGED
@@ -24,8 +24,7 @@ const drawerSlotRecipe = defineSlotRecipe({
24
24
  top: 0,
25
25
  w: "100vw",
26
26
  h: "100dvh",
27
- "--drawer-z-index": "zIndex.modal",
28
- zIndex: "calc(var(--drawer-z-index) - 1)",
27
+ zIndex: "overlay",
29
28
  _open: {
30
29
  animationName: "fade-in",
31
30
  animationDuration: "slow"
package/dist/esm/slot-recipes/rating-group.js CHANGED
@@ -25,6 +25,10 @@ const ratingGroupSlotRecipe = defineSlotRecipe({
25
25
  width: "1em",
26
26
  height: "1em",
27
27
  position: "relative",
28
+ "--clip-path": {
29
+ base: "inset(0 50% 0 0)",
30
+ _rtl: "inset(0 0 0 50%)"
31
+ },
28
32
  _icon: {
29
33
  stroke: "currentColor",
30
34
  width: "100%",
@@ -49,7 +53,7 @@ const ratingGroupSlotRecipe = defineSlotRecipe({
49
53
  "&[data-half]": {
50
54
  "& [data-fg]": {
51
55
  color: "colorPalette.solid",
52
- clipPath: "inset(0 50% 0 0)"
56
+ clipPath: "var(--clip-path)"
53
57
  }
54
58
  }
55
59
  }
package/dist/esm/slot-recipes/segment-group.js CHANGED
@@ -14,11 +14,15 @@ const segmentGroupSlotRecipe = defineSlotRecipe({
14
14
  textAlign: "center",
15
15
  position: "relative",
16
16
  isolation: "isolate",
17
- bg: "bg.muted"
17
+ bg: "bg.muted",
18
+ _vertical: {
19
+ flexDirection: "column"
20
+ }
18
21
  },
19
22
  item: {
20
23
  display: "flex",
21
24
  alignItems: "center",
25
+ justifyContent: "center",
22
26
  userSelect: "none",
23
27
  fontSize: "sm",
24
28
  position: "relative",
@@ -33,12 +37,23 @@ const segmentGroupSlotRecipe = defineSlotRecipe({
33
37
  _before: {
34
38
  content: '""',
35
39
  position: "absolute",
36
- insetInlineStart: 0,
37
- insetBlock: "1.5",
38
40
  bg: "border",
39
- width: "1px",
40
41
  transition: "opacity 0.2s"
41
42
  },
43
+ _horizontal: {
44
+ _before: {
45
+ insetInlineStart: 0,
46
+ insetBlock: "1.5",
47
+ width: "1px"
48
+ }
49
+ },
50
+ _vertical: {
51
+ _before: {
52
+ insetBlockStart: 0,
53
+ insetInline: "1.5",
54
+ height: "1px"
55
+ }
56
+ },
42
57
  "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
43
58
  _before: {
44
59
  opacity: "0"
@@ -68,43 +83,35 @@ const segmentGroupSlotRecipe = defineSlotRecipe({
68
83
  variants: {
69
84
  size: {
70
85
  xs: {
71
- root: {
72
- height: "6"
73
- },
74
86
  item: {
75
87
  textStyle: "xs",
76
88
  px: "3",
77
- gap: "1"
89
+ gap: "1",
90
+ height: "6"
78
91
  }
79
92
  },
80
93
  sm: {
81
- root: {
82
- height: "8"
83
- },
84
94
  item: {
85
95
  textStyle: "sm",
86
96
  px: "4",
87
- gap: "2"
97
+ gap: "2",
98
+ height: "8"
88
99
  }
89
100
  },
90
101
  md: {
91
- root: {
92
- height: "10"
93
- },
94
102
  item: {
95
103
  textStyle: "sm",
96
104
  px: "4",
97
- gap: "2"
105
+ gap: "2",
106
+ height: "10"
98
107
  }
99
108
  },
100
109
  lg: {
101
- root: {
102
- height: "10"
103
- },
104
110
  item: {
105
111
  textStyle: "md",
106
- px: "5",
107
- gap: "3"
112
+ px: "4.5",
113
+ gap: "3",
114
+ height: "11"
108
115
  }
109
116
  }
110
117
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chakra-ui/panda-preset",
3
- "version": "3.16.0",
3
+ "version": "3.17.0",
4
4
  "description": "Panda preset for Chakra UI",
5
5
  "type": "module",
6
6
  "main": "dist/cjs/index.cjs",
@@ -45,11 +45,11 @@
45
45
  "./package.json": "./package.json"
46
46
  },
47
47
  "dependencies": {
48
- "@pandacss/types": "^0.51.1"
48
+ "@pandacss/types": "^0.53.6"
49
49
  },
50
50
  "devDependencies": {
51
- "globby": "14.0.2",
52
- "@chakra-ui/cli": "3.16.0"
51
+ "globby": "14.1.0",
52
+ "@chakra-ui/cli": "3.17.0"
53
53
  },
54
54
  "scripts": {
55
55
  "theme:eject": "chakra eject --outdir=src",