@chakra-ui/panda-preset 3.35.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.
- package/dist/cjs/recipes/link.cjs +1 -1
- package/dist/cjs/slot-recipes/date-picker.cjs +0 -3
- package/dist/cjs/slot-recipes/floating-panel.cjs +92 -0
- package/dist/cjs/slot-recipes/index.cjs +3 -1
- package/dist/esm/recipes/link.js +1 -1
- package/dist/esm/slot-recipes/date-picker.js +0 -3
- package/dist/esm/slot-recipes/floating-panel.js +90 -0
- package/dist/esm/slot-recipes/index.js +3 -1
- package/dist/types/slot-recipes/floating-panel.d.ts +1 -0
- package/dist/types/slot-recipes/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -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)"
|
|
@@ -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;
|
|
@@ -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/recipes/link.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)"
|
|
@@ -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 };
|
|
@@ -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 };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const floatingPanelSlotRecipe: import("@pandacss/types").SlotRecipeConfig;
|
|
@@ -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.
|
|
3
|
+
"version": "3.36.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": "16.1.1",
|
|
52
|
-
"@chakra-ui/cli": "3.
|
|
52
|
+
"@chakra-ui/cli": "3.36.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"theme:eject": "chakra eject --outdir=src",
|