@chakra-ui/panda-preset 3.8.2 → 3.9.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 (11) hide show
  1. package/dist/cjs/slot-recipes/checkbox-card.cjs +6 -3
  2. package/dist/cjs/slot-recipes/pin-input.cjs +24 -0
  3. package/dist/cjs/slot-recipes/radio-card.cjs +2 -1
  4. package/dist/cjs/slot-recipes/slider.cjs +2 -2
  5. package/dist/cjs/slot-recipes/switch.cjs +1 -0
  6. package/dist/esm/slot-recipes/checkbox-card.js +6 -3
  7. package/dist/esm/slot-recipes/pin-input.js +24 -0
  8. package/dist/esm/slot-recipes/radio-card.js +2 -1
  9. package/dist/esm/slot-recipes/slider.js +2 -2
  10. package/dist/esm/slot-recipes/switch.js +1 -0
  11. package/package.json +2 -2
package/dist/cjs/slot-recipes/checkbox-card.cjs CHANGED
@@ -24,8 +24,7 @@ const checkboxCardSlotRecipe = def.defineSlotRecipe({
24
24
  flex: "1",
25
25
  focusVisibleRing: "outside",
26
26
  _disabled: {
27
- opacity: "0.8",
28
- borderColor: "border.subtle"
27
+ opacity: "0.8"
29
28
  },
30
29
  _invalid: {
31
30
  outline: "2px solid",
@@ -45,13 +44,17 @@ const checkboxCardSlotRecipe = def.defineSlotRecipe({
45
44
  display: "flex",
46
45
  alignItems: "center",
47
46
  gap: "2",
47
+ flex: "1",
48
48
  _disabled: {
49
49
  opacity: "0.5"
50
50
  }
51
51
  },
52
52
  description: {
53
53
  opacity: "0.64",
54
- textStyle: "sm"
54
+ textStyle: "sm",
55
+ _disabled: {
56
+ opacity: "0.5"
57
+ }
55
58
  },
56
59
  addon: {
57
60
  _disabled: {
package/dist/cjs/slot-recipes/pin-input.cjs CHANGED
@@ -26,6 +26,11 @@ const pinInputSlotRecipe = def.defineSlotRecipe({
26
26
  focusRingColor: "var(--error-color)",
27
27
  borderColor: "var(--error-color)"
28
28
  }
29
+ },
30
+ control: {
31
+ display: "inline-flex",
32
+ gap: "2",
33
+ isolation: "isolate"
29
34
  }
30
35
  },
31
36
  variants: {
@@ -110,6 +115,25 @@ const pinInputSlotRecipe = def.defineSlotRecipe({
110
115
  }
111
116
  }
112
117
  }
118
+ },
119
+ attached: {
120
+ true: {
121
+ control: {
122
+ gap: "0",
123
+ spaceX: "-1px"
124
+ },
125
+ input: {
126
+ _notFirst: {
127
+ borderStartRadius: "0"
128
+ },
129
+ _notLast: {
130
+ borderEndRadius: "0"
131
+ },
132
+ _focusVisible: {
133
+ zIndex: "1"
134
+ }
135
+ }
136
+ }
113
137
  }
114
138
  },
115
139
  defaultVariants: {
package/dist/cjs/slot-recipes/radio-card.cjs CHANGED
@@ -51,7 +51,8 @@ const radioCardSlotRecipe = def.defineSlotRecipe({
51
51
  }
52
52
  },
53
53
  itemText: {
54
- fontWeight: "medium"
54
+ fontWeight: "medium",
55
+ flex: "1"
55
56
  },
56
57
  itemDescription: {
57
58
  opacity: "0.64",
package/dist/cjs/slot-recipes/slider.cjs CHANGED
@@ -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]": {
166
+ "&[data-has-mark-label], &:has(.slider__marker-label)": {
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]": {
190
+ "&[data-has-mark-label], &:has(.slider__marker-label)": {
191
191
  marginBottom: "4"
192
192
  }
193
193
  },
package/dist/cjs/slot-recipes/switch.cjs CHANGED
@@ -54,6 +54,7 @@ const switchSlotRecipe = def.defineSlotRecipe({
54
54
  position: "relative",
55
55
  width: "var(--switch-width)",
56
56
  height: "var(--switch-height)",
57
+ transition: "backgrounds",
57
58
  _disabled: {
58
59
  opacity: "0.5",
59
60
  cursor: "not-allowed"
package/dist/esm/slot-recipes/checkbox-card.js CHANGED
@@ -22,8 +22,7 @@ const checkboxCardSlotRecipe = defineSlotRecipe({
22
22
  flex: "1",
23
23
  focusVisibleRing: "outside",
24
24
  _disabled: {
25
- opacity: "0.8",
26
- borderColor: "border.subtle"
25
+ opacity: "0.8"
27
26
  },
28
27
  _invalid: {
29
28
  outline: "2px solid",
@@ -43,13 +42,17 @@ const checkboxCardSlotRecipe = defineSlotRecipe({
43
42
  display: "flex",
44
43
  alignItems: "center",
45
44
  gap: "2",
45
+ flex: "1",
46
46
  _disabled: {
47
47
  opacity: "0.5"
48
48
  }
49
49
  },
50
50
  description: {
51
51
  opacity: "0.64",
52
- textStyle: "sm"
52
+ textStyle: "sm",
53
+ _disabled: {
54
+ opacity: "0.5"
55
+ }
53
56
  },
54
57
  addon: {
55
58
  _disabled: {
package/dist/esm/slot-recipes/pin-input.js CHANGED
@@ -24,6 +24,11 @@ const pinInputSlotRecipe = defineSlotRecipe({
24
24
  focusRingColor: "var(--error-color)",
25
25
  borderColor: "var(--error-color)"
26
26
  }
27
+ },
28
+ control: {
29
+ display: "inline-flex",
30
+ gap: "2",
31
+ isolation: "isolate"
27
32
  }
28
33
  },
29
34
  variants: {
@@ -108,6 +113,25 @@ const pinInputSlotRecipe = defineSlotRecipe({
108
113
  }
109
114
  }
110
115
  }
116
+ },
117
+ attached: {
118
+ true: {
119
+ control: {
120
+ gap: "0",
121
+ spaceX: "-1px"
122
+ },
123
+ input: {
124
+ _notFirst: {
125
+ borderStartRadius: "0"
126
+ },
127
+ _notLast: {
128
+ borderEndRadius: "0"
129
+ },
130
+ _focusVisible: {
131
+ zIndex: "1"
132
+ }
133
+ }
134
+ }
111
135
  }
112
136
  },
113
137
  defaultVariants: {
package/dist/esm/slot-recipes/radio-card.js CHANGED
@@ -49,7 +49,8 @@ const radioCardSlotRecipe = defineSlotRecipe({
49
49
  }
50
50
  },
51
51
  itemText: {
52
- fontWeight: "medium"
52
+ fontWeight: "medium",
53
+ flex: "1"
53
54
  },
54
55
  itemDescription: {
55
56
  opacity: "0.64",
package/dist/esm/slot-recipes/slider.js CHANGED
@@ -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]": {
164
+ "&[data-has-mark-label], &:has(.slider__marker-label)": {
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]": {
188
+ "&[data-has-mark-label], &:has(.slider__marker-label)": {
189
189
  marginBottom: "4"
190
190
  }
191
191
  },
package/dist/esm/slot-recipes/switch.js CHANGED
@@ -52,6 +52,7 @@ const switchSlotRecipe = defineSlotRecipe({
52
52
  position: "relative",
53
53
  width: "var(--switch-width)",
54
54
  height: "var(--switch-height)",
55
+ transition: "backgrounds",
55
56
  _disabled: {
56
57
  opacity: "0.5",
57
58
  cursor: "not-allowed"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chakra-ui/panda-preset",
3
- "version": "3.8.2",
3
+ "version": "3.9.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.0.2",
52
- "@chakra-ui/cli": "3.8.2"
52
+ "@chakra-ui/cli": "3.9.0"
53
53
  },
54
54
  "scripts": {
55
55
  "theme:eject": "chakra eject --outdir=src",