@servicetitan/anvil2 1.45.2 → 1.46.1
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/CHANGELOG.md +20 -0
- package/dist/{Calendar-BK861SAW.js → Calendar-BQ5F2ENO.js} +2 -2
- package/dist/{Calendar-BK861SAW.js.map → Calendar-BQ5F2ENO.js.map} +1 -1
- package/dist/Calendar.js +1 -1
- package/dist/{Checkbox-ZphVb1l0.js → Checkbox-DDrmVC-u.js} +2 -2
- package/dist/{Checkbox-ZphVb1l0.js.map → Checkbox-DDrmVC-u.js.map} +1 -1
- package/dist/{Checkbox-CYNjFdtO.js → Checkbox-Dl4KTwEJ.js} +2 -2
- package/dist/{Checkbox-CYNjFdtO.js.map → Checkbox-Dl4KTwEJ.js.map} +1 -1
- package/dist/Checkbox.js +2 -2
- package/dist/{useInfiniteCombobox-BaYWUxjg.js → Combobox-B9nesJuc.js} +18 -185
- package/dist/Combobox-B9nesJuc.js.map +1 -0
- package/dist/Combobox.js +2 -1
- package/dist/Combobox.js.map +1 -1
- package/dist/{DateField-DnasO2rB.js → DateField-DXxPsRtf.js} +2 -2
- package/dist/{DateField-DnasO2rB.js.map → DateField-DXxPsRtf.js.map} +1 -1
- package/dist/DateField.js +1 -1
- package/dist/{DateFieldRange-Ba-8T-Nz.js → DateFieldRange-Xauviu1w.js} +6 -6
- package/dist/DateFieldRange-Xauviu1w.js.map +1 -0
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-BBu5Hi9c.js → DateFieldSingle-yLnwpVzd.js} +4 -4
- package/dist/{DateFieldSingle-BBu5Hi9c.js.map → DateFieldSingle-yLnwpVzd.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/Dnd.js +1 -1
- package/dist/DndSort.js +1 -1
- package/dist/{ListView-DEAMQopB.js → ListView-pb3rIcze.js} +2 -2
- package/dist/{ListView-DEAMQopB.js.map → ListView-pb3rIcze.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/{Menu-C8we5CHP.js → Menu-DEVZz9xZ.js} +8 -3
- package/dist/Menu-DEVZz9xZ.js.map +1 -0
- package/dist/Menu.js +1 -1
- package/dist/{Page-cKXkjMmd.js → Page-BMDkbDcU.js} +2 -2
- package/dist/{Page-cKXkjMmd.js.map → Page-BMDkbDcU.js.map} +1 -1
- package/dist/Page.js +1 -1
- package/dist/{Pagination-ta8a2cJN.js → Pagination-BJsCppgW.js} +2 -2
- package/dist/{Pagination-ta8a2cJN.js.map → Pagination-BJsCppgW.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{SearchField-BKXkoWPs.js → SearchField-Bb0uObwG.js} +2 -2
- package/dist/{SearchField-BKXkoWPs.js.map → SearchField-Bb0uObwG.js.map} +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/{SelectCard-BWh8Yp7T.js → SelectCard-BTYZg9TG.js} +2 -2
- package/dist/{SelectCard-BWh8Yp7T.js.map → SelectCard-BTYZg9TG.js.map} +1 -1
- package/dist/SelectCard.js +1 -1
- package/dist/Toolbar-D4zuUFhb.js +2077 -0
- package/dist/Toolbar-D4zuUFhb.js.map +1 -0
- package/dist/Toolbar.css +139 -28
- package/dist/Toolbar.d.ts +3 -3
- package/dist/Toolbar.js +1 -1
- package/dist/assets/icons/st/gnav_legacy_search_filled.svg +1 -1
- package/dist/assets/icons/st/gnav_legacy_search_outline.svg +1 -1
- package/dist/beta/components/Toolbar/Filters/FilterButton.d.ts +30 -0
- package/dist/beta/components/Toolbar/Filters/FilterDateRange.d.ts +37 -0
- package/dist/beta/components/Toolbar/Filters/FilterDateSingle.d.ts +30 -0
- package/dist/beta/components/Toolbar/Filters/FilterDrawer.d.ts +15 -0
- package/dist/beta/components/Toolbar/Filters/FilterGroup.d.ts +25 -0
- package/dist/beta/components/Toolbar/Filters/FilterItemWrapper.d.ts +24 -0
- package/dist/beta/components/Toolbar/Filters/FilterSelect.d.ts +29 -0
- package/dist/beta/components/Toolbar/Filters/FilterToggleButton.d.ts +24 -0
- package/dist/beta/components/Toolbar/Filters/internal/FilterGroupContext.d.ts +40 -0
- package/dist/beta/components/Toolbar/Filters/internal/types.d.ts +130 -0
- package/dist/beta/components/Toolbar/Filters/internal/utils/filter-state.d.ts +40 -0
- package/dist/beta/components/Toolbar/Filters/internal/utils/test.d.ts +57 -0
- package/dist/beta/components/Toolbar/Toolbar.d.ts +302 -0
- package/dist/beta/components/Toolbar/ToolbarButton.d.ts +41 -0
- package/dist/beta/components/Toolbar/ToolbarButtonLink.d.ts +43 -0
- package/dist/beta/components/Toolbar/ToolbarButtonToggle.d.ts +42 -0
- package/dist/beta/components/Toolbar/ToolbarControlGroup.d.ts +20 -0
- package/dist/beta/components/Toolbar/ToolbarSearchField.d.ts +20 -0
- package/dist/beta/components/Toolbar/ToolbarSelect.d.ts +108 -0
- package/dist/beta/components/Toolbar/index.d.ts +9 -0
- package/dist/beta/components/Toolbar/internal/ToolbarItemOverflowContext.d.ts +19 -0
- package/dist/beta/components/Toolbar/internal/ToolbarItemWrapper.d.ts +40 -0
- package/dist/beta/components/Toolbar/internal/ToolbarOverflowContext.d.ts +35 -0
- package/dist/beta/components/Toolbar/internal/ToolbarOverflowMenu.d.ts +29 -0
- package/dist/beta/components/Toolbar/internal/utils/accessibility.d.ts +26 -0
- package/dist/beta/components/Toolbar/internal/utils/test.d.ts +29 -0
- package/dist/beta/components/Toolbar/types.d.ts +50 -0
- package/dist/beta/components/index.d.ts +1 -0
- package/dist/beta/index.d.ts +1 -0
- package/dist/beta.d.ts +2 -0
- package/dist/beta.js +2 -0
- package/dist/beta.js.map +1 -0
- package/dist/components/Combobox/ComboboxTypes.d.ts +8 -0
- package/dist/components/DateFieldRange/internal/DateFieldRangeCalendar.d.ts +1 -1
- package/dist/components/Dialog/index.d.ts +1 -1
- package/dist/{indeterminate_check_box-Bg24oeHy.js → indeterminate_check_box-RY9zr3xS.js} +17 -17
- package/dist/{indeterminate_check_box-Bg24oeHy.js.map → indeterminate_check_box-RY9zr3xS.js.map} +1 -1
- package/dist/indeterminate_check_box.css +72 -66
- package/dist/{index-CqdP5W00.js → index-V5Ez2gq_.js} +2 -2
- package/dist/{index-CqdP5W00.js.map → index-V5Ez2gq_.js.map} +1 -1
- package/dist/index.css +125 -26
- package/dist/index.js +759 -27
- package/dist/index.js.map +1 -1
- package/dist/index2.css +88 -105
- package/dist/internal/hooks/index.d.ts +1 -0
- package/dist/internal/hooks/useContainerQuery/index.d.ts +1 -0
- package/dist/internal/hooks/useContainerQuery/useContainerQuery.d.ts +46 -0
- package/dist/{useDateFieldOrchestration-DPLftOxu.js → useDateFieldOrchestration-BNJCsRkS.js} +2 -2
- package/dist/{useDateFieldOrchestration-DPLftOxu.js.map → useDateFieldOrchestration-BNJCsRkS.js.map} +1 -1
- package/dist/useInfiniteCombobox-WcRgC9p6.js +179 -0
- package/dist/useInfiniteCombobox-WcRgC9p6.js.map +1 -0
- package/dist/useIntersectionObserver-BEmMDO3P.js +70 -0
- package/dist/useIntersectionObserver-BEmMDO3P.js.map +1 -0
- package/package.json +2 -1
- package/dist/DateFieldRange-Ba-8T-Nz.js.map +0 -1
- package/dist/Menu-C8we5CHP.js.map +0 -1
- package/dist/Toolbar-DK7tXy_W.js +0 -807
- package/dist/Toolbar-DK7tXy_W.js.map +0 -1
- package/dist/useInfiniteCombobox-BaYWUxjg.js.map +0 -1
- /package/dist/{useInfiniteCombobox.css → Combobox.css} +0 -0
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
@layer starter, reset, base, state, application;
|
|
2
|
+
/* REVERT LAYER BUGFIX START */
|
|
3
|
+
[data-anv=checkbox-group] > legend {
|
|
4
|
+
all: revert-layer;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* REVERT LAYER BUGFIX END */
|
|
2
8
|
@layer reset {
|
|
3
|
-
.
|
|
9
|
+
._checkbox_19qga_8 {
|
|
4
10
|
all: unset;
|
|
5
11
|
font-family: var(--font-family-base, "Nunito Sans", sans-serif);
|
|
6
12
|
font-size: 100%;
|
|
@@ -15,12 +21,12 @@
|
|
|
15
21
|
}
|
|
16
22
|
}
|
|
17
23
|
@layer base {
|
|
18
|
-
.
|
|
24
|
+
._wrapper_19qga_23 {
|
|
19
25
|
display: inline-flex;
|
|
20
26
|
flex-direction: column;
|
|
21
27
|
gap: 0.25rem;
|
|
22
28
|
}
|
|
23
|
-
.
|
|
29
|
+
._checkbox_19qga_8 {
|
|
24
30
|
display: inline-flex;
|
|
25
31
|
align-items: flex-start;
|
|
26
32
|
gap: 0.5rem;
|
|
@@ -29,17 +35,17 @@
|
|
|
29
35
|
font-size: 1rem;
|
|
30
36
|
line-height: 1.5;
|
|
31
37
|
}
|
|
32
|
-
.
|
|
38
|
+
._checkbox_19qga_8 ._required-asterisk_19qga_37 {
|
|
33
39
|
margin-inline-start: 0.25rem;
|
|
34
40
|
color: var(--foreground-color-danger, #e13212);
|
|
35
41
|
}
|
|
36
|
-
.
|
|
42
|
+
._checkbox_19qga_8 ._focus-label_19qga_41 {
|
|
37
43
|
border-radius: 0.75rem;
|
|
38
44
|
outline: 0 solid var(--focus-ring-color, #0265DC);
|
|
39
45
|
outline-offset: 2px;
|
|
40
46
|
transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1), outline 200ms cubic-bezier(0, 0, 0.4, 1);
|
|
41
47
|
}
|
|
42
|
-
.
|
|
48
|
+
._checkbox_19qga_8 ._icon-wrapper_19qga_47 {
|
|
43
49
|
display: inline-flex;
|
|
44
50
|
border-radius: 0.3125rem;
|
|
45
51
|
background-color: transparent;
|
|
@@ -47,7 +53,7 @@
|
|
|
47
53
|
position: relative;
|
|
48
54
|
outline: 0 solid var(--focus-ring-color, #0265DC);
|
|
49
55
|
}
|
|
50
|
-
.
|
|
56
|
+
._checkbox_19qga_8 ._icon-wrapper_19qga_47::before {
|
|
51
57
|
position: absolute;
|
|
52
58
|
width: 100%;
|
|
53
59
|
height: 100%;
|
|
@@ -62,7 +68,7 @@
|
|
|
62
68
|
pointer-events: none;
|
|
63
69
|
border-radius: inherit;
|
|
64
70
|
}
|
|
65
|
-
.
|
|
71
|
+
._checkbox_19qga_8 input {
|
|
66
72
|
border: 0;
|
|
67
73
|
clip: rect(0, 0, 0, 0);
|
|
68
74
|
height: 1px;
|
|
@@ -74,128 +80,128 @@
|
|
|
74
80
|
white-space: nowrap;
|
|
75
81
|
width: 1px;
|
|
76
82
|
}
|
|
77
|
-
._helper-
|
|
83
|
+
._helper-wrapper_19qga_80 {
|
|
78
84
|
margin-inline-start: 2rem;
|
|
79
85
|
}
|
|
80
86
|
}
|
|
81
87
|
@layer state {
|
|
82
|
-
.
|
|
83
|
-
.
|
|
84
|
-
.
|
|
88
|
+
._checkbox_19qga_8 ._icon-indeterminate_19qga_85,
|
|
89
|
+
._checkbox_19qga_8 ._icon-unchecked_19qga_86,
|
|
90
|
+
._checkbox_19qga_8 ._icon-checked_19qga_87 {
|
|
85
91
|
border-radius: 0.1875rem;
|
|
86
92
|
}
|
|
87
|
-
.
|
|
88
|
-
.
|
|
93
|
+
._checkbox_19qga_8 ._icon-checked_19qga_87,
|
|
94
|
+
._checkbox_19qga_8 ._icon-indeterminate_19qga_85 {
|
|
89
95
|
color: var(--checkbox-checked-fill-color-default, #0265DC);
|
|
90
96
|
display: none;
|
|
91
97
|
}
|
|
92
|
-
.
|
|
93
|
-
.
|
|
98
|
+
._checkbox_19qga_8 ._icon-checked_19qga_87:hover,
|
|
99
|
+
._checkbox_19qga_8 ._icon-indeterminate_19qga_85:hover {
|
|
94
100
|
color: var(--checkbox-checked-fill-color-hover, rgba(0, 75, 160, 0.8196078431));
|
|
95
101
|
}
|
|
96
|
-
.
|
|
97
|
-
.
|
|
102
|
+
._checkbox_19qga_8 ._icon-checked_19qga_87:active,
|
|
103
|
+
._checkbox_19qga_8 ._icon-indeterminate_19qga_85:active {
|
|
98
104
|
color: var(--checkbox-checked-fill-color-active, rgba(1, 81, 175, 0.7215686275));
|
|
99
105
|
}
|
|
100
|
-
.
|
|
106
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-wrapper_19qga_47 {
|
|
101
107
|
outline-color: var(--focus-ring-color-danger, #e13212);
|
|
102
108
|
}
|
|
103
|
-
.
|
|
104
|
-
.
|
|
105
|
-
.
|
|
109
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-indeterminate_19qga_85,
|
|
110
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-unchecked_19qga_86,
|
|
111
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-checked_19qga_87 {
|
|
106
112
|
color: var(--checkbox-checked-error-fill-color-default, #e13212);
|
|
107
113
|
}
|
|
108
|
-
.
|
|
109
|
-
.
|
|
110
|
-
.
|
|
114
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-indeterminate_19qga_85:hover,
|
|
115
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-unchecked_19qga_86:hover,
|
|
116
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-checked_19qga_87:hover {
|
|
111
117
|
color: var(--checkbox-checked-error-fill-color-hover, #bf2a00);
|
|
112
118
|
}
|
|
113
|
-
.
|
|
114
|
-
.
|
|
115
|
-
.
|
|
119
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-indeterminate_19qga_85:active,
|
|
120
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-unchecked_19qga_86:active,
|
|
121
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-checked_19qga_87:active {
|
|
116
122
|
color: var(--checkbox-checked-error-fill-color-active, #bf2a00);
|
|
117
123
|
}
|
|
118
|
-
.
|
|
119
|
-
.
|
|
124
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-checked_19qga_87,
|
|
125
|
+
._checkbox_19qga_8._error_19qga_103 ._icon-indeterminate_19qga_85 {
|
|
120
126
|
display: none;
|
|
121
127
|
}
|
|
122
|
-
.
|
|
128
|
+
._checkbox_19qga_8:hover {
|
|
123
129
|
cursor: pointer;
|
|
124
130
|
}
|
|
125
|
-
.
|
|
131
|
+
._checkbox_19qga_8:hover:has(input:not(:disabled)) ._icon-wrapper_19qga_47 {
|
|
126
132
|
background-color: var(--checkbox-unchecked-background-color-hover, rgba(20, 20, 20, 0.0784313725));
|
|
127
133
|
}
|
|
128
|
-
.
|
|
134
|
+
._checkbox_19qga_8:hover:has(input:not(:disabled):checked) ._icon-wrapper_19qga_47 {
|
|
129
135
|
background-color: var(--checkbox-checked-background-color-hover, rgba(2, 101, 220, 0.0784313725));
|
|
130
136
|
}
|
|
131
|
-
.
|
|
137
|
+
._checkbox_19qga_8 input[data-interactive=hover]:not(:disabled) ~ ._icon-wrapper_19qga_47 {
|
|
132
138
|
background-color: var(--checkbox-unchecked-background-color-hover, rgba(20, 20, 20, 0.0784313725));
|
|
133
139
|
}
|
|
134
|
-
.
|
|
140
|
+
._checkbox_19qga_8 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_19qga_47 {
|
|
135
141
|
background-color: var(--checkbox-checked-background-color-hover, rgba(2, 101, 220, 0.0784313725));
|
|
136
142
|
}
|
|
137
|
-
.
|
|
138
|
-
.
|
|
143
|
+
._checkbox_19qga_8 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_19qga_47 ._icon-checked_19qga_87,
|
|
144
|
+
._checkbox_19qga_8 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_19qga_47 ._icon-indeterminate_19qga_85 {
|
|
139
145
|
color: var(--checkbox-checked-fill-color-hover, rgba(0, 75, 160, 0.8196078431));
|
|
140
146
|
}
|
|
141
|
-
.
|
|
147
|
+
._checkbox_19qga_8._error_19qga_103:hover {
|
|
142
148
|
cursor: pointer;
|
|
143
149
|
}
|
|
144
|
-
.
|
|
150
|
+
._checkbox_19qga_8._error_19qga_103:hover:has(input:not(:disabled)) ._icon-wrapper_19qga_47 {
|
|
145
151
|
background-color: var(--checkbox-unchecked-error-background-color-hover, rgba(225, 50, 18, 0.0588235294));
|
|
146
152
|
}
|
|
147
|
-
.
|
|
153
|
+
._checkbox_19qga_8._error_19qga_103:hover:has(input:not(:disabled):checked) ._icon-wrapper_19qga_47 {
|
|
148
154
|
background-color: var(--checkbox-checked-error-background-color-hover, rgba(225, 50, 18, 0.0588235294));
|
|
149
155
|
}
|
|
150
|
-
.
|
|
156
|
+
._checkbox_19qga_8._error_19qga_103 input[data-interactive=hover]:not(:disabled) ~ ._icon-wrapper_19qga_47 {
|
|
151
157
|
background-color: var(--checkbox-unchecked-error-background-color-hover, rgba(225, 50, 18, 0.0588235294));
|
|
152
158
|
}
|
|
153
|
-
.
|
|
159
|
+
._checkbox_19qga_8._error_19qga_103 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_19qga_47 {
|
|
154
160
|
background-color: var(--checkbox-checked-error-background-color-hover, rgba(225, 50, 18, 0.0588235294));
|
|
155
161
|
}
|
|
156
|
-
.
|
|
157
|
-
.
|
|
162
|
+
._checkbox_19qga_8._error_19qga_103 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_19qga_47 ._icon-checked_19qga_87,
|
|
163
|
+
._checkbox_19qga_8._error_19qga_103 input[data-interactive=hover]:not(:disabled):checked ~ ._icon-wrapper_19qga_47 ._icon-indeterminate_19qga_85 {
|
|
158
164
|
color: var(--checkbox-checked-error-fill-color-hover, #bf2a00);
|
|
159
165
|
}
|
|
160
|
-
.
|
|
161
|
-
.
|
|
166
|
+
._checkbox_19qga_8 input:focus-visible ~ ._icon-wrapper_19qga_47,
|
|
167
|
+
._checkbox_19qga_8 input:focus-visible ~ ._focus-label_19qga_41 {
|
|
162
168
|
outline-width: 0.125rem;
|
|
163
169
|
}
|
|
164
|
-
.
|
|
165
|
-
.
|
|
170
|
+
._checkbox_19qga_8 input[data-interactive=focus-visible]:not(:disabled) ~ ._icon-wrapper_19qga_47,
|
|
171
|
+
._checkbox_19qga_8 input[data-interactive=focus-visible]:not(:disabled) ~ ._focus-label_19qga_41 {
|
|
166
172
|
outline-width: 0.125rem;
|
|
167
173
|
}
|
|
168
|
-
.
|
|
174
|
+
._checkbox_19qga_8 input:checked ~ ._icon-wrapper_19qga_47 ._icon-unchecked_19qga_86 {
|
|
169
175
|
display: none;
|
|
170
176
|
}
|
|
171
|
-
.
|
|
177
|
+
._checkbox_19qga_8 input:checked ~ ._icon-wrapper_19qga_47 ._icon-checked_19qga_87 {
|
|
172
178
|
display: inline-flex;
|
|
173
179
|
}
|
|
174
|
-
.
|
|
180
|
+
._checkbox_19qga_8 input:checked:focus-visible ~ ._icon-wrapper_19qga_47, ._checkbox_19qga_8 input:checked:focus-visible ~ ._focus-label_19qga_41 {
|
|
175
181
|
outline-width: 0.125rem;
|
|
176
182
|
}
|
|
177
|
-
.
|
|
183
|
+
._checkbox_19qga_8 input[aria-checked=mixed] ~ ._icon-wrapper_19qga_47 ._icon-checked_19qga_87, ._checkbox_19qga_8 input[aria-checked=mixed] ~ ._icon-wrapper_19qga_47 ._icon-unchecked_19qga_86 {
|
|
178
184
|
display: none;
|
|
179
185
|
}
|
|
180
|
-
.
|
|
186
|
+
._checkbox_19qga_8 input[aria-checked=mixed] ~ ._icon-wrapper_19qga_47 ._icon-indeterminate_19qga_85 {
|
|
181
187
|
display: inline-flex;
|
|
182
188
|
}
|
|
183
|
-
.
|
|
189
|
+
._checkbox_19qga_8:has(input[disabled]) {
|
|
184
190
|
opacity: 0.6;
|
|
185
191
|
filter: grayscale(1);
|
|
186
192
|
}
|
|
187
|
-
.
|
|
188
|
-
.
|
|
189
|
-
.
|
|
193
|
+
._checkbox_19qga_8:has(input[disabled]) ._icon-indeterminate_19qga_85,
|
|
194
|
+
._checkbox_19qga_8:has(input[disabled]) ._icon-unchecked_19qga_86,
|
|
195
|
+
._checkbox_19qga_8:has(input[disabled]) ._icon-checked_19qga_87 {
|
|
190
196
|
color: var(--foreground-color-subdued, #737475);
|
|
191
197
|
}
|
|
192
|
-
.
|
|
198
|
+
._checkbox_19qga_8:has(input[disabled]):hover {
|
|
193
199
|
cursor: not-allowed;
|
|
194
200
|
}
|
|
195
|
-
.
|
|
201
|
+
._checkbox_19qga_8:has(input[disabled]):hover ._icon-wrapper_19qga_47 {
|
|
196
202
|
box-shadow: none;
|
|
197
203
|
}
|
|
198
|
-
._sr-
|
|
204
|
+
._sr-only_19qga_201 {
|
|
199
205
|
border: 0;
|
|
200
206
|
clip: rect(0, 0, 0, 0);
|
|
201
207
|
height: 1px;
|
|
@@ -209,19 +215,19 @@
|
|
|
209
215
|
}
|
|
210
216
|
}
|
|
211
217
|
@layer application {
|
|
212
|
-
._checkbox-
|
|
218
|
+
._checkbox-group_19qga_215 ._label_19qga_215._direction-row_19qga_215 {
|
|
213
219
|
min-height: 1.5rem;
|
|
214
220
|
justify-content: center;
|
|
215
221
|
}
|
|
216
222
|
@media (prefers-reduced-motion: reduce) {
|
|
217
|
-
.
|
|
223
|
+
._checkbox_19qga_8 ._icon-wrapper_19qga_47 {
|
|
218
224
|
transition-duration: 0.01ms !important;
|
|
219
225
|
transition-property: outline;
|
|
220
226
|
}
|
|
221
227
|
}
|
|
222
228
|
}
|
|
223
229
|
@layer reset {
|
|
224
|
-
._checkbox-
|
|
230
|
+
._checkbox-group_19qga_215 {
|
|
225
231
|
all: unset;
|
|
226
232
|
font-family: var(--font-family-base, "Nunito Sans", sans-serif);
|
|
227
233
|
font-size: 100%;
|
|
@@ -236,12 +242,12 @@
|
|
|
236
242
|
}
|
|
237
243
|
}
|
|
238
244
|
@layer base {
|
|
239
|
-
._checkbox-
|
|
245
|
+
._checkbox-group_19qga_215 {
|
|
240
246
|
display: inline-flex;
|
|
241
247
|
gap: 0.5rem;
|
|
242
248
|
flex-direction: column;
|
|
243
249
|
}
|
|
244
|
-
._checkbox-
|
|
250
|
+
._checkbox-group_19qga_215 ._legend_19qga_247 {
|
|
245
251
|
border: 0;
|
|
246
252
|
clip: rect(0, 0, 0, 0);
|
|
247
253
|
height: 1px;
|
|
@@ -253,7 +259,7 @@
|
|
|
253
259
|
white-space: nowrap;
|
|
254
260
|
width: 1px;
|
|
255
261
|
}
|
|
256
|
-
._checkbox-
|
|
262
|
+
._checkbox-group_19qga_215 ._children_19qga_259 {
|
|
257
263
|
display: inline-flex;
|
|
258
264
|
gap: 0.5rem;
|
|
259
265
|
flex-direction: column;
|
|
@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
|
|
|
5
5
|
import { c as cx } from './index-tZvMCc77.js';
|
|
6
6
|
import { B as ButtonCompound } from './ButtonCompound-BF2Q6gGX.js';
|
|
7
7
|
|
|
8
|
-
import './
|
|
8
|
+
import './index.css';const SvgDragIndicator = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));
|
|
9
9
|
|
|
10
10
|
const handle = "_handle_z85jk_2";
|
|
11
11
|
const active = "_active_z85jk_24";
|
|
@@ -103,4 +103,4 @@ const Dnd = {
|
|
|
103
103
|
};
|
|
104
104
|
|
|
105
105
|
export { Dnd as D, DndSortLine as a, DndHandleButton as b, DndHandle as c, styles as s };
|
|
106
|
-
//# sourceMappingURL=index-
|
|
106
|
+
//# sourceMappingURL=index-V5Ez2gq_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-CqdP5W00.js","sources":["../../hammer-icon/mdi/round/drag_indicator.svg","../src/components/Dnd/DndHandle.tsx","../src/components/Dnd/DndHandleButton.tsx","../src/components/Dnd/DndSortLine.tsx","../src/components/Dnd/DndZone.tsx","../src/components/Dnd/index.ts"],"sourcesContent":["import * as React from \"react\";\nconst SvgDragIndicator = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" }));\nexport default SvgDragIndicator;\n","import { Icon } from \"../Icon\";\nimport DragIndicator from \"@servicetitan/hammer-icon/mdi/round/drag_indicator.svg\";\nimport styles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\n\n/**\n * Props for the DndHandle component\n */\nexport type DndHandleProps = {\n /**\n * Additional CSS class names to apply to the drag handle.\n */\n className?: string;\n};\n\n/**\n * A reusable drag handle icon component for drag and drop interactions.\n *\n * Features:\n * - Standardized drag indicator icon\n * - Accessible with proper ARIA attributes\n * - Customizable styling through className prop\n * - Consistent visual appearance across applications\n * - Lightweight and performant\n * - Supports all standard HTML element props\n *\n * @example\n * <DndHandle className=\"custom-drag-handle\" />\n */\nexport function DndHandle({ className }: { className?: string }) {\n const handleClasses = cx(styles.handle, className);\n return (\n <Icon svg={DragIndicator} className={handleClasses} role=\"presentation\" />\n );\n}\n","import { ButtonCompound } from \"../ButtonCompound\";\nimport handleStyles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\nimport { forwardRef } from \"react\";\nimport { DndHandle } from \"./DndHandle\";\n\n/**\n * Props for the DndHandleButton component\n * @extends React.ComponentPropsWithoutRef<typeof ButtonCompound>\n */\nexport interface DndHandleButtonProps\n extends React.ComponentPropsWithoutRef<typeof ButtonCompound> {\n /**\n * Indicates whether the handle is currently being dragged.\n * @default false\n */\n isActive?: boolean;\n}\n\n/**\n * A reusable drag handle button component for drag and drop functionality.\n *\n * Features:\n * - Interactive button with drag handle icon\n * - Visual feedback for active drag state\n * - Accessible with proper ARIA attributes\n * - Extends ButtonCompound functionality\n * - Customizable styling through className prop\n * - Supports all standard button props\n * - Consistent visual appearance across applications\n *\n * @example\n * <DndHandleButton\n * isActive={isDragging}\n * className=\"custom-handle-button\"\n * onClick={handleClick}\n * />\n */\nexport const DndHandleButton = forwardRef<\n HTMLButtonElement,\n DndHandleButtonProps\n>(({ isActive = false, className, ...props }, ref) => {\n const handleButtonClasses = cx(className, handleStyles[\"handle-button\"], {\n [handleStyles[\"active\"]]: isActive,\n });\n\n return (\n <ButtonCompound\n ref={ref}\n className={handleButtonClasses}\n type=\"button\"\n shape=\"rounded\"\n {...props}\n >\n <DndHandle />\n </ButtonCompound>\n );\n});\n\nDndHandleButton.displayName = \"DndHandleButton\";\n","import cx from \"classnames\";\n\nimport styles from \"./Dnd.module.scss\";\nimport { CSSProperties } from \"react\";\n\n/**\n * Props for the DndSortLine component\n * @extends React.ComponentPropsWithoutRef<\"div\">\n */\nexport type SortLineProps = React.ComponentPropsWithoutRef<\"div\"> & {\n /**\n * The offset of the line from the item. This is a CSS value, typically negative.\n */\n offset: string;\n /**\n * The orientation of the sort - Note this may be counterintuitive, as the line is rendered perpendicular to the sort.\n */\n orientation: \"horizontal\" | \"vertical\";\n /**\n * The position of the line relative to a target item.\n */\n position: \"before\" | \"after\";\n};\n\n/**\n * A visual indicator line that shows where an item will be dropped during drag and drop operations.\n *\n * Features:\n * - Visual feedback for drop positioning\n * - Configurable orientation (horizontal/vertical)\n * - Adjustable positioning (before/after)\n * - Customizable offset for precise placement\n * - Accessible with proper ARIA attributes\n * - Automatic CSS class management\n * - Supports all standard HTML div props\n *\n * @example\n * <DndSortLine\n * offset=\"-10px\"\n * orientation=\"vertical\"\n * position=\"after\"\n * className=\"custom-drop-line\"\n * />\n */\nexport const DndSortLine = ({\n offset,\n orientation,\n position,\n ...rest\n}: SortLineProps) => {\n const classes = cx(\n styles[\"drop-line\"],\n styles[`orientation-${orientation}`],\n styles[`position-${position}`],\n );\n\n return (\n <div\n aria-hidden\n className={classes}\n style={{ \"--drop-line-offset\": offset } as CSSProperties}\n {...rest}\n />\n );\n};\n","import { ElementType, forwardRef, ReactNode } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dnd.module.scss\";\n\n/**\n * Props for the DndZone component\n * @extends Omit<React.ComponentPropsWithoutRef<T>, \"el\" | \"ref\">\n */\nexport type DndZoneProps<T extends ElementType = \"div\"> = {\n /**\n * The HTML element type to render. Can be any valid HTML element or React component.\n * @default \"div\"\n */\n el?: T;\n /**\n * The content to be rendered inside the drop zone.\n */\n children?: ReactNode;\n /**\n * Additional CSS class names to apply to the drop zone.\n */\n className?: string;\n /**\n * Indicates whether a draggable item is currently over this drop zone.\n */\n isOver: boolean;\n /**\n * Indicates whether the current drag operation is valid for this drop zone.\n */\n isValid: boolean;\n /**\n * Indicates whether any item is currently being dragged.\n */\n isDragging: boolean;\n} & Omit<React.ComponentPropsWithoutRef<T>, \"el\" | \"ref\">;\n\n/**\n * Base styling component for drop zones that handles visual states and styling.\n *\n * Features:\n * - Configurable HTML element rendering with the 'el' prop\n * - Visual feedback for drag states (over, valid, dragging)\n * - Automatic CSS class management based on drag state\n * - Supports all standard HTML element props\n * - Accessible with proper ARIA attributes\n * - Flexible styling through className prop\n * - Responsive design that adapts to container\n *\n * @example\n * <DndZone\n * isOver={isOver}\n * isValid={isValid}\n * isDragging={isDragging}\n * className=\"custom-drop-zone\"\n * >\n * Drop items here\n * </DndZone>\n */\nexport const DndZone = forwardRef<HTMLDivElement, DndZoneProps<ElementType>>(\n (\n {\n el: Component = \"div\" as ElementType,\n children,\n className,\n isDragging,\n isOver,\n isValid,\n ...rest\n },\n ref,\n ) => {\n const classes = cx(className, {\n [styles[\"drop-zone\"]]: true,\n [styles[\"over-valid\"]]: isDragging && isOver && isValid,\n [styles[\"over-invalid\"]]: isDragging && isOver && !isValid,\n [styles[\"active-not-over\"]]: isDragging && !isOver,\n });\n\n return (\n <Component ref={ref} className={classes} {...rest}>\n {children}\n </Component>\n );\n },\n);\n\nDndZone.displayName = \"DndZoneBase\";\n","import { DndHandle } from \"./DndHandle\";\nimport { DndHandleButton } from \"./DndHandleButton\";\nimport { DndSortLine } from \"./DndSortLine\";\nimport { DndZone } from \"./DndZone\";\n\nexport const Dnd = {\n Handle: DndHandle,\n HandleButton: DndHandleButton,\n SortLine: DndSortLine,\n Zone: DndZone,\n};\n"],"names":["styles","DragIndicator"],"mappings":";;;;;;;AACA,MAAM,gBAAgB,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,qSAAqS,EAAE,CAAC,CAAC;;;;;;;;;;AC4B/f,SAAA,SAAA,CAAU,EAAE,SAAA,EAAqC,EAAA;AAC/D,EAAA,MAAM,aAAgB,GAAA,EAAA,CAAGA,YAAO,CAAA,MAAA,EAAQ,SAAS,CAAA;AACjD,EAAA,2BACG,IAAK,EAAA,EAAA,GAAA,EAAKC,kBAAe,SAAW,EAAA,aAAA,EAAe,MAAK,cAAe,EAAA,CAAA;AAE5E;;ACIa,MAAA,eAAA,GAAkB,UAG7B,CAAA,CAAC,EAAE,QAAA,GAAW,OAAO,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACpD,EAAA,MAAM,mBAAsB,GAAA,EAAA,CAAG,SAAW,EAAA,YAAA,CAAa,eAAe,CAAG,EAAA;AAAA,IACvE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,GAC3B,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,mBAAA;AAAA,MACX,IAAK,EAAA,QAAA;AAAA,MACL,KAAM,EAAA,SAAA;AAAA,MACL,GAAG,KAAA;AAAA,MAEJ,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,GACb;AAEJ,CAAC;AAED,eAAA,CAAgB,WAAc,GAAA,iBAAA;;;;;;;;;;;;;;;;ACfvB,MAAM,cAAc,CAAC;AAAA,EAC1B,MAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,OAAU,GAAA,EAAA;AAAA,IACd,OAAO,WAAW,CAAA;AAAA,IAClB,MAAA,CAAO,CAAe,YAAA,EAAA,WAAW,CAAE,CAAA,CAAA;AAAA,IACnC,MAAA,CAAO,CAAY,SAAA,EAAA,QAAQ,CAAE,CAAA;AAAA,GAC/B;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,SAAW,EAAA,OAAA;AAAA,MACX,KAAA,EAAO,EAAE,oBAAA,EAAsB,MAAO,EAAA;AAAA,MACrC,GAAG;AAAA;AAAA,GACN;AAEJ;;ACLO,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CACE;AAAA,IACE,IAAI,SAAY,GAAA,KAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAU,GAAG,SAAW,EAAA;AAAA,MAC5B,CAAC,MAAA,CAAO,WAAW,CAAC,GAAG,IAAA;AAAA,MACvB,CAAC,MAAO,CAAA,YAAY,CAAC,GAAG,cAAc,MAAU,IAAA,OAAA;AAAA,MAChD,CAAC,MAAO,CAAA,cAAc,CAAC,GAAG,UAAA,IAAc,UAAU,CAAC,OAAA;AAAA,MACnD,CAAC,MAAO,CAAA,iBAAiB,CAAC,GAAG,cAAc,CAAC;AAAA,KAC7C,CAAA;AAED,IAAA,2BACG,SAAU,EAAA,EAAA,GAAA,EAAU,WAAW,OAAU,EAAA,GAAG,MAC1C,QACH,EAAA,CAAA;AAAA;AAGN,CAAA;AAEA,OAAA,CAAQ,WAAc,GAAA,aAAA;;AClFf,MAAM,GAAM,GAAA;AAAA,EACjB,MAAQ,EAAA,SAAA;AAAA,EACR,YAAc,EAAA,eAAA;AAAA,EACd,QAAU,EAAA,WAAA;AAAA,EACV,IAAM,EAAA;AACR;;;;"}
|
|
1
|
+
{"version":3,"file":"index-V5Ez2gq_.js","sources":["../../hammer-icon/mdi/round/drag_indicator.svg","../src/components/Dnd/DndHandle.tsx","../src/components/Dnd/DndHandleButton.tsx","../src/components/Dnd/DndSortLine.tsx","../src/components/Dnd/DndZone.tsx","../src/components/Dnd/index.ts"],"sourcesContent":["import * as React from \"react\";\nconst SvgDragIndicator = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" }));\nexport default SvgDragIndicator;\n","import { Icon } from \"../Icon\";\nimport DragIndicator from \"@servicetitan/hammer-icon/mdi/round/drag_indicator.svg\";\nimport styles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\n\n/**\n * Props for the DndHandle component\n */\nexport type DndHandleProps = {\n /**\n * Additional CSS class names to apply to the drag handle.\n */\n className?: string;\n};\n\n/**\n * A reusable drag handle icon component for drag and drop interactions.\n *\n * Features:\n * - Standardized drag indicator icon\n * - Accessible with proper ARIA attributes\n * - Customizable styling through className prop\n * - Consistent visual appearance across applications\n * - Lightweight and performant\n * - Supports all standard HTML element props\n *\n * @example\n * <DndHandle className=\"custom-drag-handle\" />\n */\nexport function DndHandle({ className }: { className?: string }) {\n const handleClasses = cx(styles.handle, className);\n return (\n <Icon svg={DragIndicator} className={handleClasses} role=\"presentation\" />\n );\n}\n","import { ButtonCompound } from \"../ButtonCompound\";\nimport handleStyles from \"./DndHandle.module.scss\";\nimport cx from \"classnames\";\nimport { forwardRef } from \"react\";\nimport { DndHandle } from \"./DndHandle\";\n\n/**\n * Props for the DndHandleButton component\n * @extends React.ComponentPropsWithoutRef<typeof ButtonCompound>\n */\nexport interface DndHandleButtonProps\n extends React.ComponentPropsWithoutRef<typeof ButtonCompound> {\n /**\n * Indicates whether the handle is currently being dragged.\n * @default false\n */\n isActive?: boolean;\n}\n\n/**\n * A reusable drag handle button component for drag and drop functionality.\n *\n * Features:\n * - Interactive button with drag handle icon\n * - Visual feedback for active drag state\n * - Accessible with proper ARIA attributes\n * - Extends ButtonCompound functionality\n * - Customizable styling through className prop\n * - Supports all standard button props\n * - Consistent visual appearance across applications\n *\n * @example\n * <DndHandleButton\n * isActive={isDragging}\n * className=\"custom-handle-button\"\n * onClick={handleClick}\n * />\n */\nexport const DndHandleButton = forwardRef<\n HTMLButtonElement,\n DndHandleButtonProps\n>(({ isActive = false, className, ...props }, ref) => {\n const handleButtonClasses = cx(className, handleStyles[\"handle-button\"], {\n [handleStyles[\"active\"]]: isActive,\n });\n\n return (\n <ButtonCompound\n ref={ref}\n className={handleButtonClasses}\n type=\"button\"\n shape=\"rounded\"\n {...props}\n >\n <DndHandle />\n </ButtonCompound>\n );\n});\n\nDndHandleButton.displayName = \"DndHandleButton\";\n","import cx from \"classnames\";\n\nimport styles from \"./Dnd.module.scss\";\nimport { CSSProperties } from \"react\";\n\n/**\n * Props for the DndSortLine component\n * @extends React.ComponentPropsWithoutRef<\"div\">\n */\nexport type SortLineProps = React.ComponentPropsWithoutRef<\"div\"> & {\n /**\n * The offset of the line from the item. This is a CSS value, typically negative.\n */\n offset: string;\n /**\n * The orientation of the sort - Note this may be counterintuitive, as the line is rendered perpendicular to the sort.\n */\n orientation: \"horizontal\" | \"vertical\";\n /**\n * The position of the line relative to a target item.\n */\n position: \"before\" | \"after\";\n};\n\n/**\n * A visual indicator line that shows where an item will be dropped during drag and drop operations.\n *\n * Features:\n * - Visual feedback for drop positioning\n * - Configurable orientation (horizontal/vertical)\n * - Adjustable positioning (before/after)\n * - Customizable offset for precise placement\n * - Accessible with proper ARIA attributes\n * - Automatic CSS class management\n * - Supports all standard HTML div props\n *\n * @example\n * <DndSortLine\n * offset=\"-10px\"\n * orientation=\"vertical\"\n * position=\"after\"\n * className=\"custom-drop-line\"\n * />\n */\nexport const DndSortLine = ({\n offset,\n orientation,\n position,\n ...rest\n}: SortLineProps) => {\n const classes = cx(\n styles[\"drop-line\"],\n styles[`orientation-${orientation}`],\n styles[`position-${position}`],\n );\n\n return (\n <div\n aria-hidden\n className={classes}\n style={{ \"--drop-line-offset\": offset } as CSSProperties}\n {...rest}\n />\n );\n};\n","import { ElementType, forwardRef, ReactNode } from \"react\";\nimport cx from \"classnames\";\n\nimport styles from \"./Dnd.module.scss\";\n\n/**\n * Props for the DndZone component\n * @extends Omit<React.ComponentPropsWithoutRef<T>, \"el\" | \"ref\">\n */\nexport type DndZoneProps<T extends ElementType = \"div\"> = {\n /**\n * The HTML element type to render. Can be any valid HTML element or React component.\n * @default \"div\"\n */\n el?: T;\n /**\n * The content to be rendered inside the drop zone.\n */\n children?: ReactNode;\n /**\n * Additional CSS class names to apply to the drop zone.\n */\n className?: string;\n /**\n * Indicates whether a draggable item is currently over this drop zone.\n */\n isOver: boolean;\n /**\n * Indicates whether the current drag operation is valid for this drop zone.\n */\n isValid: boolean;\n /**\n * Indicates whether any item is currently being dragged.\n */\n isDragging: boolean;\n} & Omit<React.ComponentPropsWithoutRef<T>, \"el\" | \"ref\">;\n\n/**\n * Base styling component for drop zones that handles visual states and styling.\n *\n * Features:\n * - Configurable HTML element rendering with the 'el' prop\n * - Visual feedback for drag states (over, valid, dragging)\n * - Automatic CSS class management based on drag state\n * - Supports all standard HTML element props\n * - Accessible with proper ARIA attributes\n * - Flexible styling through className prop\n * - Responsive design that adapts to container\n *\n * @example\n * <DndZone\n * isOver={isOver}\n * isValid={isValid}\n * isDragging={isDragging}\n * className=\"custom-drop-zone\"\n * >\n * Drop items here\n * </DndZone>\n */\nexport const DndZone = forwardRef<HTMLDivElement, DndZoneProps<ElementType>>(\n (\n {\n el: Component = \"div\" as ElementType,\n children,\n className,\n isDragging,\n isOver,\n isValid,\n ...rest\n },\n ref,\n ) => {\n const classes = cx(className, {\n [styles[\"drop-zone\"]]: true,\n [styles[\"over-valid\"]]: isDragging && isOver && isValid,\n [styles[\"over-invalid\"]]: isDragging && isOver && !isValid,\n [styles[\"active-not-over\"]]: isDragging && !isOver,\n });\n\n return (\n <Component ref={ref} className={classes} {...rest}>\n {children}\n </Component>\n );\n },\n);\n\nDndZone.displayName = \"DndZoneBase\";\n","import { DndHandle } from \"./DndHandle\";\nimport { DndHandleButton } from \"./DndHandleButton\";\nimport { DndSortLine } from \"./DndSortLine\";\nimport { DndZone } from \"./DndZone\";\n\nexport const Dnd = {\n Handle: DndHandle,\n HandleButton: DndHandleButton,\n SortLine: DndSortLine,\n Zone: DndZone,\n};\n"],"names":["styles","DragIndicator"],"mappings":"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"}
|