@accelint/design-system 0.1.1 → 0.2.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/README.md +1 -1
- package/dist/assets/components/menu/menu.css +29 -27
- package/dist/assets/components/options/options.css +28 -26
- package/dist/assets/src/components/menu/{menu.css.ts.vanilla-CSnDqc5E.css → menu.css.ts.vanilla-LoWLg-jE.css} +29 -27
- package/dist/assets/src/components/options/{options.css.ts.vanilla-ngVt12W4.css → options.css.ts.vanilla-CWWFBTou.css} +28 -26
- package/dist/components/button/button.d.ts +3 -3
- package/dist/components/dialog/dialog.d.ts +1 -1
- package/dist/components/menu/menu.css.d.ts +4 -0
- package/dist/components/menu/menu.vanilla.js +2 -2
- package/dist/components/options/options.css.d.ts +4 -0
- package/dist/components/options/options.vanilla.js +2 -2
- package/dist/components/query-builder/group.js +1 -1
- package/dist/components/query-builder/group.js.map +1 -1
- package/dist/components/query-builder/query-builder.d.ts +1 -1
- package/dist/components/query-builder/query-builder.js +3 -3
- package/dist/components/query-builder/query-builder.js.map +1 -1
- package/dist/styles.css +1025 -1021
- package/dist/vanilla.d.ts +4 -1
- package/package.json +19 -7
package/README.md
CHANGED
|
@@ -30,7 +30,7 @@ We also want to establish a common platform for multiple similar, but stylistica
|
|
|
30
30
|
|
|
31
31
|
C2DS is a semi-headless, themeless collection of components that express minimal opinions about layout and baked-in styles with an API of props for each component that strives to suit many common use cases. The design guidelines are established within [Figma](https://www.figma.com/design/CoNlAMPL0u5DCVYRPQKhki/N2X-Design-System?node-id=30742-76715&m=dev).
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
The vast majority of spacing and color theming is left up to the implementer to define. For every element of this system, the priority has been flexibility over rigid requirements and an "escape hatch" for overriding style and behavior if necessary.
|
|
34
34
|
|
|
35
35
|
## Why isn't there a theme or icons?
|
|
36
36
|
|
|
@@ -1,83 +1,85 @@
|
|
|
1
1
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
|
|
2
2
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
|
|
3
3
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
|
|
4
|
-
.
|
|
4
|
+
.menu_menuClassNames_menu_container__dpszds19 {
|
|
5
5
|
container-name: menu_menuContainers_menu__dpszds0;
|
|
6
6
|
display: block;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
.menu_menuClassNames_menu_menu__dpszds1a {
|
|
9
9
|
min-width: var(--menu-minWidth__dpszdsv, var(--trigger-width));
|
|
10
10
|
padding: var(--menu-y__dpszdsx, 0) var(--menu-x__dpszdsw, 0);
|
|
11
|
+
border-radius: var(--sm__ljimwq3d);
|
|
11
12
|
}
|
|
12
|
-
.
|
|
13
|
+
.menu_menuClassNames_list_container__dpszds1b {
|
|
13
14
|
container-name: menu_menuContainers_list__dpszds1;
|
|
14
15
|
display: contents;
|
|
15
16
|
}
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
background: var(--list-background__dpszdsj);
|
|
20
|
-
border: 1px solid var(--list-border__dpszdsk, transparent);
|
|
21
|
-
border-radius: var(--sm__ljimwq3d);
|
|
22
|
-
}
|
|
23
|
-
.menu_menuClassNames_list_section__dpszds1b {
|
|
24
|
-
padding: var(--section-y__dpszdsz, 0) var(--section-x__dpszdsy, 0);
|
|
17
|
+
.menu_menuClassNames_list_section__dpszds1d {
|
|
18
|
+
padding: var(--section-y__dpszds11, 0) var(--section-x__dpszds10, 0);
|
|
25
19
|
}
|
|
26
|
-
.
|
|
27
|
-
padding: var(--header-
|
|
20
|
+
.menu_menuClassNames_list_header__dpszds1e {
|
|
21
|
+
padding: var(--header-y__dpszds13, var(--item-y__dpszds17, 0)) var(--header-x__dpszds12, var(--item-x__dpszds16, 0));
|
|
28
22
|
border: 1px solid transparent;
|
|
29
23
|
background: var(--header-background__dpszdsm);
|
|
30
24
|
color: var(--header-color__dpszdso);
|
|
31
25
|
}
|
|
32
|
-
.
|
|
26
|
+
.menu_menuClassNames_list_separator__dpszds1f {
|
|
33
27
|
height: 1px;
|
|
34
|
-
margin: var(--separator-
|
|
28
|
+
margin: var(--separator-y__dpszds15, 0) var(--separator-x__dpszds14, 0);
|
|
35
29
|
background: var(--separator__dpszdsp);
|
|
36
30
|
}
|
|
37
|
-
.
|
|
31
|
+
.menu_menuClassNames_item_container__dpszds1g {
|
|
38
32
|
container-name: menu_menuContainers_item__dpszds2;
|
|
39
33
|
}
|
|
40
|
-
.
|
|
34
|
+
.menu_menuClassNames_item_item__dpszds1h {
|
|
41
35
|
display: grid;
|
|
42
36
|
grid-template-areas: "icon label space action" "icon description space action";
|
|
43
37
|
grid-template-columns: auto auto 1fr auto;
|
|
44
38
|
grid-template-rows: auto auto;
|
|
45
39
|
align-items: center;
|
|
46
|
-
gap: var(--item-
|
|
47
|
-
padding: var(--item-
|
|
40
|
+
gap: var(--item-gap__dpszds18);
|
|
41
|
+
padding: var(--item-y__dpszds17, 0) var(--item-x__dpszds16, 0);
|
|
48
42
|
border: 1px solid var(--item-border__dpszdsr, transparent);
|
|
49
43
|
background: var(--item-background__dpszdsq);
|
|
50
44
|
color: var(--item-color__dpszdss);
|
|
51
45
|
cursor: pointer;
|
|
52
46
|
}
|
|
53
|
-
.
|
|
47
|
+
.menu_menuClassNames_item_label__dpszds1j {
|
|
54
48
|
grid-area: label;
|
|
55
49
|
color: var(--label__dpszdst);
|
|
56
50
|
}
|
|
57
|
-
.
|
|
51
|
+
.menu_menuClassNames_item_description__dpszds1k {
|
|
58
52
|
grid-area: description;
|
|
59
53
|
color: var(--description__dpszdsu, var(--label__dpszdst));
|
|
60
54
|
}
|
|
61
|
-
.
|
|
55
|
+
.menu_menuClassNames_item_shortcut__dpszds1m {
|
|
62
56
|
grid-area: action;
|
|
63
57
|
}
|
|
64
58
|
@container style(--isDisabled__dpszdsd: true) {
|
|
65
|
-
.
|
|
59
|
+
.menu_menuClassNames_item_item__dpszds1h {
|
|
66
60
|
cursor: not-allowed;
|
|
67
61
|
}
|
|
68
62
|
}
|
|
69
63
|
@container style(--hasDescription__dpszdsa: false) {
|
|
70
|
-
.
|
|
64
|
+
.menu_menuClassNames_item_label__dpszds1j {
|
|
71
65
|
grid-row-start: label;
|
|
72
66
|
grid-row-end: description;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
}
|
|
76
70
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
|
|
77
|
-
.
|
|
71
|
+
.menu_menuClassNames_list_list__dpszds1c {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
background: var(--list-background__dpszdsj);
|
|
75
|
+
padding: var(--list-y__dpszdsz, var(--v03__ljimwq2x)) var(--list-x__dpszdsy, 0);
|
|
76
|
+
border: 1px solid var(--list-border__dpszdsk, transparent);
|
|
77
|
+
border-radius: var(--sm__ljimwq3d);
|
|
78
|
+
}
|
|
79
|
+
.menu_menuClassNames_item_icon_icon__dpszds1i {
|
|
78
80
|
grid-area: icon;
|
|
79
81
|
}
|
|
80
|
-
.
|
|
82
|
+
.menu_menuClassNames_item_more_icon__dpszds1l {
|
|
81
83
|
grid-area: action;
|
|
82
84
|
}
|
|
83
85
|
}
|
|
@@ -1,80 +1,82 @@
|
|
|
1
1
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
|
|
2
2
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
|
|
3
3
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
|
|
4
|
-
.
|
|
4
|
+
.options_optionsClassNames_options_container__140gzb51b {
|
|
5
5
|
container-name: options_optionsContainers_options__140gzb50;
|
|
6
6
|
display: block;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
.options_optionsClassNames_options_options__140gzb51c {
|
|
9
9
|
min-width: var(--options-minWidth__140gzb5x, var(--trigger-width));
|
|
10
10
|
padding: var(--options-y__140gzb5z, 0) var(--options-x__140gzb5y, 0);
|
|
11
|
+
border-radius: var(--sm__ljimwq3d);
|
|
11
12
|
}
|
|
12
|
-
.
|
|
13
|
+
.options_optionsClassNames_list_container__140gzb51d {
|
|
13
14
|
container-name: options_optionsContainers_list__140gzb51;
|
|
14
15
|
display: contents;
|
|
15
16
|
}
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
background: var(--list-background__140gzb5l);
|
|
20
|
-
border: 1px solid var(--list-border__140gzb5m, transparent);
|
|
21
|
-
border-radius: var(--sm__ljimwq3d);
|
|
22
|
-
}
|
|
23
|
-
.options_optionsClassNames_list_section__140gzb51d {
|
|
24
|
-
padding: var(--section-y__140gzb511, 0) var(--section-x__140gzb510, 0);
|
|
17
|
+
.options_optionsClassNames_list_section__140gzb51f {
|
|
18
|
+
padding: var(--section-y__140gzb513, 0) var(--section-x__140gzb512, 0);
|
|
25
19
|
}
|
|
26
|
-
.
|
|
27
|
-
padding: var(--header-
|
|
20
|
+
.options_optionsClassNames_list_header__140gzb51g {
|
|
21
|
+
padding: var(--header-y__140gzb515, var(--item-y__140gzb519, 0)) var(--header-x__140gzb514, var(--item-x__140gzb518, 0));
|
|
28
22
|
border: 1px solid transparent;
|
|
29
23
|
background: var(--header-background__140gzb5o);
|
|
30
24
|
color: var(--header-color__140gzb5q);
|
|
31
25
|
}
|
|
32
|
-
.
|
|
26
|
+
.options_optionsClassNames_list_separator__140gzb51h {
|
|
33
27
|
height: 1px;
|
|
34
|
-
margin: var(--separator-
|
|
28
|
+
margin: var(--separator-y__140gzb517, 0) var(--separator-x__140gzb516, 0);
|
|
35
29
|
background: var(--separator__140gzb5r);
|
|
36
30
|
}
|
|
37
|
-
.
|
|
31
|
+
.options_optionsClassNames_item_container__140gzb51i {
|
|
38
32
|
container-name: options_optionsContainers_item__140gzb52;
|
|
39
33
|
}
|
|
40
|
-
.
|
|
34
|
+
.options_optionsClassNames_item_item__140gzb51j {
|
|
41
35
|
display: grid;
|
|
42
36
|
grid-template-areas: "icon label space action" "icon description space action";
|
|
43
37
|
grid-template-columns: auto auto 1fr auto;
|
|
44
38
|
grid-template-rows: auto auto;
|
|
45
39
|
align-items: center;
|
|
46
|
-
gap: var(--item-
|
|
47
|
-
padding: var(--item-
|
|
40
|
+
gap: var(--item-gap__140gzb51a);
|
|
41
|
+
padding: var(--item-y__140gzb519, 0) var(--item-x__140gzb518, 0);
|
|
48
42
|
border: 1px solid var(--item-border__140gzb5t, transparent);
|
|
49
43
|
background: var(--item-background__140gzb5s);
|
|
50
44
|
color: var(--item-color__140gzb5u);
|
|
51
45
|
cursor: pointer;
|
|
52
46
|
}
|
|
53
|
-
.
|
|
47
|
+
.options_optionsClassNames_item_label__140gzb51l {
|
|
54
48
|
grid-area: label;
|
|
55
49
|
color: var(--label__140gzb5v);
|
|
56
50
|
}
|
|
57
|
-
.
|
|
51
|
+
.options_optionsClassNames_item_description__140gzb51m {
|
|
58
52
|
grid-area: description;
|
|
59
53
|
color: var(--description__140gzb5w, var(--label__140gzb5v));
|
|
60
54
|
}
|
|
61
|
-
.
|
|
55
|
+
.options_optionsClassNames_item_shortcut__140gzb51n {
|
|
62
56
|
grid-area: action;
|
|
63
57
|
}
|
|
64
58
|
@container style(--isDisabled__140gzb5f: true) {
|
|
65
|
-
.
|
|
59
|
+
.options_optionsClassNames_item_item__140gzb51j {
|
|
66
60
|
cursor: not-allowed;
|
|
67
61
|
}
|
|
68
62
|
}
|
|
69
63
|
@container style(--hasDescription__140gzb5e: false) {
|
|
70
|
-
.
|
|
64
|
+
.options_optionsClassNames_item_label__140gzb51l {
|
|
71
65
|
grid-row-start: label;
|
|
72
66
|
grid-row-end: description;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
}
|
|
76
70
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
|
|
77
|
-
.
|
|
71
|
+
.options_optionsClassNames_list_list__140gzb51e {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
background: var(--list-background__140gzb5l);
|
|
75
|
+
padding: var(--list-y__140gzb511, var(--v03__ljimwq2x)) var(--list-x__140gzb510, 0);
|
|
76
|
+
border: 1px solid var(--list-border__140gzb5m, transparent);
|
|
77
|
+
border-radius: var(--sm__ljimwq3d);
|
|
78
|
+
}
|
|
79
|
+
.options_optionsClassNames_item_icon_icon__140gzb51k {
|
|
78
80
|
grid-area: icon;
|
|
79
81
|
}
|
|
80
82
|
}
|
|
@@ -1,83 +1,85 @@
|
|
|
1
1
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
|
|
2
2
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
|
|
3
3
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
|
|
4
|
-
.
|
|
4
|
+
.menu_menuClassNames_menu_container__dpszds19 {
|
|
5
5
|
container-name: menu_menuContainers_menu__dpszds0;
|
|
6
6
|
display: block;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
.menu_menuClassNames_menu_menu__dpszds1a {
|
|
9
9
|
min-width: var(--menu-minWidth__dpszdsv, var(--trigger-width));
|
|
10
10
|
padding: var(--menu-y__dpszdsx, 0) var(--menu-x__dpszdsw, 0);
|
|
11
|
+
border-radius: var(--sm__ljimwq3d);
|
|
11
12
|
}
|
|
12
|
-
.
|
|
13
|
+
.menu_menuClassNames_list_container__dpszds1b {
|
|
13
14
|
container-name: menu_menuContainers_list__dpszds1;
|
|
14
15
|
display: contents;
|
|
15
16
|
}
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
background: var(--list-background__dpszdsj);
|
|
20
|
-
border: 1px solid var(--list-border__dpszdsk, transparent);
|
|
21
|
-
border-radius: var(--sm__ljimwq3d);
|
|
22
|
-
}
|
|
23
|
-
.menu_menuClassNames_list_section__dpszds1b {
|
|
24
|
-
padding: var(--section-y__dpszdsz, 0) var(--section-x__dpszdsy, 0);
|
|
17
|
+
.menu_menuClassNames_list_section__dpszds1d {
|
|
18
|
+
padding: var(--section-y__dpszds11, 0) var(--section-x__dpszds10, 0);
|
|
25
19
|
}
|
|
26
|
-
.
|
|
27
|
-
padding: var(--header-
|
|
20
|
+
.menu_menuClassNames_list_header__dpszds1e {
|
|
21
|
+
padding: var(--header-y__dpszds13, var(--item-y__dpszds17, 0)) var(--header-x__dpszds12, var(--item-x__dpszds16, 0));
|
|
28
22
|
border: 1px solid transparent;
|
|
29
23
|
background: var(--header-background__dpszdsm);
|
|
30
24
|
color: var(--header-color__dpszdso);
|
|
31
25
|
}
|
|
32
|
-
.
|
|
26
|
+
.menu_menuClassNames_list_separator__dpszds1f {
|
|
33
27
|
height: 1px;
|
|
34
|
-
margin: var(--separator-
|
|
28
|
+
margin: var(--separator-y__dpszds15, 0) var(--separator-x__dpszds14, 0);
|
|
35
29
|
background: var(--separator__dpszdsp);
|
|
36
30
|
}
|
|
37
|
-
.
|
|
31
|
+
.menu_menuClassNames_item_container__dpszds1g {
|
|
38
32
|
container-name: menu_menuContainers_item__dpszds2;
|
|
39
33
|
}
|
|
40
|
-
.
|
|
34
|
+
.menu_menuClassNames_item_item__dpszds1h {
|
|
41
35
|
display: grid;
|
|
42
36
|
grid-template-areas: "icon label space action" "icon description space action";
|
|
43
37
|
grid-template-columns: auto auto 1fr auto;
|
|
44
38
|
grid-template-rows: auto auto;
|
|
45
39
|
align-items: center;
|
|
46
|
-
gap: var(--item-
|
|
47
|
-
padding: var(--item-
|
|
40
|
+
gap: var(--item-gap__dpszds18);
|
|
41
|
+
padding: var(--item-y__dpszds17, 0) var(--item-x__dpszds16, 0);
|
|
48
42
|
border: 1px solid var(--item-border__dpszdsr, transparent);
|
|
49
43
|
background: var(--item-background__dpszdsq);
|
|
50
44
|
color: var(--item-color__dpszdss);
|
|
51
45
|
cursor: pointer;
|
|
52
46
|
}
|
|
53
|
-
.
|
|
47
|
+
.menu_menuClassNames_item_label__dpszds1j {
|
|
54
48
|
grid-area: label;
|
|
55
49
|
color: var(--label__dpszdst);
|
|
56
50
|
}
|
|
57
|
-
.
|
|
51
|
+
.menu_menuClassNames_item_description__dpszds1k {
|
|
58
52
|
grid-area: description;
|
|
59
53
|
color: var(--description__dpszdsu, var(--label__dpszdst));
|
|
60
54
|
}
|
|
61
|
-
.
|
|
55
|
+
.menu_menuClassNames_item_shortcut__dpszds1m {
|
|
62
56
|
grid-area: action;
|
|
63
57
|
}
|
|
64
58
|
@container style(--isDisabled__dpszdsd: true) {
|
|
65
|
-
.
|
|
59
|
+
.menu_menuClassNames_item_item__dpszds1h {
|
|
66
60
|
cursor: not-allowed;
|
|
67
61
|
}
|
|
68
62
|
}
|
|
69
63
|
@container style(--hasDescription__dpszdsa: false) {
|
|
70
|
-
.
|
|
64
|
+
.menu_menuClassNames_item_label__dpszds1j {
|
|
71
65
|
grid-row-start: label;
|
|
72
66
|
grid-row-end: description;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
}
|
|
76
70
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
|
|
77
|
-
.
|
|
71
|
+
.menu_menuClassNames_list_list__dpszds1c {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
background: var(--list-background__dpszdsj);
|
|
75
|
+
padding: var(--list-y__dpszdsz, var(--v03__ljimwq2x)) var(--list-x__dpszdsy, 0);
|
|
76
|
+
border: 1px solid var(--list-border__dpszdsk, transparent);
|
|
77
|
+
border-radius: var(--sm__ljimwq3d);
|
|
78
|
+
}
|
|
79
|
+
.menu_menuClassNames_item_icon_icon__dpszds1i {
|
|
78
80
|
grid-area: icon;
|
|
79
81
|
}
|
|
80
|
-
.
|
|
82
|
+
.menu_menuClassNames_item_more_icon__dpszds1l {
|
|
81
83
|
grid-area: action;
|
|
82
84
|
}
|
|
83
85
|
}
|
|
@@ -1,80 +1,82 @@
|
|
|
1
1
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
|
|
2
2
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
|
|
3
3
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
|
|
4
|
-
.
|
|
4
|
+
.options_optionsClassNames_options_container__140gzb51b {
|
|
5
5
|
container-name: options_optionsContainers_options__140gzb50;
|
|
6
6
|
display: block;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
.options_optionsClassNames_options_options__140gzb51c {
|
|
9
9
|
min-width: var(--options-minWidth__140gzb5x, var(--trigger-width));
|
|
10
10
|
padding: var(--options-y__140gzb5z, 0) var(--options-x__140gzb5y, 0);
|
|
11
|
+
border-radius: var(--sm__ljimwq3d);
|
|
11
12
|
}
|
|
12
|
-
.
|
|
13
|
+
.options_optionsClassNames_list_container__140gzb51d {
|
|
13
14
|
container-name: options_optionsContainers_list__140gzb51;
|
|
14
15
|
display: contents;
|
|
15
16
|
}
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
background: var(--list-background__140gzb5l);
|
|
20
|
-
border: 1px solid var(--list-border__140gzb5m, transparent);
|
|
21
|
-
border-radius: var(--sm__ljimwq3d);
|
|
22
|
-
}
|
|
23
|
-
.options_optionsClassNames_list_section__140gzb51d {
|
|
24
|
-
padding: var(--section-y__140gzb511, 0) var(--section-x__140gzb510, 0);
|
|
17
|
+
.options_optionsClassNames_list_section__140gzb51f {
|
|
18
|
+
padding: var(--section-y__140gzb513, 0) var(--section-x__140gzb512, 0);
|
|
25
19
|
}
|
|
26
|
-
.
|
|
27
|
-
padding: var(--header-
|
|
20
|
+
.options_optionsClassNames_list_header__140gzb51g {
|
|
21
|
+
padding: var(--header-y__140gzb515, var(--item-y__140gzb519, 0)) var(--header-x__140gzb514, var(--item-x__140gzb518, 0));
|
|
28
22
|
border: 1px solid transparent;
|
|
29
23
|
background: var(--header-background__140gzb5o);
|
|
30
24
|
color: var(--header-color__140gzb5q);
|
|
31
25
|
}
|
|
32
|
-
.
|
|
26
|
+
.options_optionsClassNames_list_separator__140gzb51h {
|
|
33
27
|
height: 1px;
|
|
34
|
-
margin: var(--separator-
|
|
28
|
+
margin: var(--separator-y__140gzb517, 0) var(--separator-x__140gzb516, 0);
|
|
35
29
|
background: var(--separator__140gzb5r);
|
|
36
30
|
}
|
|
37
|
-
.
|
|
31
|
+
.options_optionsClassNames_item_container__140gzb51i {
|
|
38
32
|
container-name: options_optionsContainers_item__140gzb52;
|
|
39
33
|
}
|
|
40
|
-
.
|
|
34
|
+
.options_optionsClassNames_item_item__140gzb51j {
|
|
41
35
|
display: grid;
|
|
42
36
|
grid-template-areas: "icon label space action" "icon description space action";
|
|
43
37
|
grid-template-columns: auto auto 1fr auto;
|
|
44
38
|
grid-template-rows: auto auto;
|
|
45
39
|
align-items: center;
|
|
46
|
-
gap: var(--item-
|
|
47
|
-
padding: var(--item-
|
|
40
|
+
gap: var(--item-gap__140gzb51a);
|
|
41
|
+
padding: var(--item-y__140gzb519, 0) var(--item-x__140gzb518, 0);
|
|
48
42
|
border: 1px solid var(--item-border__140gzb5t, transparent);
|
|
49
43
|
background: var(--item-background__140gzb5s);
|
|
50
44
|
color: var(--item-color__140gzb5u);
|
|
51
45
|
cursor: pointer;
|
|
52
46
|
}
|
|
53
|
-
.
|
|
47
|
+
.options_optionsClassNames_item_label__140gzb51l {
|
|
54
48
|
grid-area: label;
|
|
55
49
|
color: var(--label__140gzb5v);
|
|
56
50
|
}
|
|
57
|
-
.
|
|
51
|
+
.options_optionsClassNames_item_description__140gzb51m {
|
|
58
52
|
grid-area: description;
|
|
59
53
|
color: var(--description__140gzb5w, var(--label__140gzb5v));
|
|
60
54
|
}
|
|
61
|
-
.
|
|
55
|
+
.options_optionsClassNames_item_shortcut__140gzb51n {
|
|
62
56
|
grid-area: action;
|
|
63
57
|
}
|
|
64
58
|
@container style(--isDisabled__140gzb5f: true) {
|
|
65
|
-
.
|
|
59
|
+
.options_optionsClassNames_item_item__140gzb51j {
|
|
66
60
|
cursor: not-allowed;
|
|
67
61
|
}
|
|
68
62
|
}
|
|
69
63
|
@container style(--hasDescription__140gzb5e: false) {
|
|
70
|
-
.
|
|
64
|
+
.options_optionsClassNames_item_label__140gzb51l {
|
|
71
65
|
grid-row-start: label;
|
|
72
66
|
grid-row-end: description;
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
}
|
|
76
70
|
@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
|
|
77
|
-
.
|
|
71
|
+
.options_optionsClassNames_list_list__140gzb51e {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
background: var(--list-background__140gzb5l);
|
|
75
|
+
padding: var(--list-y__140gzb511, var(--v03__ljimwq2x)) var(--list-x__140gzb510, 0);
|
|
76
|
+
border: 1px solid var(--list-border__140gzb5m, transparent);
|
|
77
|
+
border-radius: var(--sm__ljimwq3d);
|
|
78
|
+
}
|
|
79
|
+
.options_optionsClassNames_item_icon_icon__140gzb51k {
|
|
78
80
|
grid-area: icon;
|
|
79
81
|
}
|
|
80
82
|
}
|
|
@@ -3,7 +3,7 @@ import { type ContextValue } from 'react-aria-components';
|
|
|
3
3
|
import type { ButtonMapping, ButtonProps, ButtonSizes, LinkButtonProps, ToggleButtonProps } from './types';
|
|
4
4
|
export declare const ButtonContext: Context<ContextValue<ButtonProps, HTMLButtonElement>>;
|
|
5
5
|
export declare const Button: (props: Omit<import("react-aria-components").ButtonProps, "children" | "className" | "style"> & {
|
|
6
|
-
children?: import("
|
|
6
|
+
children?: import("../..").RenderPropsChildren<import("./types").ButtonRenderProps>;
|
|
7
7
|
classNames?: Partial<{
|
|
8
8
|
container: string;
|
|
9
9
|
button: string;
|
|
@@ -15,7 +15,7 @@ export declare const Button: (props: Omit<import("react-aria-components").Button
|
|
|
15
15
|
} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
|
|
16
16
|
export declare const LinkButtonContext: Context<ContextValue<LinkButtonProps, HTMLAnchorElement>>;
|
|
17
17
|
export declare const LinkButton: (props: Omit<import("react-aria-components").LinkProps, "children" | "className" | "style"> & {
|
|
18
|
-
children?: import("
|
|
18
|
+
children?: import("../..").RenderPropsChildren<import("./types").ButtonRenderProps>;
|
|
19
19
|
classNames?: Partial<{
|
|
20
20
|
container: string;
|
|
21
21
|
button: string;
|
|
@@ -27,7 +27,7 @@ export declare const LinkButton: (props: Omit<import("react-aria-components").Li
|
|
|
27
27
|
} & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement | null;
|
|
28
28
|
export declare const ToggleButtonContext: Context<ContextValue<ToggleButtonProps, HTMLButtonElement>>;
|
|
29
29
|
export declare const ToggleButton: (props: Omit<import("react-aria-components").ToggleButtonProps, "children" | "className" | "style"> & {
|
|
30
|
-
children?: import("
|
|
30
|
+
children?: import("../..").RenderPropsChildren<import("./types").ButtonRenderProps>;
|
|
31
31
|
classNames?: Partial<{
|
|
32
32
|
container: string;
|
|
33
33
|
button: string;
|
|
@@ -2,7 +2,7 @@ import { type ContextValue } from 'react-aria-components';
|
|
|
2
2
|
import type { DialogMapping, DialogProps, DialogSizes } from './types';
|
|
3
3
|
export declare const DialogContext: import("react").Context<ContextValue<DialogProps, HTMLDivElement>>;
|
|
4
4
|
export declare const Dialog: (props: Omit<import("react-aria-components").ModalOverlayProps, "children" | "className" | "style"> & Pick<import("react-aria-components").DialogProps, "role"> & {
|
|
5
|
-
children?: import("
|
|
5
|
+
children?: import("../..").RenderPropsChildren<import("./types").DialogRenderProps>;
|
|
6
6
|
classNames?: Partial<{
|
|
7
7
|
portal: string;
|
|
8
8
|
container: string;
|
|
@@ -50,6 +50,10 @@ export declare const menuSpaceVars: {
|
|
|
50
50
|
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
51
51
|
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
52
52
|
};
|
|
53
|
+
list: {
|
|
54
|
+
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
55
|
+
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
56
|
+
};
|
|
53
57
|
section: {
|
|
54
58
|
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
55
59
|
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
|
-
var menuClassNames = { menu: { container: "
|
|
2
|
+
var menuClassNames = { menu: { container: "menu_menuClassNames_menu_container__dpszds19", menu: "menu_menuClassNames_menu_menu__dpszds1a surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4" }, list: { container: "menu_menuClassNames_list_container__dpszds1b", list: "menu_menuClassNames_list_list__dpszds1c", section: "menu_menuClassNames_list_section__dpszds1d", header: "menu_menuClassNames_list_header__dpszds1e", separator: "menu_menuClassNames_list_separator__dpszds1f" }, item: { container: "menu_menuClassNames_item_container__dpszds1g", item: "menu_menuClassNames_item_item__dpszds1h", icon: { icon: "menu_menuClassNames_item_icon_icon__dpszds1i" }, label: "menu_menuClassNames_item_label__dpszds1j", description: "menu_menuClassNames_item_description__dpszds1k", more: { icon: "menu_menuClassNames_item_more_icon__dpszds1l" }, shortcut: "menu_menuClassNames_item_shortcut__dpszds1m" } };
|
|
3
3
|
var menuColorVars = { list: { background: "var(--list-background__dpszdsj)", border: "var(--list-border__dpszdsk)", color: "var(--list-color__dpszdsl)" }, header: { background: "var(--header-background__dpszdsm)", border: "var(--header-border__dpszdsn)", color: "var(--header-color__dpszdso)" }, separator: "var(--separator__dpszdsp)", item: { background: "var(--item-background__dpszdsq)", border: "var(--item-border__dpszdsr)", color: "var(--item-color__dpszdss)" }, label: "var(--label__dpszdst)", description: "var(--description__dpszdsu)" };
|
|
4
4
|
var menuItemStateVars = { selectionMode: "var(--selectionMode__dpszds7)", selectionBehavior: "var(--selectionBehavior__dpszds8)", size: "var(--size__dpszds9)", hasDescription: "var(--hasDescription__dpszdsa)", hasSubmenu: "var(--hasSubmenu__dpszdsb)", isOpen: "var(--isOpen__dpszdsc)", isDisabled: "var(--isDisabled__dpszdsd)", isHovered: "var(--isHovered__dpszdse)", isPressed: "var(--isPressed__dpszdsf)", isSelected: "var(--isSelected__dpszdsg)", isFocused: "var(--isFocused__dpszdsh)", isFocusVisible: "var(--isFocusVisible__dpszdsi)" };
|
|
5
|
-
var menuSpaceVars = { menu: { minWidth: "var(--menu-minWidth__dpszdsv)", x: "var(--menu-x__dpszdsw)", y: "var(--menu-y__dpszdsx)" }, section: { x: "var(--section-
|
|
5
|
+
var menuSpaceVars = { menu: { minWidth: "var(--menu-minWidth__dpszdsv)", x: "var(--menu-x__dpszdsw)", y: "var(--menu-y__dpszdsx)" }, list: { x: "var(--list-x__dpszdsy)", y: "var(--list-y__dpszdsz)" }, section: { x: "var(--section-x__dpszds10)", y: "var(--section-y__dpszds11)" }, header: { x: "var(--header-x__dpszds12)", y: "var(--header-y__dpszds13)" }, separator: { x: "var(--separator-x__dpszds14)", y: "var(--separator-y__dpszds15)" }, item: { x: "var(--item-x__dpszds16)", y: "var(--item-y__dpszds17)", gap: "var(--item-gap__dpszds18)" } };
|
|
6
6
|
var menuStateVars = { placement: "var(--placement__dpszds3)", size: "var(--size__dpszds4)", isExiting: "var(--isExiting__dpszds5)", isEntering: "var(--isEntering__dpszds6)" };
|
|
7
7
|
|
|
8
8
|
export { menuClassNames, menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars };
|
|
@@ -54,6 +54,10 @@ export declare const optionsSpaceVars: {
|
|
|
54
54
|
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
55
55
|
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
56
56
|
};
|
|
57
|
+
list: {
|
|
58
|
+
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
59
|
+
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
60
|
+
};
|
|
57
61
|
section: {
|
|
58
62
|
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
59
63
|
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
|
|
2
|
-
var optionsClassNames = { options: { container: "
|
|
2
|
+
var optionsClassNames = { options: { container: "options_optionsClassNames_options_container__140gzb51b", options: "options_optionsClassNames_options_options__140gzb51c surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4" }, list: { container: "options_optionsClassNames_list_container__140gzb51d", list: "options_optionsClassNames_list_list__140gzb51e", section: "options_optionsClassNames_list_section__140gzb51f", header: "options_optionsClassNames_list_header__140gzb51g", separator: "options_optionsClassNames_list_separator__140gzb51h" }, item: { container: "options_optionsClassNames_item_container__140gzb51i", item: "options_optionsClassNames_item_item__140gzb51j", icon: { icon: "options_optionsClassNames_item_icon_icon__140gzb51k" }, label: "options_optionsClassNames_item_label__140gzb51l", description: "options_optionsClassNames_item_description__140gzb51m", shortcut: "options_optionsClassNames_item_shortcut__140gzb51n" } };
|
|
3
3
|
var optionsColorVars = { list: { background: "var(--list-background__140gzb5l)", border: "var(--list-border__140gzb5m)", color: "var(--list-color__140gzb5n)" }, header: { background: "var(--header-background__140gzb5o)", border: "var(--header-border__140gzb5p)", color: "var(--header-color__140gzb5q)" }, separator: "var(--separator__140gzb5r)", item: { background: "var(--item-background__140gzb5s)", border: "var(--item-border__140gzb5t)", color: "var(--item-color__140gzb5u)" }, label: "var(--label__140gzb5v)", description: "var(--description__140gzb5w)" };
|
|
4
4
|
var optionsContainers = { options: "options_optionsContainers_options__140gzb50", list: "options_optionsContainers_list__140gzb51", item: "options_optionsContainers_item__140gzb52" };
|
|
5
5
|
var optionsItemStateVars = { selectionBehavior: "var(--selectionBehavior__140gzb5b)", selectionMode: "var(--selectionMode__140gzb5c)", size: "var(--size__140gzb5d)", hasDescription: "var(--hasDescription__140gzb5e)", isDisabled: "var(--isDisabled__140gzb5f)", isHovered: "var(--isHovered__140gzb5g)", isPressed: "var(--isPressed__140gzb5h)", isSelected: "var(--isSelected__140gzb5i)", isFocused: "var(--isFocused__140gzb5j)", isFocusVisible: "var(--isFocusVisible__140gzb5k)" };
|
|
6
6
|
var optionsListStateVars = { size: "var(--size__140gzb57)", isEmpty: "var(--isEmpty__140gzb58)", isFocused: "var(--isFocused__140gzb59)", isFocusVisible: "var(--isFocusVisible__140gzb5a)" };
|
|
7
|
-
var optionsSpaceVars = { options: { minWidth: "var(--options-minWidth__140gzb5x)", x: "var(--options-x__140gzb5y)", y: "var(--options-y__140gzb5z)" }, section: { x: "var(--section-
|
|
7
|
+
var optionsSpaceVars = { options: { minWidth: "var(--options-minWidth__140gzb5x)", x: "var(--options-x__140gzb5y)", y: "var(--options-y__140gzb5z)" }, list: { x: "var(--list-x__140gzb510)", y: "var(--list-y__140gzb511)" }, section: { x: "var(--section-x__140gzb512)", y: "var(--section-y__140gzb513)" }, header: { x: "var(--header-x__140gzb514)", y: "var(--header-y__140gzb515)" }, separator: { x: "var(--separator-x__140gzb516)", y: "var(--separator-y__140gzb517)" }, item: { x: "var(--item-x__140gzb518)", y: "var(--item-y__140gzb519)", gap: "var(--item-gap__140gzb51a)" } };
|
|
8
8
|
var optionsStateVars = { size: "var(--size__140gzb53)", isEntering: "var(--isEntering__140gzb54)", isExiting: "var(--isExiting__140gzb55)", placement: "var(--placement__140gzb56)" };
|
|
9
9
|
|
|
10
10
|
export { optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars };
|
|
@@ -45,7 +45,7 @@ function RuleGroup(props) {
|
|
|
45
45
|
shiftGroupUp,
|
|
46
46
|
toggleLockGroup
|
|
47
47
|
]);
|
|
48
|
-
return jsx("div", { className: classNames?.group?.container, style, children: jsxs("div", { ref: group.previewRef, className: group.outerClassName,
|
|
48
|
+
return jsx("div", { className: classNames?.group?.container, style, children: jsxs("div", { ref: group.previewRef, className: group.outerClassName, "data-dragmonitorid": group.dragMonitorId, "data-dropmonitorid": group.dropMonitorId, "data-level": group.path.length, "data-path": JSON.stringify(group.path), "data-rule-group-id": group.id, "data-testid": TestID.ruleGroup, children: [jsx("div", { ref: group.dropRef, className: group.classNames.header, children: jsx(RuleGroupHeaderElements, { ...elementProps }) }), jsx("div", { className: group.classNames.body, children: jsx(RuleGroupBodyElements, { ...elementProps }) }), jsx("div", { className: classNames?.group?.footer, children: jsx(RuleGroupFooterElements, { ...elementProps }) })] }) });
|
|
49
49
|
}
|
|
50
50
|
function RuleGroupHeaderComponents(ruleGroup) {
|
|
51
51
|
const { classNames } = useContext(QueryBuilderContext);
|