@compa11y/react 0.1.2 → 0.1.3
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/chunk-36S2JYVF.cjs +1 -0
- package/dist/chunk-AJ7JSWUT.cjs +1 -0
- package/dist/chunk-DDFEION3.cjs +1 -0
- package/dist/chunk-DWU3PTJO.cjs +1 -0
- package/dist/chunk-FD4F6ONU.cjs +1 -0
- package/dist/chunk-FOVHQAY5.cjs +1 -0
- package/dist/chunk-GITBIGD4.js +1 -0
- package/dist/chunk-HEA4NAOM.js +1 -0
- package/dist/chunk-IZ7LLPPV.js +1 -0
- package/dist/chunk-JS3UD7KS.cjs +1 -0
- package/dist/chunk-MAR6RBHF.cjs +1 -0
- package/dist/chunk-MD4AVTLT.js +1 -0
- package/dist/chunk-SB6ASQ36.js +1 -0
- package/dist/chunk-VMM4K2K4.js +1 -0
- package/dist/chunk-XEJXACWE.js +1 -0
- package/dist/chunk-ZB3SYGHE.js +1 -0
- package/dist/components/combobox/index.cjs +1 -31
- package/dist/components/combobox/index.js +1 -6
- package/dist/components/dialog/index.cjs +1 -46
- package/dist/components/dialog/index.js +1 -5
- package/dist/components/menu/index.cjs +1 -46
- package/dist/components/menu/index.js +1 -5
- package/dist/components/tabs/index.cjs +1 -35
- package/dist/components/tabs/index.js +1 -6
- package/dist/components/toast/index.cjs +1 -24
- package/dist/components/toast/index.js +1 -3
- package/dist/index.cjs +1 -3714
- package/dist/index.js +1 -3408
- package/package.json +2 -2
- package/dist/chunk-2S4C6FGA.js +0 -380
- package/dist/chunk-2S4C6FGA.js.map +0 -1
- package/dist/chunk-52J4Z3QD.cjs +0 -45
- package/dist/chunk-52J4Z3QD.cjs.map +0 -1
- package/dist/chunk-C7QK2I7H.js +0 -373
- package/dist/chunk-C7QK2I7H.js.map +0 -1
- package/dist/chunk-D2UMS62N.cjs +0 -245
- package/dist/chunk-D2UMS62N.cjs.map +0 -1
- package/dist/chunk-E265U2RK.js +0 -234
- package/dist/chunk-E265U2RK.js.map +0 -1
- package/dist/chunk-E4XJRXWM.js +0 -215
- package/dist/chunk-E4XJRXWM.js.map +0 -1
- package/dist/chunk-GDLOJH6K.cjs +0 -110
- package/dist/chunk-GDLOJH6K.cjs.map +0 -1
- package/dist/chunk-IR46CNNY.cjs +0 -329
- package/dist/chunk-IR46CNNY.cjs.map +0 -1
- package/dist/chunk-JXYOE7SH.js +0 -103
- package/dist/chunk-JXYOE7SH.js.map +0 -1
- package/dist/chunk-O3YYQZ5O.js +0 -317
- package/dist/chunk-O3YYQZ5O.js.map +0 -1
- package/dist/chunk-OIVTOU4Z.cjs +0 -386
- package/dist/chunk-OIVTOU4Z.cjs.map +0 -1
- package/dist/chunk-OND5B7UG.js +0 -85
- package/dist/chunk-OND5B7UG.js.map +0 -1
- package/dist/chunk-R4FR6M6I.cjs +0 -383
- package/dist/chunk-R4FR6M6I.cjs.map +0 -1
- package/dist/chunk-RBDQCIS7.cjs +0 -89
- package/dist/chunk-RBDQCIS7.cjs.map +0 -1
- package/dist/chunk-SOBS7MIH.cjs +0 -220
- package/dist/chunk-SOBS7MIH.cjs.map +0 -1
- package/dist/chunk-WURPAE3R.js +0 -41
- package/dist/chunk-WURPAE3R.js.map +0 -1
- package/dist/components/combobox/index.cjs.map +0 -1
- package/dist/components/combobox/index.js.map +0 -1
- package/dist/components/dialog/index.cjs.map +0 -1
- package/dist/components/dialog/index.js.map +0 -1
- package/dist/components/menu/index.cjs.map +0 -1
- package/dist/components/menu/index.js.map +0 -1
- package/dist/components/tabs/index.cjs.map +0 -1
- package/dist/components/tabs/index.js.map +0 -1
- package/dist/components/toast/index.cjs.map +0 -1
- package/dist/components/toast/index.js.map +0 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,3714 +1 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkIR46CNNY_cjs = require('./chunk-IR46CNNY.cjs');
|
|
4
|
-
var chunkR4FR6M6I_cjs = require('./chunk-R4FR6M6I.cjs');
|
|
5
|
-
var chunkD2UMS62N_cjs = require('./chunk-D2UMS62N.cjs');
|
|
6
|
-
var chunkSOBS7MIH_cjs = require('./chunk-SOBS7MIH.cjs');
|
|
7
|
-
var chunkOIVTOU4Z_cjs = require('./chunk-OIVTOU4Z.cjs');
|
|
8
|
-
var chunkRBDQCIS7_cjs = require('./chunk-RBDQCIS7.cjs');
|
|
9
|
-
var chunkGDLOJH6K_cjs = require('./chunk-GDLOJH6K.cjs');
|
|
10
|
-
var chunk52J4Z3QD_cjs = require('./chunk-52J4Z3QD.cjs');
|
|
11
|
-
var react = require('react');
|
|
12
|
-
var core = require('@compa11y/core');
|
|
13
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
14
|
-
|
|
15
|
-
function useFocusVisible() {
|
|
16
|
-
const [isFocusVisible, setIsFocusVisible] = react.useState(false);
|
|
17
|
-
react.useEffect(() => {
|
|
18
|
-
const cleanup = core.initFocusVisible();
|
|
19
|
-
return cleanup;
|
|
20
|
-
}, []);
|
|
21
|
-
const handleFocus = react.useCallback(() => {
|
|
22
|
-
setIsFocusVisible(core.isFocusVisible());
|
|
23
|
-
}, []);
|
|
24
|
-
const handleBlur = react.useCallback(() => {
|
|
25
|
-
setIsFocusVisible(false);
|
|
26
|
-
}, []);
|
|
27
|
-
return {
|
|
28
|
-
isFocusVisible,
|
|
29
|
-
focusProps: {
|
|
30
|
-
onFocus: handleFocus,
|
|
31
|
-
onBlur: handleBlur
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
function useFocusManager(options = {}) {
|
|
36
|
-
const {
|
|
37
|
-
autoFocus = false,
|
|
38
|
-
restoreFocus = false,
|
|
39
|
-
focusVisible = true
|
|
40
|
-
} = options;
|
|
41
|
-
const elementRef = react.useCallback(
|
|
42
|
-
(node) => {
|
|
43
|
-
if (node && autoFocus) {
|
|
44
|
-
requestAnimationFrame(() => {
|
|
45
|
-
if (focusVisible) {
|
|
46
|
-
core.focusWithVisibleRing(node);
|
|
47
|
-
} else {
|
|
48
|
-
node.focus();
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
[autoFocus, focusVisible]
|
|
54
|
-
);
|
|
55
|
-
react.useEffect(() => {
|
|
56
|
-
if (!restoreFocus) return;
|
|
57
|
-
const previousElement = document.activeElement;
|
|
58
|
-
return () => {
|
|
59
|
-
if (previousElement && previousElement.focus) {
|
|
60
|
-
previousElement.focus();
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
}, [restoreFocus]);
|
|
64
|
-
return elementRef;
|
|
65
|
-
}
|
|
66
|
-
function useFocusControl() {
|
|
67
|
-
const elementRef = react.useCallback((_node) => {
|
|
68
|
-
}, []);
|
|
69
|
-
const focus = react.useCallback((options) => {
|
|
70
|
-
const element = elementRef;
|
|
71
|
-
if (element.current) {
|
|
72
|
-
if (options?.visible) {
|
|
73
|
-
core.focusWithVisibleRing(element.current);
|
|
74
|
-
} else {
|
|
75
|
-
element.current.focus();
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}, []);
|
|
79
|
-
return { ref: elementRef, focus };
|
|
80
|
-
}
|
|
81
|
-
function useFocusWithin() {
|
|
82
|
-
const [hasFocus, setHasFocus] = react.useState(false);
|
|
83
|
-
const containerRef = react.useCallback((_node) => {
|
|
84
|
-
}, []);
|
|
85
|
-
const handleFocusIn = react.useCallback(() => {
|
|
86
|
-
setHasFocus(true);
|
|
87
|
-
}, []);
|
|
88
|
-
const handleFocusOut = react.useCallback((event) => {
|
|
89
|
-
const container = event.currentTarget;
|
|
90
|
-
const relatedTarget = event.relatedTarget;
|
|
91
|
-
if (!relatedTarget || !container.contains(relatedTarget)) {
|
|
92
|
-
setHasFocus(false);
|
|
93
|
-
}
|
|
94
|
-
}, []);
|
|
95
|
-
return {
|
|
96
|
-
ref: containerRef,
|
|
97
|
-
hasFocus,
|
|
98
|
-
focusWithinProps: {
|
|
99
|
-
onFocus: handleFocusIn,
|
|
100
|
-
onBlur: handleFocusOut
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
function useRovingTabindex(options) {
|
|
105
|
-
const {
|
|
106
|
-
itemCount,
|
|
107
|
-
initialIndex = 0,
|
|
108
|
-
wrap = true,
|
|
109
|
-
orientation = "both",
|
|
110
|
-
onChange
|
|
111
|
-
} = options;
|
|
112
|
-
const [activeIndex, setActiveIndex] = react.useState(initialIndex);
|
|
113
|
-
const itemRefs = react.useRef([]);
|
|
114
|
-
react.useEffect(() => {
|
|
115
|
-
if (activeIndex >= itemCount) {
|
|
116
|
-
setActiveIndex(Math.max(0, itemCount - 1));
|
|
117
|
-
}
|
|
118
|
-
}, [itemCount, activeIndex]);
|
|
119
|
-
const moveTo = react.useCallback(
|
|
120
|
-
(index) => {
|
|
121
|
-
let newIndex = index;
|
|
122
|
-
if (newIndex < 0) {
|
|
123
|
-
newIndex = wrap ? itemCount - 1 : 0;
|
|
124
|
-
} else if (newIndex >= itemCount) {
|
|
125
|
-
newIndex = wrap ? 0 : itemCount - 1;
|
|
126
|
-
}
|
|
127
|
-
setActiveIndex(newIndex);
|
|
128
|
-
onChange?.(newIndex);
|
|
129
|
-
const element = itemRefs.current[newIndex];
|
|
130
|
-
element?.focus();
|
|
131
|
-
},
|
|
132
|
-
[itemCount, wrap, onChange]
|
|
133
|
-
);
|
|
134
|
-
const handleKeyDown = react.useCallback(
|
|
135
|
-
(event, index) => {
|
|
136
|
-
let handled = false;
|
|
137
|
-
switch (event.key) {
|
|
138
|
-
case "ArrowRight":
|
|
139
|
-
if (orientation === "horizontal" || orientation === "both") {
|
|
140
|
-
moveTo(index + 1);
|
|
141
|
-
handled = true;
|
|
142
|
-
}
|
|
143
|
-
break;
|
|
144
|
-
case "ArrowLeft":
|
|
145
|
-
if (orientation === "horizontal" || orientation === "both") {
|
|
146
|
-
moveTo(index - 1);
|
|
147
|
-
handled = true;
|
|
148
|
-
}
|
|
149
|
-
break;
|
|
150
|
-
case "ArrowDown":
|
|
151
|
-
if (orientation === "vertical" || orientation === "both") {
|
|
152
|
-
moveTo(index + 1);
|
|
153
|
-
handled = true;
|
|
154
|
-
}
|
|
155
|
-
break;
|
|
156
|
-
case "ArrowUp":
|
|
157
|
-
if (orientation === "vertical" || orientation === "both") {
|
|
158
|
-
moveTo(index - 1);
|
|
159
|
-
handled = true;
|
|
160
|
-
}
|
|
161
|
-
break;
|
|
162
|
-
case "Home":
|
|
163
|
-
moveTo(0);
|
|
164
|
-
handled = true;
|
|
165
|
-
break;
|
|
166
|
-
case "End":
|
|
167
|
-
moveTo(itemCount - 1);
|
|
168
|
-
handled = true;
|
|
169
|
-
break;
|
|
170
|
-
}
|
|
171
|
-
if (handled) {
|
|
172
|
-
event.preventDefault();
|
|
173
|
-
event.stopPropagation();
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
[orientation, moveTo, itemCount]
|
|
177
|
-
);
|
|
178
|
-
const getItemProps = react.useCallback(
|
|
179
|
-
(index) => ({
|
|
180
|
-
ref: (el) => {
|
|
181
|
-
itemRefs.current[index] = el;
|
|
182
|
-
},
|
|
183
|
-
tabIndex: index === activeIndex ? 0 : -1,
|
|
184
|
-
onKeyDown: (event) => handleKeyDown(event, index),
|
|
185
|
-
onFocus: () => {
|
|
186
|
-
if (index !== activeIndex) {
|
|
187
|
-
setActiveIndex(index);
|
|
188
|
-
onChange?.(index);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}),
|
|
192
|
-
[activeIndex, handleKeyDown, onChange]
|
|
193
|
-
);
|
|
194
|
-
return {
|
|
195
|
-
activeIndex,
|
|
196
|
-
setActiveIndex: moveTo,
|
|
197
|
-
getItemProps,
|
|
198
|
-
first: () => moveTo(0),
|
|
199
|
-
last: () => moveTo(itemCount - 1),
|
|
200
|
-
next: () => moveTo(activeIndex + 1),
|
|
201
|
-
previous: () => moveTo(activeIndex - 1)
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
function useRovingTabindexMap(ids, options = {}) {
|
|
205
|
-
const roving = useRovingTabindex({
|
|
206
|
-
...options,
|
|
207
|
-
itemCount: ids.length
|
|
208
|
-
});
|
|
209
|
-
const getItemProps = react.useCallback(
|
|
210
|
-
(id) => {
|
|
211
|
-
const index = ids.indexOf(id);
|
|
212
|
-
if (index === -1) {
|
|
213
|
-
throw new Error(`Unknown item ID: ${id}`);
|
|
214
|
-
}
|
|
215
|
-
return roving.getItemProps(index);
|
|
216
|
-
},
|
|
217
|
-
[ids, roving]
|
|
218
|
-
);
|
|
219
|
-
const activeId = ids[roving.activeIndex];
|
|
220
|
-
return {
|
|
221
|
-
...roving,
|
|
222
|
-
activeId,
|
|
223
|
-
getItemProps,
|
|
224
|
-
setActiveId: (id) => {
|
|
225
|
-
const index = ids.indexOf(id);
|
|
226
|
-
if (index !== -1) {
|
|
227
|
-
roving.setActiveIndex(index);
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
};
|
|
231
|
-
}
|
|
232
|
-
var warnings = core.createComponentWarnings("Select");
|
|
233
|
-
var SelectContext = react.createContext(null);
|
|
234
|
-
function useSelectContext() {
|
|
235
|
-
const context = react.useContext(SelectContext);
|
|
236
|
-
if (!context) {
|
|
237
|
-
throw new Error(
|
|
238
|
-
"Select compound components must be used within a Select component"
|
|
239
|
-
);
|
|
240
|
-
}
|
|
241
|
-
return context;
|
|
242
|
-
}
|
|
243
|
-
function findNextEnabledIndex(options, currentIndex, direction) {
|
|
244
|
-
const length = options.length;
|
|
245
|
-
let index = currentIndex + direction;
|
|
246
|
-
if (index < 0) index = length - 1;
|
|
247
|
-
if (index >= length) index = 0;
|
|
248
|
-
const startIndex = index;
|
|
249
|
-
while (options[index]?.disabled) {
|
|
250
|
-
index += direction;
|
|
251
|
-
if (index < 0) index = length - 1;
|
|
252
|
-
if (index >= length) index = 0;
|
|
253
|
-
if (index === startIndex) return -1;
|
|
254
|
-
}
|
|
255
|
-
return index;
|
|
256
|
-
}
|
|
257
|
-
function findFirstEnabledIndex(options) {
|
|
258
|
-
return options.findIndex((o) => !o.disabled);
|
|
259
|
-
}
|
|
260
|
-
function findLastEnabledIndex(options) {
|
|
261
|
-
for (let i = options.length - 1; i >= 0; i--) {
|
|
262
|
-
if (!options[i]?.disabled) return i;
|
|
263
|
-
}
|
|
264
|
-
return -1;
|
|
265
|
-
}
|
|
266
|
-
function Select({
|
|
267
|
-
options,
|
|
268
|
-
value: controlledValue,
|
|
269
|
-
defaultValue,
|
|
270
|
-
onValueChange,
|
|
271
|
-
disabled = false,
|
|
272
|
-
placeholder = "Select an option...",
|
|
273
|
-
"aria-label": ariaLabel,
|
|
274
|
-
"aria-labelledby": ariaLabelledBy,
|
|
275
|
-
children
|
|
276
|
-
}) {
|
|
277
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(
|
|
278
|
-
defaultValue ?? null
|
|
279
|
-
);
|
|
280
|
-
const [isOpen, setIsOpen] = react.useState(false);
|
|
281
|
-
const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
|
|
282
|
-
const triggerRef = react.useRef(null);
|
|
283
|
-
const selectedValue = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
|
|
284
|
-
const triggerId = chunk52J4Z3QD_cjs.useId("select-trigger");
|
|
285
|
-
const listboxId = chunk52J4Z3QD_cjs.useId("select-listbox");
|
|
286
|
-
const baseOptionId = chunk52J4Z3QD_cjs.useId("select-option");
|
|
287
|
-
const setSelectedValue = react.useCallback(
|
|
288
|
-
(value) => {
|
|
289
|
-
if (controlledValue === void 0) {
|
|
290
|
-
setUncontrolledValue(value);
|
|
291
|
-
}
|
|
292
|
-
onValueChange?.(value);
|
|
293
|
-
},
|
|
294
|
-
[controlledValue, onValueChange]
|
|
295
|
-
);
|
|
296
|
-
const getOptionId = react.useCallback(
|
|
297
|
-
(index) => `${baseOptionId}-${index}`,
|
|
298
|
-
[baseOptionId]
|
|
299
|
-
);
|
|
300
|
-
const onSelect = react.useCallback(
|
|
301
|
-
(option) => {
|
|
302
|
-
setSelectedValue(option.value);
|
|
303
|
-
setIsOpen(false);
|
|
304
|
-
setHighlightedIndex(-1);
|
|
305
|
-
triggerRef.current?.focus();
|
|
306
|
-
},
|
|
307
|
-
[setSelectedValue]
|
|
308
|
-
);
|
|
309
|
-
react.useEffect(() => {
|
|
310
|
-
if (!ariaLabel && !ariaLabelledBy) {
|
|
311
|
-
warnings.warning(
|
|
312
|
-
"Select has no accessible label.",
|
|
313
|
-
"Add aria-label or aria-labelledby prop."
|
|
314
|
-
);
|
|
315
|
-
}
|
|
316
|
-
}, [ariaLabel, ariaLabelledBy]);
|
|
317
|
-
const contextValue = {
|
|
318
|
-
selectedValue,
|
|
319
|
-
setSelectedValue,
|
|
320
|
-
isOpen,
|
|
321
|
-
setIsOpen,
|
|
322
|
-
highlightedIndex,
|
|
323
|
-
setHighlightedIndex,
|
|
324
|
-
options,
|
|
325
|
-
triggerId,
|
|
326
|
-
listboxId,
|
|
327
|
-
getOptionId,
|
|
328
|
-
onSelect,
|
|
329
|
-
triggerRef,
|
|
330
|
-
placeholder,
|
|
331
|
-
disabled
|
|
332
|
-
};
|
|
333
|
-
return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-compa11y-select": true, "data-disabled": disabled || void 0, children }) });
|
|
334
|
-
}
|
|
335
|
-
var SelectTrigger = react.forwardRef(
|
|
336
|
-
function SelectTrigger2({ onKeyDown, onClick, onBlur, ...props }, forwardedRef) {
|
|
337
|
-
const {
|
|
338
|
-
selectedValue,
|
|
339
|
-
isOpen,
|
|
340
|
-
setIsOpen,
|
|
341
|
-
highlightedIndex,
|
|
342
|
-
setHighlightedIndex,
|
|
343
|
-
options,
|
|
344
|
-
triggerId,
|
|
345
|
-
listboxId,
|
|
346
|
-
getOptionId,
|
|
347
|
-
onSelect,
|
|
348
|
-
triggerRef,
|
|
349
|
-
placeholder,
|
|
350
|
-
disabled
|
|
351
|
-
} = useSelectContext();
|
|
352
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
353
|
-
const typeAheadProps = chunkGDLOJH6K_cjs.useTypeAhead(
|
|
354
|
-
options.map((o) => o.label),
|
|
355
|
-
(match) => {
|
|
356
|
-
const index = options.findIndex(
|
|
357
|
-
(o) => o.label === match && !o.disabled
|
|
358
|
-
);
|
|
359
|
-
if (index >= 0) {
|
|
360
|
-
if (!isOpen) {
|
|
361
|
-
setIsOpen(true);
|
|
362
|
-
}
|
|
363
|
-
setHighlightedIndex(index);
|
|
364
|
-
}
|
|
365
|
-
},
|
|
366
|
-
{ disabled }
|
|
367
|
-
);
|
|
368
|
-
const openAndHighlight = react.useCallback(
|
|
369
|
-
(preferLast = false) => {
|
|
370
|
-
setIsOpen(true);
|
|
371
|
-
const selectedIndex = options.findIndex(
|
|
372
|
-
(o) => o.value === selectedValue
|
|
373
|
-
);
|
|
374
|
-
if (selectedIndex >= 0) {
|
|
375
|
-
setHighlightedIndex(selectedIndex);
|
|
376
|
-
} else {
|
|
377
|
-
setHighlightedIndex(
|
|
378
|
-
preferLast ? findLastEnabledIndex(options) : findFirstEnabledIndex(options)
|
|
379
|
-
);
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
[options, selectedValue, setIsOpen, setHighlightedIndex]
|
|
383
|
-
);
|
|
384
|
-
const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
|
|
385
|
-
{
|
|
386
|
-
ArrowDown: () => {
|
|
387
|
-
if (!isOpen) {
|
|
388
|
-
openAndHighlight();
|
|
389
|
-
} else {
|
|
390
|
-
const next = findNextEnabledIndex(options, highlightedIndex, 1);
|
|
391
|
-
if (next >= 0) setHighlightedIndex(next);
|
|
392
|
-
}
|
|
393
|
-
},
|
|
394
|
-
ArrowUp: () => {
|
|
395
|
-
if (!isOpen) {
|
|
396
|
-
openAndHighlight(true);
|
|
397
|
-
} else {
|
|
398
|
-
const prev = findNextEnabledIndex(options, highlightedIndex, -1);
|
|
399
|
-
if (prev >= 0) setHighlightedIndex(prev);
|
|
400
|
-
}
|
|
401
|
-
},
|
|
402
|
-
Enter: () => {
|
|
403
|
-
if (isOpen && highlightedIndex >= 0) {
|
|
404
|
-
const option = options[highlightedIndex];
|
|
405
|
-
if (option && !option.disabled) {
|
|
406
|
-
onSelect(option);
|
|
407
|
-
announce2(`${option.label} selected`);
|
|
408
|
-
}
|
|
409
|
-
} else if (!isOpen) {
|
|
410
|
-
openAndHighlight();
|
|
411
|
-
}
|
|
412
|
-
},
|
|
413
|
-
" ": () => {
|
|
414
|
-
if (isOpen && highlightedIndex >= 0) {
|
|
415
|
-
const option = options[highlightedIndex];
|
|
416
|
-
if (option && !option.disabled) {
|
|
417
|
-
onSelect(option);
|
|
418
|
-
announce2(`${option.label} selected`);
|
|
419
|
-
}
|
|
420
|
-
} else if (!isOpen) {
|
|
421
|
-
openAndHighlight();
|
|
422
|
-
}
|
|
423
|
-
},
|
|
424
|
-
Escape: () => {
|
|
425
|
-
if (isOpen) {
|
|
426
|
-
setIsOpen(false);
|
|
427
|
-
setHighlightedIndex(-1);
|
|
428
|
-
}
|
|
429
|
-
},
|
|
430
|
-
Home: () => {
|
|
431
|
-
if (isOpen) {
|
|
432
|
-
setHighlightedIndex(findFirstEnabledIndex(options));
|
|
433
|
-
}
|
|
434
|
-
},
|
|
435
|
-
End: () => {
|
|
436
|
-
if (isOpen) {
|
|
437
|
-
setHighlightedIndex(findLastEnabledIndex(options));
|
|
438
|
-
}
|
|
439
|
-
},
|
|
440
|
-
Tab: () => {
|
|
441
|
-
if (isOpen) {
|
|
442
|
-
setIsOpen(false);
|
|
443
|
-
setHighlightedIndex(-1);
|
|
444
|
-
}
|
|
445
|
-
return false;
|
|
446
|
-
}
|
|
447
|
-
},
|
|
448
|
-
{ preventDefault: true, stopPropagation: false }
|
|
449
|
-
);
|
|
450
|
-
const handleKeyDown = (event) => {
|
|
451
|
-
onKeyDown?.(event);
|
|
452
|
-
if (!event.defaultPrevented) {
|
|
453
|
-
keyboardProps.onKeyDown(event);
|
|
454
|
-
}
|
|
455
|
-
if (!event.defaultPrevented) {
|
|
456
|
-
typeAheadProps.onKeyDown(event);
|
|
457
|
-
}
|
|
458
|
-
};
|
|
459
|
-
const handleClick = (event) => {
|
|
460
|
-
onClick?.(event);
|
|
461
|
-
if (!event.defaultPrevented && !disabled) {
|
|
462
|
-
if (isOpen) {
|
|
463
|
-
setIsOpen(false);
|
|
464
|
-
setHighlightedIndex(-1);
|
|
465
|
-
} else {
|
|
466
|
-
openAndHighlight();
|
|
467
|
-
}
|
|
468
|
-
}
|
|
469
|
-
};
|
|
470
|
-
const handleBlur = (event) => {
|
|
471
|
-
onBlur?.(event);
|
|
472
|
-
setTimeout(() => {
|
|
473
|
-
setIsOpen(false);
|
|
474
|
-
setHighlightedIndex(-1);
|
|
475
|
-
}, 150);
|
|
476
|
-
};
|
|
477
|
-
const activeDescendant = isOpen && highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0;
|
|
478
|
-
const selectedOption = options.find((o) => o.value === selectedValue);
|
|
479
|
-
const displayText = selectedOption?.label ?? placeholder;
|
|
480
|
-
const setRefs = react.useCallback(
|
|
481
|
-
(node) => {
|
|
482
|
-
triggerRef.current = node;
|
|
483
|
-
if (typeof forwardedRef === "function") {
|
|
484
|
-
forwardedRef(node);
|
|
485
|
-
} else if (forwardedRef) {
|
|
486
|
-
forwardedRef.current = node;
|
|
487
|
-
}
|
|
488
|
-
},
|
|
489
|
-
[forwardedRef, triggerRef]
|
|
490
|
-
);
|
|
491
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
492
|
-
"button",
|
|
493
|
-
{
|
|
494
|
-
ref: setRefs,
|
|
495
|
-
id: triggerId,
|
|
496
|
-
type: "button",
|
|
497
|
-
role: "combobox",
|
|
498
|
-
"aria-expanded": isOpen,
|
|
499
|
-
"aria-controls": listboxId,
|
|
500
|
-
"aria-haspopup": "listbox",
|
|
501
|
-
"aria-activedescendant": activeDescendant,
|
|
502
|
-
disabled,
|
|
503
|
-
onKeyDown: handleKeyDown,
|
|
504
|
-
onClick: handleClick,
|
|
505
|
-
onBlur: handleBlur,
|
|
506
|
-
"data-compa11y-select-trigger": true,
|
|
507
|
-
"data-placeholder": !selectedOption || void 0,
|
|
508
|
-
...props,
|
|
509
|
-
children: [
|
|
510
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { "data-compa11y-select-value": true, children: displayText }),
|
|
511
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-compa11y-select-chevron": true, children: "\u25BC" })
|
|
512
|
-
]
|
|
513
|
-
}
|
|
514
|
-
);
|
|
515
|
-
}
|
|
516
|
-
);
|
|
517
|
-
var SelectListbox = react.forwardRef(
|
|
518
|
-
function SelectListbox2({ children, style, ...props }, forwardedRef) {
|
|
519
|
-
const { isOpen, options, listboxId, triggerId } = useSelectContext();
|
|
520
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
521
|
-
const internalRef = react.useRef(null);
|
|
522
|
-
const [position, setPosition] = react.useState("bottom");
|
|
523
|
-
react.useEffect(() => {
|
|
524
|
-
if (isOpen) {
|
|
525
|
-
announce2(
|
|
526
|
-
`${options.length} option${options.length === 1 ? "" : "s"} available`
|
|
527
|
-
);
|
|
528
|
-
}
|
|
529
|
-
}, [isOpen, options.length, announce2]);
|
|
530
|
-
react.useLayoutEffect(() => {
|
|
531
|
-
if (isOpen && internalRef.current) {
|
|
532
|
-
const listbox = internalRef.current;
|
|
533
|
-
const rect = listbox.getBoundingClientRect();
|
|
534
|
-
const viewportHeight = window.innerHeight;
|
|
535
|
-
const spaceBelow = viewportHeight - rect.top;
|
|
536
|
-
const spaceAbove = rect.top;
|
|
537
|
-
const listboxHeight = Math.min(rect.height, 200);
|
|
538
|
-
if (spaceBelow < listboxHeight + 50 && spaceAbove > spaceBelow) {
|
|
539
|
-
setPosition("top");
|
|
540
|
-
} else {
|
|
541
|
-
setPosition("bottom");
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
|
-
}, [isOpen]);
|
|
545
|
-
const handleMouseDown = (event) => {
|
|
546
|
-
event.preventDefault();
|
|
547
|
-
};
|
|
548
|
-
const setRefs = react.useCallback(
|
|
549
|
-
(node) => {
|
|
550
|
-
internalRef.current = node;
|
|
551
|
-
if (typeof forwardedRef === "function") {
|
|
552
|
-
forwardedRef(node);
|
|
553
|
-
} else if (forwardedRef) {
|
|
554
|
-
forwardedRef.current = node;
|
|
555
|
-
}
|
|
556
|
-
},
|
|
557
|
-
[forwardedRef]
|
|
558
|
-
);
|
|
559
|
-
if (!isOpen) {
|
|
560
|
-
return null;
|
|
561
|
-
}
|
|
562
|
-
const positionStyle = position === "top" ? { bottom: "100%", top: "auto", marginBottom: "4px", marginTop: 0 } : {};
|
|
563
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
564
|
-
"ul",
|
|
565
|
-
{
|
|
566
|
-
ref: setRefs,
|
|
567
|
-
id: listboxId,
|
|
568
|
-
role: "listbox",
|
|
569
|
-
"aria-labelledby": triggerId,
|
|
570
|
-
style: { ...style, ...positionStyle },
|
|
571
|
-
onMouseDown: handleMouseDown,
|
|
572
|
-
"data-compa11y-select-listbox": true,
|
|
573
|
-
"data-position": position,
|
|
574
|
-
...props,
|
|
575
|
-
children: children ?? options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
576
|
-
SelectOptionItem,
|
|
577
|
-
{
|
|
578
|
-
option,
|
|
579
|
-
index
|
|
580
|
-
},
|
|
581
|
-
option.value
|
|
582
|
-
))
|
|
583
|
-
}
|
|
584
|
-
);
|
|
585
|
-
}
|
|
586
|
-
);
|
|
587
|
-
var SelectOptionItem = react.forwardRef(
|
|
588
|
-
function SelectOptionItem2({ option, index, onClick, onMouseEnter, ...props }, forwardedRef) {
|
|
589
|
-
const {
|
|
590
|
-
selectedValue,
|
|
591
|
-
highlightedIndex,
|
|
592
|
-
setHighlightedIndex,
|
|
593
|
-
getOptionId,
|
|
594
|
-
onSelect
|
|
595
|
-
} = useSelectContext();
|
|
596
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
597
|
-
const internalRef = react.useRef(null);
|
|
598
|
-
const isSelected = selectedValue === option.value;
|
|
599
|
-
const isHighlighted = highlightedIndex === index;
|
|
600
|
-
const optionId = getOptionId(index);
|
|
601
|
-
react.useEffect(() => {
|
|
602
|
-
if (isHighlighted && internalRef.current) {
|
|
603
|
-
internalRef.current.scrollIntoView({
|
|
604
|
-
block: "nearest",
|
|
605
|
-
behavior: "smooth"
|
|
606
|
-
});
|
|
607
|
-
}
|
|
608
|
-
}, [isHighlighted]);
|
|
609
|
-
const handleClick = (event) => {
|
|
610
|
-
onClick?.(event);
|
|
611
|
-
if (!event.defaultPrevented && !option.disabled) {
|
|
612
|
-
onSelect(option);
|
|
613
|
-
announce2(`${option.label} selected`);
|
|
614
|
-
}
|
|
615
|
-
};
|
|
616
|
-
const handleMouseEnter = (event) => {
|
|
617
|
-
onMouseEnter?.(event);
|
|
618
|
-
if (!option.disabled) {
|
|
619
|
-
setHighlightedIndex(index);
|
|
620
|
-
}
|
|
621
|
-
};
|
|
622
|
-
const setRefs = react.useCallback(
|
|
623
|
-
(node) => {
|
|
624
|
-
internalRef.current = node;
|
|
625
|
-
if (typeof forwardedRef === "function") {
|
|
626
|
-
forwardedRef(node);
|
|
627
|
-
} else if (forwardedRef) {
|
|
628
|
-
forwardedRef.current = node;
|
|
629
|
-
}
|
|
630
|
-
},
|
|
631
|
-
[forwardedRef]
|
|
632
|
-
);
|
|
633
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
634
|
-
"li",
|
|
635
|
-
{
|
|
636
|
-
ref: setRefs,
|
|
637
|
-
id: optionId,
|
|
638
|
-
role: "option",
|
|
639
|
-
"aria-selected": isSelected,
|
|
640
|
-
"aria-disabled": option.disabled,
|
|
641
|
-
"data-highlighted": isHighlighted,
|
|
642
|
-
"data-selected": isSelected,
|
|
643
|
-
"data-disabled": option.disabled,
|
|
644
|
-
onClick: handleClick,
|
|
645
|
-
onMouseEnter: handleMouseEnter,
|
|
646
|
-
"data-compa11y-select-option": true,
|
|
647
|
-
...props,
|
|
648
|
-
children: [
|
|
649
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { "data-compa11y-select-option-text": true, children: option.label }),
|
|
650
|
-
isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-compa11y-select-check": true, children: "\u2713" })
|
|
651
|
-
]
|
|
652
|
-
}
|
|
653
|
-
);
|
|
654
|
-
}
|
|
655
|
-
);
|
|
656
|
-
var SelectCompound = Object.assign(Select, {
|
|
657
|
-
Trigger: SelectTrigger,
|
|
658
|
-
Listbox: SelectListbox,
|
|
659
|
-
Option: SelectOptionItem
|
|
660
|
-
});
|
|
661
|
-
var warnings2 = core.createComponentWarnings("Checkbox");
|
|
662
|
-
var CheckmarkIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
663
|
-
"svg",
|
|
664
|
-
{
|
|
665
|
-
width: "12",
|
|
666
|
-
height: "12",
|
|
667
|
-
viewBox: "0 0 12 12",
|
|
668
|
-
fill: "none",
|
|
669
|
-
"aria-hidden": "true",
|
|
670
|
-
style: { display: "block" },
|
|
671
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
672
|
-
"path",
|
|
673
|
-
{
|
|
674
|
-
d: "M2.5 6L5 8.5L9.5 3.5",
|
|
675
|
-
stroke: "currentColor",
|
|
676
|
-
strokeWidth: "2",
|
|
677
|
-
strokeLinecap: "round",
|
|
678
|
-
strokeLinejoin: "round"
|
|
679
|
-
}
|
|
680
|
-
)
|
|
681
|
-
}
|
|
682
|
-
);
|
|
683
|
-
var IndeterminateIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
|
|
684
|
-
"svg",
|
|
685
|
-
{
|
|
686
|
-
width: "12",
|
|
687
|
-
height: "12",
|
|
688
|
-
viewBox: "0 0 12 12",
|
|
689
|
-
fill: "none",
|
|
690
|
-
"aria-hidden": "true",
|
|
691
|
-
style: { display: "block" },
|
|
692
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
693
|
-
"path",
|
|
694
|
-
{
|
|
695
|
-
d: "M3 6H9",
|
|
696
|
-
stroke: "currentColor",
|
|
697
|
-
strokeWidth: "2",
|
|
698
|
-
strokeLinecap: "round"
|
|
699
|
-
}
|
|
700
|
-
)
|
|
701
|
-
}
|
|
702
|
-
);
|
|
703
|
-
var CheckboxGroupContext = react.createContext(
|
|
704
|
-
null
|
|
705
|
-
);
|
|
706
|
-
function useCheckboxGroupContext() {
|
|
707
|
-
return react.useContext(CheckboxGroupContext);
|
|
708
|
-
}
|
|
709
|
-
var CheckboxGroup = react.forwardRef(
|
|
710
|
-
function CheckboxGroup2({
|
|
711
|
-
value: controlledValue,
|
|
712
|
-
defaultValue = [],
|
|
713
|
-
onValueChange,
|
|
714
|
-
disabled = false,
|
|
715
|
-
legend,
|
|
716
|
-
error,
|
|
717
|
-
orientation = "vertical",
|
|
718
|
-
name: providedName,
|
|
719
|
-
unstyled = false,
|
|
720
|
-
className = "",
|
|
721
|
-
children,
|
|
722
|
-
"aria-label": ariaLabel,
|
|
723
|
-
"aria-labelledby": ariaLabelledBy
|
|
724
|
-
}, ref) {
|
|
725
|
-
const generatedName = chunk52J4Z3QD_cjs.useId("checkbox-group");
|
|
726
|
-
const name = providedName || generatedName;
|
|
727
|
-
const errorId = chunk52J4Z3QD_cjs.useId("checkbox-group-error");
|
|
728
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
|
|
729
|
-
const isControlled = controlledValue !== void 0;
|
|
730
|
-
const value = isControlled ? controlledValue : uncontrolledValue;
|
|
731
|
-
react.useEffect(() => {
|
|
732
|
-
if (!legend && !ariaLabel && !ariaLabelledBy) {
|
|
733
|
-
warnings2.warning(
|
|
734
|
-
"CheckboxGroup has no accessible label. Screen readers need this to identify the group.",
|
|
735
|
-
'Add legend="...", aria-label="...", or aria-labelledby="..."'
|
|
736
|
-
);
|
|
737
|
-
}
|
|
738
|
-
}, [legend, ariaLabel, ariaLabelledBy]);
|
|
739
|
-
const handleCheckboxChange = react.useCallback(
|
|
740
|
-
(checkboxValue, checked) => {
|
|
741
|
-
const currentValue = isControlled ? controlledValue : uncontrolledValue;
|
|
742
|
-
const newValue = checked ? [...currentValue, checkboxValue] : currentValue.filter((v) => v !== checkboxValue);
|
|
743
|
-
if (!isControlled) {
|
|
744
|
-
setUncontrolledValue(newValue);
|
|
745
|
-
}
|
|
746
|
-
onValueChange?.(newValue);
|
|
747
|
-
},
|
|
748
|
-
[isControlled, controlledValue, uncontrolledValue, onValueChange]
|
|
749
|
-
);
|
|
750
|
-
const contextValue = {
|
|
751
|
-
name,
|
|
752
|
-
value,
|
|
753
|
-
disabled,
|
|
754
|
-
unstyled,
|
|
755
|
-
onCheckboxChange: handleCheckboxChange
|
|
756
|
-
};
|
|
757
|
-
const hasError = Boolean(error);
|
|
758
|
-
const fieldsetStyle = {
|
|
759
|
-
border: "none",
|
|
760
|
-
margin: 0,
|
|
761
|
-
padding: 0,
|
|
762
|
-
minWidth: 0
|
|
763
|
-
};
|
|
764
|
-
const legendStyle = unstyled ? { padding: 0, marginBottom: "0.5rem" } : {
|
|
765
|
-
padding: 0,
|
|
766
|
-
marginBottom: "0.5rem",
|
|
767
|
-
fontWeight: 600
|
|
768
|
-
};
|
|
769
|
-
const itemsStyle = {
|
|
770
|
-
display: "flex",
|
|
771
|
-
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
772
|
-
flexWrap: orientation === "horizontal" ? "wrap" : void 0,
|
|
773
|
-
gap: "var(--compa11y-checkbox-group-gap, 0.75rem)"
|
|
774
|
-
};
|
|
775
|
-
const errorStyle = unstyled ? { marginTop: "0.25rem" } : {
|
|
776
|
-
color: "var(--compa11y-checkbox-group-error-color, #ef4444)",
|
|
777
|
-
fontSize: "0.8125rem",
|
|
778
|
-
marginTop: "0.25rem"
|
|
779
|
-
};
|
|
780
|
-
return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
781
|
-
"fieldset",
|
|
782
|
-
{
|
|
783
|
-
ref,
|
|
784
|
-
className,
|
|
785
|
-
"aria-label": ariaLabel,
|
|
786
|
-
"aria-labelledby": ariaLabelledBy,
|
|
787
|
-
"aria-describedby": hasError ? errorId : void 0,
|
|
788
|
-
disabled,
|
|
789
|
-
"data-compa11y-checkbox-group": "",
|
|
790
|
-
"data-orientation": orientation,
|
|
791
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
792
|
-
style: fieldsetStyle,
|
|
793
|
-
children: [
|
|
794
|
-
legend && /* @__PURE__ */ jsxRuntime.jsx(
|
|
795
|
-
"legend",
|
|
796
|
-
{
|
|
797
|
-
"data-compa11y-checkbox-group-legend": "",
|
|
798
|
-
style: legendStyle,
|
|
799
|
-
children: legend
|
|
800
|
-
}
|
|
801
|
-
),
|
|
802
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: itemsStyle, children }),
|
|
803
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
804
|
-
"div",
|
|
805
|
-
{
|
|
806
|
-
id: errorId,
|
|
807
|
-
role: "alert",
|
|
808
|
-
"data-compa11y-checkbox-group-error": "",
|
|
809
|
-
style: errorStyle,
|
|
810
|
-
children: error
|
|
811
|
-
}
|
|
812
|
-
)
|
|
813
|
-
]
|
|
814
|
-
}
|
|
815
|
-
) });
|
|
816
|
-
}
|
|
817
|
-
);
|
|
818
|
-
CheckboxGroup.displayName = "CheckboxGroup";
|
|
819
|
-
var Checkbox = react.forwardRef(
|
|
820
|
-
function Checkbox2({
|
|
821
|
-
checked: controlledChecked,
|
|
822
|
-
defaultChecked = false,
|
|
823
|
-
onCheckedChange,
|
|
824
|
-
indeterminate = false,
|
|
825
|
-
label,
|
|
826
|
-
hint,
|
|
827
|
-
error,
|
|
828
|
-
disabled: localDisabled = false,
|
|
829
|
-
value,
|
|
830
|
-
required = false,
|
|
831
|
-
unstyled: localUnstyled,
|
|
832
|
-
className = "",
|
|
833
|
-
size = "md",
|
|
834
|
-
name: localName,
|
|
835
|
-
"aria-label": ariaLabel,
|
|
836
|
-
"aria-labelledby": ariaLabelledBy,
|
|
837
|
-
"aria-describedby": externalDescribedBy,
|
|
838
|
-
onClick,
|
|
839
|
-
onFocus,
|
|
840
|
-
onBlur,
|
|
841
|
-
...props
|
|
842
|
-
}, ref) {
|
|
843
|
-
const groupContext = useCheckboxGroupContext();
|
|
844
|
-
const id = chunk52J4Z3QD_cjs.useId("checkbox");
|
|
845
|
-
const fieldId = `${id}-input`;
|
|
846
|
-
const labelId = `${id}-label`;
|
|
847
|
-
const hintId = `${id}-hint`;
|
|
848
|
-
const errorId = `${id}-error`;
|
|
849
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
850
|
-
const { isFocusVisible, focusProps } = useFocusVisible();
|
|
851
|
-
const isInGroup = groupContext !== null;
|
|
852
|
-
const disabled = isInGroup ? groupContext.disabled || localDisabled : localDisabled;
|
|
853
|
-
const unstyled = localUnstyled ?? (isInGroup ? groupContext.unstyled : false);
|
|
854
|
-
const name = isInGroup ? groupContext.name : localName;
|
|
855
|
-
const [uncontrolledChecked, setUncontrolledChecked] = react.useState(defaultChecked);
|
|
856
|
-
const checked = isInGroup ? groupContext.value.includes(value || "") : controlledChecked !== void 0 ? controlledChecked : uncontrolledChecked;
|
|
857
|
-
const inputRef = react.useRef(null);
|
|
858
|
-
const mergedRef = react.useCallback(
|
|
859
|
-
(node) => {
|
|
860
|
-
inputRef.current = node;
|
|
861
|
-
if (typeof ref === "function") {
|
|
862
|
-
ref(node);
|
|
863
|
-
} else if (ref) {
|
|
864
|
-
ref.current = node;
|
|
865
|
-
}
|
|
866
|
-
},
|
|
867
|
-
[ref]
|
|
868
|
-
);
|
|
869
|
-
react.useEffect(() => {
|
|
870
|
-
if (inputRef.current) {
|
|
871
|
-
inputRef.current.indeterminate = indeterminate;
|
|
872
|
-
}
|
|
873
|
-
}, [indeterminate]);
|
|
874
|
-
react.useEffect(() => {
|
|
875
|
-
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
876
|
-
warnings2.warning(
|
|
877
|
-
"Checkbox has no accessible label. Screen readers need this to identify the checkbox.",
|
|
878
|
-
'Add label="...", aria-label="...", or aria-labelledby="..."'
|
|
879
|
-
);
|
|
880
|
-
}
|
|
881
|
-
}, [label, ariaLabel, ariaLabelledBy]);
|
|
882
|
-
const handleChange = react.useCallback(
|
|
883
|
-
(event) => {
|
|
884
|
-
const newChecked = event.target.checked;
|
|
885
|
-
if (isInGroup) {
|
|
886
|
-
groupContext.onCheckboxChange(value || "", newChecked);
|
|
887
|
-
} else {
|
|
888
|
-
if (controlledChecked === void 0) {
|
|
889
|
-
setUncontrolledChecked(newChecked);
|
|
890
|
-
}
|
|
891
|
-
onCheckedChange?.(newChecked);
|
|
892
|
-
}
|
|
893
|
-
const labelText = typeof label === "string" ? label : ariaLabel || "Checkbox";
|
|
894
|
-
announce2(`${labelText} ${newChecked ? "checked" : "unchecked"}`);
|
|
895
|
-
},
|
|
896
|
-
[
|
|
897
|
-
isInGroup,
|
|
898
|
-
groupContext,
|
|
899
|
-
value,
|
|
900
|
-
controlledChecked,
|
|
901
|
-
onCheckedChange,
|
|
902
|
-
label,
|
|
903
|
-
ariaLabel,
|
|
904
|
-
announce2
|
|
905
|
-
]
|
|
906
|
-
);
|
|
907
|
-
const handleFocus = react.useCallback(
|
|
908
|
-
(event) => {
|
|
909
|
-
focusProps.onFocus();
|
|
910
|
-
onFocus?.(event);
|
|
911
|
-
},
|
|
912
|
-
[focusProps, onFocus]
|
|
913
|
-
);
|
|
914
|
-
const handleBlur = react.useCallback(
|
|
915
|
-
(event) => {
|
|
916
|
-
focusProps.onBlur();
|
|
917
|
-
onBlur?.(event);
|
|
918
|
-
},
|
|
919
|
-
[focusProps, onBlur]
|
|
920
|
-
);
|
|
921
|
-
const hasLabel = Boolean(label);
|
|
922
|
-
const hasHint = Boolean(hint);
|
|
923
|
-
const hasError = Boolean(error);
|
|
924
|
-
const describedByParts = [];
|
|
925
|
-
if (externalDescribedBy) describedByParts.push(externalDescribedBy);
|
|
926
|
-
if (hasHint) describedByParts.push(hintId);
|
|
927
|
-
if (hasError) describedByParts.push(errorId);
|
|
928
|
-
const describedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
|
|
929
|
-
const sizes = {
|
|
930
|
-
sm: { box: 16 },
|
|
931
|
-
md: { box: 20 },
|
|
932
|
-
lg: { box: 24 }
|
|
933
|
-
};
|
|
934
|
-
const sizeConfig = sizes[size];
|
|
935
|
-
const wrapperStyle = {
|
|
936
|
-
display: "inline-flex",
|
|
937
|
-
alignItems: "flex-start",
|
|
938
|
-
gap: "0.5rem",
|
|
939
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
940
|
-
userSelect: "none",
|
|
941
|
-
...disabled && !unstyled ? { opacity: 0.5 } : {}
|
|
942
|
-
};
|
|
943
|
-
const controlStyle = {
|
|
944
|
-
position: "relative",
|
|
945
|
-
display: "inline-flex",
|
|
946
|
-
alignItems: "center",
|
|
947
|
-
justifyContent: "center",
|
|
948
|
-
flexShrink: 0
|
|
949
|
-
};
|
|
950
|
-
const hiddenInputStyle = {
|
|
951
|
-
position: "absolute",
|
|
952
|
-
opacity: 0,
|
|
953
|
-
width: "100%",
|
|
954
|
-
height: "100%",
|
|
955
|
-
margin: 0,
|
|
956
|
-
cursor: "inherit",
|
|
957
|
-
zIndex: 1
|
|
958
|
-
};
|
|
959
|
-
const indicatorStyle = unstyled ? {} : {
|
|
960
|
-
width: sizeConfig.box,
|
|
961
|
-
height: sizeConfig.box,
|
|
962
|
-
minWidth: 24,
|
|
963
|
-
minHeight: 24,
|
|
964
|
-
border: checked || indeterminate ? "var(--compa11y-checkbox-checked-border, 2px solid #0066cc)" : "var(--compa11y-checkbox-border, 2px solid #666)",
|
|
965
|
-
borderRadius: "var(--compa11y-checkbox-radius, 3px)",
|
|
966
|
-
background: checked || indeterminate ? "var(--compa11y-checkbox-checked-bg, #0066cc)" : "var(--compa11y-checkbox-bg, white)",
|
|
967
|
-
display: "flex",
|
|
968
|
-
alignItems: "center",
|
|
969
|
-
justifyContent: "center",
|
|
970
|
-
flexShrink: 0,
|
|
971
|
-
transition: "all 0.15s ease",
|
|
972
|
-
pointerEvents: "none",
|
|
973
|
-
color: "var(--compa11y-checkbox-check-color, white)",
|
|
974
|
-
...isFocusVisible ? {
|
|
975
|
-
outline: "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
976
|
-
outlineOffset: "2px"
|
|
977
|
-
} : {}
|
|
978
|
-
};
|
|
979
|
-
const contentStyle = {
|
|
980
|
-
display: "flex",
|
|
981
|
-
flexDirection: "column",
|
|
982
|
-
gap: "0.125rem",
|
|
983
|
-
paddingTop: "0.125rem"
|
|
984
|
-
};
|
|
985
|
-
const labelStyle = unstyled ? { cursor: "inherit" } : {
|
|
986
|
-
cursor: "inherit",
|
|
987
|
-
color: "var(--compa11y-checkbox-label-color, inherit)"
|
|
988
|
-
};
|
|
989
|
-
const hintStyle = unstyled ? {} : {
|
|
990
|
-
color: "var(--compa11y-checkbox-hint-color, #666)",
|
|
991
|
-
fontSize: "0.8125rem"
|
|
992
|
-
};
|
|
993
|
-
const errorStyles = unstyled ? {} : {
|
|
994
|
-
color: "var(--compa11y-checkbox-error-color, #ef4444)",
|
|
995
|
-
fontSize: "0.8125rem"
|
|
996
|
-
};
|
|
997
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
998
|
-
"div",
|
|
999
|
-
{
|
|
1000
|
-
className,
|
|
1001
|
-
"data-compa11y-checkbox": "",
|
|
1002
|
-
"data-checked": checked ? "true" : "false",
|
|
1003
|
-
"data-indeterminate": indeterminate ? "true" : void 0,
|
|
1004
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
1005
|
-
"data-size": size,
|
|
1006
|
-
style: wrapperStyle,
|
|
1007
|
-
children: [
|
|
1008
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: controlStyle, children: [
|
|
1009
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1010
|
-
"input",
|
|
1011
|
-
{
|
|
1012
|
-
ref: mergedRef,
|
|
1013
|
-
type: "checkbox",
|
|
1014
|
-
id: fieldId,
|
|
1015
|
-
name,
|
|
1016
|
-
value,
|
|
1017
|
-
checked,
|
|
1018
|
-
onChange: handleChange,
|
|
1019
|
-
onClick,
|
|
1020
|
-
onFocus: handleFocus,
|
|
1021
|
-
onBlur: handleBlur,
|
|
1022
|
-
disabled,
|
|
1023
|
-
required,
|
|
1024
|
-
"aria-required": required || void 0,
|
|
1025
|
-
"aria-invalid": hasError || void 0,
|
|
1026
|
-
"aria-label": !hasLabel && !ariaLabelledBy ? ariaLabel : void 0,
|
|
1027
|
-
"aria-labelledby": ariaLabelledBy || (hasLabel ? labelId : void 0),
|
|
1028
|
-
"aria-describedby": describedBy,
|
|
1029
|
-
"aria-checked": indeterminate ? "mixed" : checked,
|
|
1030
|
-
tabIndex: disabled ? -1 : 0,
|
|
1031
|
-
style: hiddenInputStyle,
|
|
1032
|
-
...props
|
|
1033
|
-
}
|
|
1034
|
-
),
|
|
1035
|
-
!unstyled && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1036
|
-
"div",
|
|
1037
|
-
{
|
|
1038
|
-
"data-compa11y-checkbox-indicator": "",
|
|
1039
|
-
"aria-hidden": "true",
|
|
1040
|
-
style: indicatorStyle,
|
|
1041
|
-
children: [
|
|
1042
|
-
checked && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx(CheckmarkIcon, {}),
|
|
1043
|
-
indeterminate && /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, {})
|
|
1044
|
-
]
|
|
1045
|
-
}
|
|
1046
|
-
)
|
|
1047
|
-
] }),
|
|
1048
|
-
(hasLabel || hasHint || hasError) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
|
|
1049
|
-
hasLabel && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1050
|
-
"label",
|
|
1051
|
-
{
|
|
1052
|
-
htmlFor: fieldId,
|
|
1053
|
-
id: labelId,
|
|
1054
|
-
"data-compa11y-checkbox-label": "",
|
|
1055
|
-
style: labelStyle,
|
|
1056
|
-
children: [
|
|
1057
|
-
label,
|
|
1058
|
-
required && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1059
|
-
"span",
|
|
1060
|
-
{
|
|
1061
|
-
"aria-hidden": "true",
|
|
1062
|
-
style: {
|
|
1063
|
-
color: "var(--compa11y-checkbox-required-color, #ef4444)",
|
|
1064
|
-
marginLeft: "0.125rem"
|
|
1065
|
-
},
|
|
1066
|
-
children: "*"
|
|
1067
|
-
}
|
|
1068
|
-
)
|
|
1069
|
-
]
|
|
1070
|
-
}
|
|
1071
|
-
),
|
|
1072
|
-
hasHint && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1073
|
-
"div",
|
|
1074
|
-
{
|
|
1075
|
-
id: hintId,
|
|
1076
|
-
"data-compa11y-checkbox-hint": "",
|
|
1077
|
-
style: hintStyle,
|
|
1078
|
-
children: hint
|
|
1079
|
-
}
|
|
1080
|
-
),
|
|
1081
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1082
|
-
"div",
|
|
1083
|
-
{
|
|
1084
|
-
id: errorId,
|
|
1085
|
-
role: "alert",
|
|
1086
|
-
"data-compa11y-checkbox-error": "",
|
|
1087
|
-
style: errorStyles,
|
|
1088
|
-
children: error
|
|
1089
|
-
}
|
|
1090
|
-
)
|
|
1091
|
-
] })
|
|
1092
|
-
]
|
|
1093
|
-
}
|
|
1094
|
-
);
|
|
1095
|
-
}
|
|
1096
|
-
);
|
|
1097
|
-
Checkbox.displayName = "Checkbox";
|
|
1098
|
-
var CheckboxIndicator = react.forwardRef(function CheckboxIndicator2({ children, className }, ref) {
|
|
1099
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1100
|
-
"div",
|
|
1101
|
-
{
|
|
1102
|
-
ref,
|
|
1103
|
-
className,
|
|
1104
|
-
"data-compa11y-checkbox-indicator": "",
|
|
1105
|
-
"aria-hidden": "true",
|
|
1106
|
-
children
|
|
1107
|
-
}
|
|
1108
|
-
);
|
|
1109
|
-
});
|
|
1110
|
-
CheckboxIndicator.displayName = "CheckboxIndicator";
|
|
1111
|
-
var CheckboxCompound = Object.assign(Checkbox, {
|
|
1112
|
-
Group: CheckboxGroup,
|
|
1113
|
-
Indicator: CheckboxIndicator
|
|
1114
|
-
});
|
|
1115
|
-
var warnings3 = core.createComponentWarnings("RadioGroup");
|
|
1116
|
-
var RadioGroupContext = react.createContext(null);
|
|
1117
|
-
function useRadioGroupContext() {
|
|
1118
|
-
const context = react.useContext(RadioGroupContext);
|
|
1119
|
-
if (!context) {
|
|
1120
|
-
throw new Error(
|
|
1121
|
-
"[Compa11y RadioGroup]: Radio must be used within a RadioGroup."
|
|
1122
|
-
);
|
|
1123
|
-
}
|
|
1124
|
-
return context;
|
|
1125
|
-
}
|
|
1126
|
-
var RadioGroup = react.forwardRef(
|
|
1127
|
-
function RadioGroup2({
|
|
1128
|
-
value: controlledValue,
|
|
1129
|
-
defaultValue,
|
|
1130
|
-
onValueChange,
|
|
1131
|
-
disabled = false,
|
|
1132
|
-
discoverable = true,
|
|
1133
|
-
required = false,
|
|
1134
|
-
orientation = "vertical",
|
|
1135
|
-
name: providedName,
|
|
1136
|
-
legend,
|
|
1137
|
-
hint,
|
|
1138
|
-
error,
|
|
1139
|
-
unstyled = false,
|
|
1140
|
-
className = "",
|
|
1141
|
-
children,
|
|
1142
|
-
"aria-label": ariaLabel,
|
|
1143
|
-
"aria-labelledby": ariaLabelledBy
|
|
1144
|
-
}, ref) {
|
|
1145
|
-
const generatedName = chunk52J4Z3QD_cjs.useId("radiogroup");
|
|
1146
|
-
const name = providedName || generatedName;
|
|
1147
|
-
const hintId = chunk52J4Z3QD_cjs.useId("radiogroup-hint");
|
|
1148
|
-
const errorId = chunk52J4Z3QD_cjs.useId("radiogroup-error");
|
|
1149
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(
|
|
1150
|
-
defaultValue ?? null
|
|
1151
|
-
);
|
|
1152
|
-
const isControlled = controlledValue !== void 0;
|
|
1153
|
-
const value = isControlled ? controlledValue : uncontrolledValue;
|
|
1154
|
-
const radiosRef = react.useRef(/* @__PURE__ */ new Map());
|
|
1155
|
-
react.useEffect(() => {
|
|
1156
|
-
if (!legend && !ariaLabel && !ariaLabelledBy) {
|
|
1157
|
-
warnings3.warning(
|
|
1158
|
-
"RadioGroup has no accessible label. Screen readers need this to identify the group.",
|
|
1159
|
-
'Add legend="...", aria-label="...", or aria-labelledby="..."'
|
|
1160
|
-
);
|
|
1161
|
-
}
|
|
1162
|
-
}, [legend, ariaLabel, ariaLabelledBy]);
|
|
1163
|
-
const handleValueChange = react.useCallback(
|
|
1164
|
-
(newValue) => {
|
|
1165
|
-
if (disabled) return;
|
|
1166
|
-
if (!isControlled) {
|
|
1167
|
-
setUncontrolledValue(newValue);
|
|
1168
|
-
}
|
|
1169
|
-
onValueChange?.(newValue);
|
|
1170
|
-
},
|
|
1171
|
-
[disabled, isControlled, onValueChange]
|
|
1172
|
-
);
|
|
1173
|
-
const registerRadio = react.useCallback(
|
|
1174
|
-
(radioValue, radioDisabled) => {
|
|
1175
|
-
radiosRef.current.set(radioValue, radioDisabled);
|
|
1176
|
-
},
|
|
1177
|
-
[]
|
|
1178
|
-
);
|
|
1179
|
-
const unregisterRadio = react.useCallback((radioValue) => {
|
|
1180
|
-
radiosRef.current.delete(radioValue);
|
|
1181
|
-
}, []);
|
|
1182
|
-
const updateRadioDisabled = react.useCallback(
|
|
1183
|
-
(radioValue, radioDisabled) => {
|
|
1184
|
-
radiosRef.current.set(radioValue, radioDisabled);
|
|
1185
|
-
},
|
|
1186
|
-
[]
|
|
1187
|
-
);
|
|
1188
|
-
const getEnabledRadioValues = react.useCallback(() => {
|
|
1189
|
-
const values = [];
|
|
1190
|
-
radiosRef.current.forEach((isDisabled, radioValue) => {
|
|
1191
|
-
if (!isDisabled && !disabled) {
|
|
1192
|
-
values.push(radioValue);
|
|
1193
|
-
}
|
|
1194
|
-
});
|
|
1195
|
-
return values;
|
|
1196
|
-
}, [disabled]);
|
|
1197
|
-
const internalRef = react.useRef(null);
|
|
1198
|
-
const groupRef = ref || internalRef;
|
|
1199
|
-
const navigateWithRef = react.useCallback(
|
|
1200
|
-
(direction) => {
|
|
1201
|
-
const enabledValues = getEnabledRadioValues();
|
|
1202
|
-
if (enabledValues.length === 0) return;
|
|
1203
|
-
const currentIndex = value ? enabledValues.indexOf(value) : -1;
|
|
1204
|
-
let nextIndex;
|
|
1205
|
-
switch (direction) {
|
|
1206
|
-
case "next":
|
|
1207
|
-
nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % enabledValues.length;
|
|
1208
|
-
break;
|
|
1209
|
-
case "prev":
|
|
1210
|
-
nextIndex = currentIndex < 0 ? enabledValues.length - 1 : (currentIndex - 1 + enabledValues.length) % enabledValues.length;
|
|
1211
|
-
break;
|
|
1212
|
-
case "first":
|
|
1213
|
-
nextIndex = 0;
|
|
1214
|
-
break;
|
|
1215
|
-
case "last":
|
|
1216
|
-
nextIndex = enabledValues.length - 1;
|
|
1217
|
-
break;
|
|
1218
|
-
}
|
|
1219
|
-
const nextValue = enabledValues[nextIndex];
|
|
1220
|
-
if (nextValue !== void 0) {
|
|
1221
|
-
handleValueChange(nextValue);
|
|
1222
|
-
const groupEl = typeof groupRef === "object" && groupRef ? groupRef.current : null;
|
|
1223
|
-
if (groupEl) {
|
|
1224
|
-
const input = groupEl.querySelector(
|
|
1225
|
-
`input[type="radio"][value="${CSS.escape(nextValue)}"]`
|
|
1226
|
-
);
|
|
1227
|
-
input?.focus();
|
|
1228
|
-
}
|
|
1229
|
-
}
|
|
1230
|
-
},
|
|
1231
|
-
[getEnabledRadioValues, value, handleValueChange, groupRef]
|
|
1232
|
-
);
|
|
1233
|
-
const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
|
|
1234
|
-
{
|
|
1235
|
-
ArrowDown: () => navigateWithRef("next"),
|
|
1236
|
-
ArrowRight: () => navigateWithRef("next"),
|
|
1237
|
-
ArrowUp: () => navigateWithRef("prev"),
|
|
1238
|
-
ArrowLeft: () => navigateWithRef("prev"),
|
|
1239
|
-
Home: () => navigateWithRef("first"),
|
|
1240
|
-
End: () => navigateWithRef("last")
|
|
1241
|
-
},
|
|
1242
|
-
{ preventDefault: true, stopPropagation: true, disabled }
|
|
1243
|
-
);
|
|
1244
|
-
const contextValue = {
|
|
1245
|
-
name,
|
|
1246
|
-
value: value ?? null,
|
|
1247
|
-
disabled,
|
|
1248
|
-
discoverable,
|
|
1249
|
-
required,
|
|
1250
|
-
unstyled,
|
|
1251
|
-
orientation,
|
|
1252
|
-
onValueChange: handleValueChange,
|
|
1253
|
-
registerRadio,
|
|
1254
|
-
unregisterRadio,
|
|
1255
|
-
updateRadioDisabled
|
|
1256
|
-
};
|
|
1257
|
-
const describedByParts = [];
|
|
1258
|
-
if (hint) describedByParts.push(hintId);
|
|
1259
|
-
if (error) describedByParts.push(errorId);
|
|
1260
|
-
const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
|
|
1261
|
-
const groupContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1262
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1263
|
-
"div",
|
|
1264
|
-
{
|
|
1265
|
-
style: unstyled ? {
|
|
1266
|
-
display: "flex",
|
|
1267
|
-
flexDirection: orientation === "horizontal" ? "row" : "column"
|
|
1268
|
-
} : {
|
|
1269
|
-
display: "flex",
|
|
1270
|
-
flexDirection: orientation === "horizontal" ? "row" : "column",
|
|
1271
|
-
gap: "var(--compa11y-radio-gap, 0.75rem)"
|
|
1272
|
-
},
|
|
1273
|
-
children
|
|
1274
|
-
}
|
|
1275
|
-
),
|
|
1276
|
-
hint && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1277
|
-
"div",
|
|
1278
|
-
{
|
|
1279
|
-
id: hintId,
|
|
1280
|
-
style: unstyled ? {} : {
|
|
1281
|
-
color: "var(--compa11y-radio-group-hint-color, #666)",
|
|
1282
|
-
fontSize: "0.8125rem",
|
|
1283
|
-
marginTop: "0.25rem"
|
|
1284
|
-
},
|
|
1285
|
-
children: hint
|
|
1286
|
-
}
|
|
1287
|
-
),
|
|
1288
|
-
error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1289
|
-
"div",
|
|
1290
|
-
{
|
|
1291
|
-
id: errorId,
|
|
1292
|
-
role: "alert",
|
|
1293
|
-
style: unstyled ? {} : {
|
|
1294
|
-
color: "var(--compa11y-radio-group-error-color, #ef4444)",
|
|
1295
|
-
fontSize: "0.8125rem",
|
|
1296
|
-
marginTop: "0.25rem"
|
|
1297
|
-
},
|
|
1298
|
-
children: error
|
|
1299
|
-
}
|
|
1300
|
-
)
|
|
1301
|
-
] });
|
|
1302
|
-
if (legend) {
|
|
1303
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1304
|
-
"fieldset",
|
|
1305
|
-
{
|
|
1306
|
-
ref: groupRef,
|
|
1307
|
-
role: "radiogroup",
|
|
1308
|
-
"aria-label": ariaLabel,
|
|
1309
|
-
"aria-labelledby": ariaLabelledBy,
|
|
1310
|
-
"aria-orientation": orientation,
|
|
1311
|
-
"aria-required": required || void 0,
|
|
1312
|
-
"aria-disabled": disabled || void 0,
|
|
1313
|
-
"aria-invalid": error ? true : void 0,
|
|
1314
|
-
"aria-describedby": ariaDescribedBy,
|
|
1315
|
-
className: `compa11y-radiogroup ${className}`.trim(),
|
|
1316
|
-
"data-compa11y-radiogroup": "",
|
|
1317
|
-
"data-orientation": orientation,
|
|
1318
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
1319
|
-
"data-error": error ? "true" : void 0,
|
|
1320
|
-
onKeyDown: keyboardProps.onKeyDown,
|
|
1321
|
-
style: unstyled ? { border: "none", margin: 0, padding: 0, minWidth: 0 } : {
|
|
1322
|
-
border: "none",
|
|
1323
|
-
margin: 0,
|
|
1324
|
-
padding: 0,
|
|
1325
|
-
minWidth: 0
|
|
1326
|
-
},
|
|
1327
|
-
children: [
|
|
1328
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1329
|
-
"legend",
|
|
1330
|
-
{
|
|
1331
|
-
style: unstyled ? {} : {
|
|
1332
|
-
padding: 0,
|
|
1333
|
-
marginBottom: "var(--compa11y-radio-group-legend-gap, 0.5rem)",
|
|
1334
|
-
fontWeight: "var(--compa11y-radio-group-legend-weight, 600)",
|
|
1335
|
-
color: "var(--compa11y-radio-group-legend-color, inherit)",
|
|
1336
|
-
fontSize: "var(--compa11y-radio-group-legend-size, 1rem)"
|
|
1337
|
-
},
|
|
1338
|
-
children: [
|
|
1339
|
-
legend,
|
|
1340
|
-
required && !unstyled && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1341
|
-
"span",
|
|
1342
|
-
{
|
|
1343
|
-
"aria-hidden": "true",
|
|
1344
|
-
style: {
|
|
1345
|
-
color: "var(--compa11y-radio-group-required-color, #ef4444)",
|
|
1346
|
-
marginLeft: "0.125rem"
|
|
1347
|
-
},
|
|
1348
|
-
children: [
|
|
1349
|
-
" ",
|
|
1350
|
-
"*"
|
|
1351
|
-
]
|
|
1352
|
-
}
|
|
1353
|
-
)
|
|
1354
|
-
]
|
|
1355
|
-
}
|
|
1356
|
-
),
|
|
1357
|
-
groupContent
|
|
1358
|
-
]
|
|
1359
|
-
}
|
|
1360
|
-
) });
|
|
1361
|
-
}
|
|
1362
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1363
|
-
"div",
|
|
1364
|
-
{
|
|
1365
|
-
ref: groupRef,
|
|
1366
|
-
role: "radiogroup",
|
|
1367
|
-
"aria-label": ariaLabel,
|
|
1368
|
-
"aria-labelledby": ariaLabelledBy,
|
|
1369
|
-
"aria-orientation": orientation,
|
|
1370
|
-
"aria-required": required || void 0,
|
|
1371
|
-
"aria-disabled": disabled || void 0,
|
|
1372
|
-
"aria-invalid": error ? true : void 0,
|
|
1373
|
-
"aria-describedby": ariaDescribedBy,
|
|
1374
|
-
className: `compa11y-radiogroup ${className}`.trim(),
|
|
1375
|
-
"data-compa11y-radiogroup": "",
|
|
1376
|
-
"data-orientation": orientation,
|
|
1377
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
1378
|
-
"data-error": error ? "true" : void 0,
|
|
1379
|
-
onKeyDown: keyboardProps.onKeyDown,
|
|
1380
|
-
children: groupContent
|
|
1381
|
-
}
|
|
1382
|
-
) });
|
|
1383
|
-
}
|
|
1384
|
-
);
|
|
1385
|
-
RadioGroup.displayName = "RadioGroup";
|
|
1386
|
-
var Radio = react.forwardRef(
|
|
1387
|
-
function Radio2({
|
|
1388
|
-
value,
|
|
1389
|
-
disabled: localDisabled = false,
|
|
1390
|
-
discoverable: localDiscoverable,
|
|
1391
|
-
label,
|
|
1392
|
-
hint,
|
|
1393
|
-
unstyled: localUnstyled,
|
|
1394
|
-
className = "",
|
|
1395
|
-
children,
|
|
1396
|
-
"aria-label": ariaLabel
|
|
1397
|
-
}, ref) {
|
|
1398
|
-
const context = useRadioGroupContext();
|
|
1399
|
-
const generatedId = chunk52J4Z3QD_cjs.useId("radio");
|
|
1400
|
-
const hintId = chunk52J4Z3QD_cjs.useId("radio-hint");
|
|
1401
|
-
const disabled = context.disabled || localDisabled;
|
|
1402
|
-
const discoverable = localDiscoverable ?? context.discoverable;
|
|
1403
|
-
const unstyled = localUnstyled ?? context.unstyled;
|
|
1404
|
-
const checked = context.value === value;
|
|
1405
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
1406
|
-
const { isFocusVisible, focusProps } = useFocusVisible();
|
|
1407
|
-
const inputRef = react.useRef(null);
|
|
1408
|
-
const mergedRef = react.useCallback(
|
|
1409
|
-
(node) => {
|
|
1410
|
-
inputRef.current = node;
|
|
1411
|
-
if (typeof ref === "function") {
|
|
1412
|
-
ref(node);
|
|
1413
|
-
} else if (ref) {
|
|
1414
|
-
ref.current = node;
|
|
1415
|
-
}
|
|
1416
|
-
},
|
|
1417
|
-
[ref]
|
|
1418
|
-
);
|
|
1419
|
-
react.useEffect(() => {
|
|
1420
|
-
context.registerRadio(value, disabled);
|
|
1421
|
-
return () => context.unregisterRadio(value);
|
|
1422
|
-
}, [value]);
|
|
1423
|
-
react.useEffect(() => {
|
|
1424
|
-
context.updateRadioDisabled(value, disabled);
|
|
1425
|
-
}, [disabled, value]);
|
|
1426
|
-
const handleChange = react.useCallback(
|
|
1427
|
-
(event) => {
|
|
1428
|
-
if (disabled) {
|
|
1429
|
-
event.preventDefault();
|
|
1430
|
-
return;
|
|
1431
|
-
}
|
|
1432
|
-
context.onValueChange(value);
|
|
1433
|
-
const labelText = label || (typeof children === "string" ? children : null) || value;
|
|
1434
|
-
announce2(`${labelText} selected`, { politeness: "polite" });
|
|
1435
|
-
},
|
|
1436
|
-
[disabled, context, value, label, children, announce2]
|
|
1437
|
-
);
|
|
1438
|
-
const handleClick = react.useCallback(
|
|
1439
|
-
(event) => {
|
|
1440
|
-
if (disabled) {
|
|
1441
|
-
event.preventDefault();
|
|
1442
|
-
}
|
|
1443
|
-
},
|
|
1444
|
-
[disabled]
|
|
1445
|
-
);
|
|
1446
|
-
const handleFocus = react.useCallback(
|
|
1447
|
-
(_event) => {
|
|
1448
|
-
focusProps.onFocus();
|
|
1449
|
-
if (!checked && !disabled) {
|
|
1450
|
-
context.onValueChange(value);
|
|
1451
|
-
}
|
|
1452
|
-
},
|
|
1453
|
-
[focusProps, checked, disabled, context, value]
|
|
1454
|
-
);
|
|
1455
|
-
const handleBlur = react.useCallback(() => {
|
|
1456
|
-
focusProps.onBlur();
|
|
1457
|
-
}, [focusProps]);
|
|
1458
|
-
const hasLabel = Boolean(children || label);
|
|
1459
|
-
const labelContent = children || label;
|
|
1460
|
-
const labelId = `${generatedId}-label`;
|
|
1461
|
-
const hasHint = Boolean(hint);
|
|
1462
|
-
const isFirstEnabled = (() => {
|
|
1463
|
-
if (context.value !== null) return false;
|
|
1464
|
-
const entries = Array.from(
|
|
1465
|
-
inputRef.current?.closest('[role="radiogroup"]')?.querySelectorAll('input[type="radio"]') ?? []
|
|
1466
|
-
);
|
|
1467
|
-
for (const entry of entries) {
|
|
1468
|
-
const input = entry;
|
|
1469
|
-
if (!input.disabled && input.getAttribute("aria-disabled") !== "true") {
|
|
1470
|
-
return input.value === value;
|
|
1471
|
-
}
|
|
1472
|
-
}
|
|
1473
|
-
return false;
|
|
1474
|
-
})();
|
|
1475
|
-
const tabIndex = (() => {
|
|
1476
|
-
if (disabled && !discoverable) return -1;
|
|
1477
|
-
if (checked) return 0;
|
|
1478
|
-
if (context.value === null && isFirstEnabled) return 0;
|
|
1479
|
-
return -1;
|
|
1480
|
-
})();
|
|
1481
|
-
const useNativeDisabled = disabled && !discoverable;
|
|
1482
|
-
const ariaDescribedBy = hasHint ? hintId : void 0;
|
|
1483
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1484
|
-
"label",
|
|
1485
|
-
{
|
|
1486
|
-
htmlFor: generatedId,
|
|
1487
|
-
className: `compa11y-radio-wrapper ${className}`.trim(),
|
|
1488
|
-
"data-compa11y-radio": "",
|
|
1489
|
-
"data-value": value,
|
|
1490
|
-
"data-checked": checked ? "true" : "false",
|
|
1491
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
1492
|
-
style: unstyled ? {
|
|
1493
|
-
display: "inline-flex",
|
|
1494
|
-
alignItems: "flex-start",
|
|
1495
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
1496
|
-
gap: "0.5rem"
|
|
1497
|
-
} : {
|
|
1498
|
-
display: "inline-flex",
|
|
1499
|
-
alignItems: "flex-start",
|
|
1500
|
-
gap: "var(--compa11y-radio-gap, 0.5rem)",
|
|
1501
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
1502
|
-
userSelect: "none",
|
|
1503
|
-
opacity: disabled ? 0.5 : 1
|
|
1504
|
-
},
|
|
1505
|
-
children: [
|
|
1506
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1507
|
-
"div",
|
|
1508
|
-
{
|
|
1509
|
-
style: {
|
|
1510
|
-
position: "relative",
|
|
1511
|
-
display: "inline-flex",
|
|
1512
|
-
alignItems: "center",
|
|
1513
|
-
justifyContent: "center",
|
|
1514
|
-
flexShrink: 0
|
|
1515
|
-
},
|
|
1516
|
-
children: [
|
|
1517
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1518
|
-
"input",
|
|
1519
|
-
{
|
|
1520
|
-
ref: mergedRef,
|
|
1521
|
-
type: "radio",
|
|
1522
|
-
id: generatedId,
|
|
1523
|
-
name: context.name,
|
|
1524
|
-
value,
|
|
1525
|
-
checked,
|
|
1526
|
-
onChange: handleChange,
|
|
1527
|
-
onClick: handleClick,
|
|
1528
|
-
onFocus: handleFocus,
|
|
1529
|
-
onBlur: handleBlur,
|
|
1530
|
-
disabled: useNativeDisabled,
|
|
1531
|
-
tabIndex,
|
|
1532
|
-
"aria-disabled": disabled ? "true" : void 0,
|
|
1533
|
-
"aria-label": !hasLabel ? ariaLabel : void 0,
|
|
1534
|
-
"aria-labelledby": hasLabel ? labelId : void 0,
|
|
1535
|
-
"aria-describedby": ariaDescribedBy,
|
|
1536
|
-
required: context.required,
|
|
1537
|
-
className: "compa11y-radio-input",
|
|
1538
|
-
style: {
|
|
1539
|
-
position: "absolute",
|
|
1540
|
-
opacity: 0,
|
|
1541
|
-
width: "var(--compa11y-radio-size, 1.25rem)",
|
|
1542
|
-
height: "var(--compa11y-radio-size, 1.25rem)",
|
|
1543
|
-
margin: 0,
|
|
1544
|
-
cursor: disabled ? "not-allowed" : "pointer"
|
|
1545
|
-
}
|
|
1546
|
-
}
|
|
1547
|
-
),
|
|
1548
|
-
!unstyled && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1549
|
-
"div",
|
|
1550
|
-
{
|
|
1551
|
-
className: "compa11y-radio-circle",
|
|
1552
|
-
style: {
|
|
1553
|
-
width: "var(--compa11y-radio-size, 1.25rem)",
|
|
1554
|
-
height: "var(--compa11y-radio-size, 1.25rem)",
|
|
1555
|
-
minWidth: "24px",
|
|
1556
|
-
minHeight: "24px",
|
|
1557
|
-
border: checked ? "var(--compa11y-radio-checked-border, 2px solid #0066cc)" : "var(--compa11y-radio-border, 2px solid #666)",
|
|
1558
|
-
borderRadius: "50%",
|
|
1559
|
-
background: checked ? "var(--compa11y-radio-checked-bg, #0066cc)" : "var(--compa11y-radio-bg, white)",
|
|
1560
|
-
display: "flex",
|
|
1561
|
-
alignItems: "center",
|
|
1562
|
-
justifyContent: "center",
|
|
1563
|
-
flexShrink: 0,
|
|
1564
|
-
transition: "all 0.15s ease",
|
|
1565
|
-
pointerEvents: "none",
|
|
1566
|
-
...isFocusVisible ? {
|
|
1567
|
-
outline: "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
1568
|
-
outlineOffset: "2px"
|
|
1569
|
-
} : {}
|
|
1570
|
-
},
|
|
1571
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1572
|
-
"div",
|
|
1573
|
-
{
|
|
1574
|
-
"aria-hidden": "true",
|
|
1575
|
-
style: {
|
|
1576
|
-
width: "var(--compa11y-radio-dot-size, 0.5rem)",
|
|
1577
|
-
height: "var(--compa11y-radio-dot-size, 0.5rem)",
|
|
1578
|
-
borderRadius: "50%",
|
|
1579
|
-
background: "var(--compa11y-radio-dot-color, white)",
|
|
1580
|
-
opacity: checked ? 1 : 0,
|
|
1581
|
-
transform: checked ? "scale(1)" : "scale(0)",
|
|
1582
|
-
transition: "all 0.15s ease"
|
|
1583
|
-
}
|
|
1584
|
-
}
|
|
1585
|
-
)
|
|
1586
|
-
}
|
|
1587
|
-
)
|
|
1588
|
-
]
|
|
1589
|
-
}
|
|
1590
|
-
),
|
|
1591
|
-
(hasLabel || hasHint) && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1592
|
-
"div",
|
|
1593
|
-
{
|
|
1594
|
-
style: unstyled ? {} : {
|
|
1595
|
-
display: "flex",
|
|
1596
|
-
flexDirection: "column",
|
|
1597
|
-
gap: "0.125rem",
|
|
1598
|
-
paddingTop: "0.125rem"
|
|
1599
|
-
},
|
|
1600
|
-
children: [
|
|
1601
|
-
hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1602
|
-
"span",
|
|
1603
|
-
{
|
|
1604
|
-
id: labelId,
|
|
1605
|
-
className: "compa11y-radio-label",
|
|
1606
|
-
style: unstyled ? {} : {
|
|
1607
|
-
color: "var(--compa11y-radio-label-color, inherit)",
|
|
1608
|
-
fontSize: "var(--compa11y-radio-label-size, 1rem)"
|
|
1609
|
-
},
|
|
1610
|
-
children: labelContent
|
|
1611
|
-
}
|
|
1612
|
-
),
|
|
1613
|
-
hasHint && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1614
|
-
"span",
|
|
1615
|
-
{
|
|
1616
|
-
id: hintId,
|
|
1617
|
-
className: "compa11y-radio-hint",
|
|
1618
|
-
style: unstyled ? {} : {
|
|
1619
|
-
color: "var(--compa11y-radio-hint-color, #666)",
|
|
1620
|
-
fontSize: "var(--compa11y-radio-hint-size, 0.8125rem)"
|
|
1621
|
-
},
|
|
1622
|
-
children: hint
|
|
1623
|
-
}
|
|
1624
|
-
)
|
|
1625
|
-
]
|
|
1626
|
-
}
|
|
1627
|
-
)
|
|
1628
|
-
]
|
|
1629
|
-
}
|
|
1630
|
-
);
|
|
1631
|
-
}
|
|
1632
|
-
);
|
|
1633
|
-
Radio.displayName = "Radio";
|
|
1634
|
-
var RadioGroupCompound = Object.assign(RadioGroup, { Radio });
|
|
1635
|
-
var warnings4 = core.createComponentWarnings("Switch");
|
|
1636
|
-
var Switch = react.forwardRef(
|
|
1637
|
-
function Switch2({
|
|
1638
|
-
checked: controlledChecked,
|
|
1639
|
-
defaultChecked = false,
|
|
1640
|
-
onCheckedChange,
|
|
1641
|
-
label,
|
|
1642
|
-
disabled = false,
|
|
1643
|
-
unstyled = false,
|
|
1644
|
-
className,
|
|
1645
|
-
size = "md",
|
|
1646
|
-
"aria-label": ariaLabel,
|
|
1647
|
-
"aria-labelledby": ariaLabelledby,
|
|
1648
|
-
onClick,
|
|
1649
|
-
...props
|
|
1650
|
-
}, ref) {
|
|
1651
|
-
const id = chunk52J4Z3QD_cjs.useId("switch");
|
|
1652
|
-
const labelId = `${id}-label`;
|
|
1653
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
1654
|
-
const [uncontrolledChecked, setUncontrolledChecked] = react.useState(defaultChecked);
|
|
1655
|
-
const isControlled = controlledChecked !== void 0;
|
|
1656
|
-
const checked = isControlled ? controlledChecked : uncontrolledChecked;
|
|
1657
|
-
react.useEffect(() => {
|
|
1658
|
-
if (!label && !ariaLabel && !ariaLabelledby) {
|
|
1659
|
-
warnings4.warning(
|
|
1660
|
-
"Switch has no accessible label. Screen readers need this to identify the switch.",
|
|
1661
|
-
'Add label="Description", aria-label="...", or aria-labelledby="..."'
|
|
1662
|
-
);
|
|
1663
|
-
}
|
|
1664
|
-
}, [label, ariaLabel, ariaLabelledby]);
|
|
1665
|
-
const toggleSwitch = react.useCallback(() => {
|
|
1666
|
-
if (disabled) return;
|
|
1667
|
-
const newChecked = !checked;
|
|
1668
|
-
if (!isControlled) {
|
|
1669
|
-
setUncontrolledChecked(newChecked);
|
|
1670
|
-
}
|
|
1671
|
-
onCheckedChange?.(newChecked);
|
|
1672
|
-
const labelText = label || ariaLabel || "Switch";
|
|
1673
|
-
announce2(`${labelText} ${newChecked ? "on" : "off"}`);
|
|
1674
|
-
}, [
|
|
1675
|
-
checked,
|
|
1676
|
-
disabled,
|
|
1677
|
-
isControlled,
|
|
1678
|
-
onCheckedChange,
|
|
1679
|
-
label,
|
|
1680
|
-
ariaLabel,
|
|
1681
|
-
announce2
|
|
1682
|
-
]);
|
|
1683
|
-
const handleClick = react.useCallback(
|
|
1684
|
-
(event) => {
|
|
1685
|
-
onClick?.(event);
|
|
1686
|
-
if (!event.defaultPrevented) {
|
|
1687
|
-
toggleSwitch();
|
|
1688
|
-
}
|
|
1689
|
-
},
|
|
1690
|
-
[onClick, toggleSwitch]
|
|
1691
|
-
);
|
|
1692
|
-
const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(
|
|
1693
|
-
{
|
|
1694
|
-
" ": () => {
|
|
1695
|
-
toggleSwitch();
|
|
1696
|
-
},
|
|
1697
|
-
Enter: () => {
|
|
1698
|
-
toggleSwitch();
|
|
1699
|
-
}
|
|
1700
|
-
},
|
|
1701
|
-
{ preventDefault: true }
|
|
1702
|
-
);
|
|
1703
|
-
const handleKeyDown = (event) => {
|
|
1704
|
-
props.onKeyDown?.(event);
|
|
1705
|
-
if (!event.defaultPrevented) {
|
|
1706
|
-
keyboardProps.onKeyDown(event);
|
|
1707
|
-
}
|
|
1708
|
-
};
|
|
1709
|
-
const computedAriaLabel = ariaLabel;
|
|
1710
|
-
const computedAriaLabelledby = ariaLabelledby || (label ? labelId : void 0);
|
|
1711
|
-
const wrapperStructuralStyles = {
|
|
1712
|
-
display: "inline-flex",
|
|
1713
|
-
alignItems: "center"
|
|
1714
|
-
};
|
|
1715
|
-
const sizes = {
|
|
1716
|
-
sm: { width: 32, height: 18, thumb: 14, translate: 14 },
|
|
1717
|
-
md: { width: 44, height: 24, thumb: 20, translate: 20 },
|
|
1718
|
-
lg: { width: 56, height: 30, thumb: 26, translate: 26 }
|
|
1719
|
-
};
|
|
1720
|
-
const sizeConfig = sizes[size];
|
|
1721
|
-
const trackStructuralStyles = {
|
|
1722
|
-
position: "relative",
|
|
1723
|
-
display: "inline-flex",
|
|
1724
|
-
alignItems: "center",
|
|
1725
|
-
flexShrink: 0,
|
|
1726
|
-
width: sizeConfig.width,
|
|
1727
|
-
height: sizeConfig.height,
|
|
1728
|
-
border: "none",
|
|
1729
|
-
padding: 2,
|
|
1730
|
-
cursor: disabled ? "not-allowed" : "pointer"
|
|
1731
|
-
};
|
|
1732
|
-
const trackVisualStyles = unstyled ? {} : {
|
|
1733
|
-
backgroundColor: checked ? "#0066cc" : "#d1d5db",
|
|
1734
|
-
borderRadius: sizeConfig.height / 2,
|
|
1735
|
-
transition: "background-color 0.2s ease",
|
|
1736
|
-
opacity: disabled ? 0.5 : 1
|
|
1737
|
-
};
|
|
1738
|
-
const thumbStructuralStyles = {
|
|
1739
|
-
position: "absolute",
|
|
1740
|
-
left: 2,
|
|
1741
|
-
width: sizeConfig.thumb,
|
|
1742
|
-
height: sizeConfig.thumb,
|
|
1743
|
-
pointerEvents: "none",
|
|
1744
|
-
transform: checked ? `translateX(${sizeConfig.translate}px)` : "translateX(0)"
|
|
1745
|
-
};
|
|
1746
|
-
const thumbVisualStyles = unstyled ? {} : {
|
|
1747
|
-
backgroundColor: "white",
|
|
1748
|
-
borderRadius: "50%",
|
|
1749
|
-
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
|
|
1750
|
-
transition: "transform 0.2s ease"
|
|
1751
|
-
};
|
|
1752
|
-
const labelStyles = unstyled ? {
|
|
1753
|
-
marginLeft: 8,
|
|
1754
|
-
userSelect: "none",
|
|
1755
|
-
cursor: disabled ? "not-allowed" : "pointer"
|
|
1756
|
-
} : {
|
|
1757
|
-
marginLeft: 8,
|
|
1758
|
-
userSelect: "none",
|
|
1759
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
1760
|
-
opacity: disabled ? 0.5 : 1
|
|
1761
|
-
};
|
|
1762
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1763
|
-
"div",
|
|
1764
|
-
{
|
|
1765
|
-
style: wrapperStructuralStyles,
|
|
1766
|
-
"data-compa11y-switch-wrapper": true,
|
|
1767
|
-
"data-size": size,
|
|
1768
|
-
children: [
|
|
1769
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1770
|
-
"button",
|
|
1771
|
-
{
|
|
1772
|
-
ref,
|
|
1773
|
-
type: "button",
|
|
1774
|
-
role: "switch",
|
|
1775
|
-
"aria-checked": checked,
|
|
1776
|
-
"aria-label": computedAriaLabel,
|
|
1777
|
-
"aria-labelledby": computedAriaLabelledby,
|
|
1778
|
-
disabled,
|
|
1779
|
-
onClick: handleClick,
|
|
1780
|
-
onKeyDown: handleKeyDown,
|
|
1781
|
-
className,
|
|
1782
|
-
style: { ...trackStructuralStyles, ...trackVisualStyles },
|
|
1783
|
-
tabIndex: disabled ? -1 : 0,
|
|
1784
|
-
"data-compa11y-switch": true,
|
|
1785
|
-
"data-checked": checked,
|
|
1786
|
-
"data-disabled": disabled || void 0,
|
|
1787
|
-
"data-size": size,
|
|
1788
|
-
...props,
|
|
1789
|
-
onFocus: (e) => {
|
|
1790
|
-
if (!unstyled) {
|
|
1791
|
-
e.currentTarget.style.outline = "2px solid #0066cc";
|
|
1792
|
-
e.currentTarget.style.outlineOffset = "2px";
|
|
1793
|
-
}
|
|
1794
|
-
props.onFocus?.(e);
|
|
1795
|
-
},
|
|
1796
|
-
onBlur: (e) => {
|
|
1797
|
-
if (!unstyled) {
|
|
1798
|
-
e.currentTarget.style.outline = "none";
|
|
1799
|
-
}
|
|
1800
|
-
props.onBlur?.(e);
|
|
1801
|
-
},
|
|
1802
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1803
|
-
"span",
|
|
1804
|
-
{
|
|
1805
|
-
style: { ...thumbStructuralStyles, ...thumbVisualStyles },
|
|
1806
|
-
"data-compa11y-switch-thumb": true,
|
|
1807
|
-
"aria-hidden": "true"
|
|
1808
|
-
}
|
|
1809
|
-
)
|
|
1810
|
-
}
|
|
1811
|
-
),
|
|
1812
|
-
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1813
|
-
"label",
|
|
1814
|
-
{
|
|
1815
|
-
id: labelId,
|
|
1816
|
-
onClick: disabled ? void 0 : () => toggleSwitch(),
|
|
1817
|
-
style: labelStyles,
|
|
1818
|
-
"data-compa11y-switch-label": true,
|
|
1819
|
-
children: label
|
|
1820
|
-
}
|
|
1821
|
-
)
|
|
1822
|
-
]
|
|
1823
|
-
}
|
|
1824
|
-
);
|
|
1825
|
-
}
|
|
1826
|
-
);
|
|
1827
|
-
Switch.displayName = "Switch";
|
|
1828
|
-
var warnings5 = core.createComponentWarnings("Listbox");
|
|
1829
|
-
var ListboxContext = react.createContext(null);
|
|
1830
|
-
function useListboxContext() {
|
|
1831
|
-
const context = react.useContext(ListboxContext);
|
|
1832
|
-
if (!context) {
|
|
1833
|
-
throw new Error(
|
|
1834
|
-
"[Compa11y Listbox]: Option/Group must be used within a Listbox."
|
|
1835
|
-
);
|
|
1836
|
-
}
|
|
1837
|
-
return context;
|
|
1838
|
-
}
|
|
1839
|
-
var ListboxGroupContext = react.createContext({
|
|
1840
|
-
groupDisabled: false
|
|
1841
|
-
});
|
|
1842
|
-
var Listbox = react.forwardRef(
|
|
1843
|
-
function Listbox2({
|
|
1844
|
-
value: controlledValue,
|
|
1845
|
-
defaultValue,
|
|
1846
|
-
onValueChange,
|
|
1847
|
-
multiple = false,
|
|
1848
|
-
disabled = false,
|
|
1849
|
-
discoverable = true,
|
|
1850
|
-
orientation = "vertical",
|
|
1851
|
-
unstyled = false,
|
|
1852
|
-
className = "",
|
|
1853
|
-
children,
|
|
1854
|
-
"aria-label": ariaLabel,
|
|
1855
|
-
"aria-labelledby": ariaLabelledBy
|
|
1856
|
-
}, ref) {
|
|
1857
|
-
const listboxId = chunk52J4Z3QD_cjs.useId("listbox");
|
|
1858
|
-
const { announce: announce2 } = chunkRBDQCIS7_cjs.useAnnouncer();
|
|
1859
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(() => defaultValue ?? (multiple ? [] : ""));
|
|
1860
|
-
const isControlled = controlledValue !== void 0;
|
|
1861
|
-
const currentValue = isControlled ? controlledValue : uncontrolledValue;
|
|
1862
|
-
const selectedValues = react.useMemo(() => {
|
|
1863
|
-
if (multiple) {
|
|
1864
|
-
return new Set(
|
|
1865
|
-
Array.isArray(currentValue) ? currentValue : []
|
|
1866
|
-
);
|
|
1867
|
-
}
|
|
1868
|
-
return new Set(currentValue ? [String(currentValue)] : []);
|
|
1869
|
-
}, [currentValue, multiple]);
|
|
1870
|
-
const [focusedValue, setFocusedValue] = react.useState(null);
|
|
1871
|
-
const optionsRef = react.useRef(/* @__PURE__ */ new Map());
|
|
1872
|
-
const [optionsVersion, setOptionsVersion] = react.useState(0);
|
|
1873
|
-
const registerOption = react.useCallback(
|
|
1874
|
-
(value, optDisabled, label) => {
|
|
1875
|
-
optionsRef.current.set(value, { disabled: optDisabled, label });
|
|
1876
|
-
setOptionsVersion((v) => v + 1);
|
|
1877
|
-
},
|
|
1878
|
-
[]
|
|
1879
|
-
);
|
|
1880
|
-
const unregisterOption = react.useCallback((value) => {
|
|
1881
|
-
optionsRef.current.delete(value);
|
|
1882
|
-
setOptionsVersion((v) => v + 1);
|
|
1883
|
-
}, []);
|
|
1884
|
-
const updateOptionDisabled = react.useCallback(
|
|
1885
|
-
(value, optDisabled) => {
|
|
1886
|
-
const existing = optionsRef.current.get(value);
|
|
1887
|
-
if (existing) {
|
|
1888
|
-
optionsRef.current.set(value, { ...existing, disabled: optDisabled });
|
|
1889
|
-
}
|
|
1890
|
-
},
|
|
1891
|
-
[]
|
|
1892
|
-
);
|
|
1893
|
-
const enabledValues = react.useMemo(() => {
|
|
1894
|
-
const result = [];
|
|
1895
|
-
optionsRef.current.forEach((info, value) => {
|
|
1896
|
-
if (!info.disabled && !disabled) {
|
|
1897
|
-
result.push(value);
|
|
1898
|
-
}
|
|
1899
|
-
});
|
|
1900
|
-
return result;
|
|
1901
|
-
}, [optionsVersion, disabled]);
|
|
1902
|
-
react.useEffect(() => {
|
|
1903
|
-
if (!ariaLabel && !ariaLabelledBy) {
|
|
1904
|
-
warnings5.warning(
|
|
1905
|
-
"Listbox has no accessible label. Screen readers need this.",
|
|
1906
|
-
'Add aria-label="..." or aria-labelledby="..."'
|
|
1907
|
-
);
|
|
1908
|
-
}
|
|
1909
|
-
}, [ariaLabel, ariaLabelledBy]);
|
|
1910
|
-
const isSelected = react.useCallback(
|
|
1911
|
-
(value) => selectedValues.has(value),
|
|
1912
|
-
[selectedValues]
|
|
1913
|
-
);
|
|
1914
|
-
const handleSelect = react.useCallback(
|
|
1915
|
-
(optionValue) => {
|
|
1916
|
-
if (disabled) return;
|
|
1917
|
-
const info = optionsRef.current.get(optionValue);
|
|
1918
|
-
if (info?.disabled) return;
|
|
1919
|
-
let newValue;
|
|
1920
|
-
const label = info?.label || optionValue;
|
|
1921
|
-
if (multiple) {
|
|
1922
|
-
const current = new Set(selectedValues);
|
|
1923
|
-
if (current.has(optionValue)) {
|
|
1924
|
-
current.delete(optionValue);
|
|
1925
|
-
announce2(`${label} deselected`, { politeness: "polite" });
|
|
1926
|
-
} else {
|
|
1927
|
-
current.add(optionValue);
|
|
1928
|
-
announce2(`${label} selected`, { politeness: "polite" });
|
|
1929
|
-
}
|
|
1930
|
-
newValue = Array.from(current);
|
|
1931
|
-
} else {
|
|
1932
|
-
newValue = optionValue;
|
|
1933
|
-
announce2(`${label} selected`, { politeness: "polite" });
|
|
1934
|
-
}
|
|
1935
|
-
if (!isControlled) {
|
|
1936
|
-
setUncontrolledValue(newValue);
|
|
1937
|
-
}
|
|
1938
|
-
onValueChange?.(newValue);
|
|
1939
|
-
},
|
|
1940
|
-
[disabled, multiple, selectedValues, isControlled, onValueChange, announce2]
|
|
1941
|
-
);
|
|
1942
|
-
const navigateOption = react.useCallback(
|
|
1943
|
-
(direction) => {
|
|
1944
|
-
if (enabledValues.length === 0) return;
|
|
1945
|
-
const currentIndex = focusedValue ? enabledValues.indexOf(focusedValue) : -1;
|
|
1946
|
-
let nextIndex;
|
|
1947
|
-
switch (direction) {
|
|
1948
|
-
case "next":
|
|
1949
|
-
nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, enabledValues.length - 1);
|
|
1950
|
-
break;
|
|
1951
|
-
case "prev":
|
|
1952
|
-
nextIndex = currentIndex < 0 ? enabledValues.length - 1 : Math.max(currentIndex - 1, 0);
|
|
1953
|
-
break;
|
|
1954
|
-
case "first":
|
|
1955
|
-
nextIndex = 0;
|
|
1956
|
-
break;
|
|
1957
|
-
case "last":
|
|
1958
|
-
nextIndex = enabledValues.length - 1;
|
|
1959
|
-
break;
|
|
1960
|
-
}
|
|
1961
|
-
const nextValue = enabledValues[nextIndex];
|
|
1962
|
-
if (nextValue !== void 0) {
|
|
1963
|
-
setFocusedValue(nextValue);
|
|
1964
|
-
if (!multiple) {
|
|
1965
|
-
const info = optionsRef.current.get(nextValue);
|
|
1966
|
-
const label = info?.label || nextValue;
|
|
1967
|
-
let newVal = nextValue;
|
|
1968
|
-
if (!isControlled) {
|
|
1969
|
-
setUncontrolledValue(newVal);
|
|
1970
|
-
}
|
|
1971
|
-
onValueChange?.(newVal);
|
|
1972
|
-
announce2(`${label} selected`, { politeness: "polite" });
|
|
1973
|
-
} else {
|
|
1974
|
-
const info = optionsRef.current.get(nextValue);
|
|
1975
|
-
const label = info?.label || nextValue;
|
|
1976
|
-
const sel = selectedValues.has(nextValue);
|
|
1977
|
-
announce2(`${label}${sel ? ", selected" : ""}`, {
|
|
1978
|
-
politeness: "polite"
|
|
1979
|
-
});
|
|
1980
|
-
}
|
|
1981
|
-
}
|
|
1982
|
-
},
|
|
1983
|
-
[
|
|
1984
|
-
enabledValues,
|
|
1985
|
-
focusedValue,
|
|
1986
|
-
multiple,
|
|
1987
|
-
isControlled,
|
|
1988
|
-
onValueChange,
|
|
1989
|
-
announce2,
|
|
1990
|
-
selectedValues
|
|
1991
|
-
]
|
|
1992
|
-
);
|
|
1993
|
-
const toggleFocusedOption = react.useCallback(() => {
|
|
1994
|
-
if (focusedValue && multiple) {
|
|
1995
|
-
handleSelect(focusedValue);
|
|
1996
|
-
}
|
|
1997
|
-
}, [focusedValue, multiple, handleSelect]);
|
|
1998
|
-
const selectRangeToFirst = react.useCallback(() => {
|
|
1999
|
-
if (!multiple || !focusedValue) return;
|
|
2000
|
-
const currentIdx = enabledValues.indexOf(focusedValue);
|
|
2001
|
-
if (currentIdx < 0) return;
|
|
2002
|
-
const toSelect = enabledValues.slice(0, currentIdx + 1);
|
|
2003
|
-
const newSet = new Set(selectedValues);
|
|
2004
|
-
toSelect.forEach((v) => newSet.add(v));
|
|
2005
|
-
const newValue = Array.from(newSet);
|
|
2006
|
-
if (!isControlled) {
|
|
2007
|
-
setUncontrolledValue(newValue);
|
|
2008
|
-
}
|
|
2009
|
-
onValueChange?.(newValue);
|
|
2010
|
-
setFocusedValue(enabledValues[0] ?? null);
|
|
2011
|
-
announce2(`${toSelect.length} items selected`, { politeness: "polite" });
|
|
2012
|
-
}, [
|
|
2013
|
-
multiple,
|
|
2014
|
-
focusedValue,
|
|
2015
|
-
enabledValues,
|
|
2016
|
-
selectedValues,
|
|
2017
|
-
isControlled,
|
|
2018
|
-
onValueChange,
|
|
2019
|
-
announce2
|
|
2020
|
-
]);
|
|
2021
|
-
const selectRangeToLast = react.useCallback(() => {
|
|
2022
|
-
if (!multiple || !focusedValue) return;
|
|
2023
|
-
const currentIdx = enabledValues.indexOf(focusedValue);
|
|
2024
|
-
if (currentIdx < 0) return;
|
|
2025
|
-
const toSelect = enabledValues.slice(currentIdx);
|
|
2026
|
-
const newSet = new Set(selectedValues);
|
|
2027
|
-
toSelect.forEach((v) => newSet.add(v));
|
|
2028
|
-
const newValue = Array.from(newSet);
|
|
2029
|
-
if (!isControlled) {
|
|
2030
|
-
setUncontrolledValue(newValue);
|
|
2031
|
-
}
|
|
2032
|
-
onValueChange?.(newValue);
|
|
2033
|
-
setFocusedValue(enabledValues[enabledValues.length - 1] ?? null);
|
|
2034
|
-
announce2(`${toSelect.length} items selected`, { politeness: "polite" });
|
|
2035
|
-
}, [
|
|
2036
|
-
multiple,
|
|
2037
|
-
focusedValue,
|
|
2038
|
-
enabledValues,
|
|
2039
|
-
selectedValues,
|
|
2040
|
-
isControlled,
|
|
2041
|
-
onValueChange,
|
|
2042
|
-
announce2
|
|
2043
|
-
]);
|
|
2044
|
-
const toggleSelectAll = react.useCallback(() => {
|
|
2045
|
-
if (!multiple) return;
|
|
2046
|
-
const allSelected = enabledValues.every((v) => selectedValues.has(v));
|
|
2047
|
-
let newValue;
|
|
2048
|
-
if (allSelected) {
|
|
2049
|
-
newValue = [];
|
|
2050
|
-
announce2("All deselected", { politeness: "polite" });
|
|
2051
|
-
} else {
|
|
2052
|
-
newValue = [...enabledValues];
|
|
2053
|
-
announce2("All selected", { politeness: "polite" });
|
|
2054
|
-
}
|
|
2055
|
-
if (!isControlled) {
|
|
2056
|
-
setUncontrolledValue(newValue);
|
|
2057
|
-
}
|
|
2058
|
-
onValueChange?.(newValue);
|
|
2059
|
-
}, [
|
|
2060
|
-
multiple,
|
|
2061
|
-
enabledValues,
|
|
2062
|
-
selectedValues,
|
|
2063
|
-
isControlled,
|
|
2064
|
-
onValueChange,
|
|
2065
|
-
announce2
|
|
2066
|
-
]);
|
|
2067
|
-
const keyboardHandlers = react.useMemo(() => {
|
|
2068
|
-
const handlers = {
|
|
2069
|
-
ArrowDown: () => navigateOption("next"),
|
|
2070
|
-
ArrowUp: () => navigateOption("prev"),
|
|
2071
|
-
Home: () => navigateOption("first"),
|
|
2072
|
-
End: () => navigateOption("last")
|
|
2073
|
-
};
|
|
2074
|
-
if (multiple) {
|
|
2075
|
-
handlers[" "] = () => toggleFocusedOption();
|
|
2076
|
-
handlers["Shift+ArrowDown"] = () => {
|
|
2077
|
-
navigateOption("next");
|
|
2078
|
-
setTimeout(() => toggleFocusedOption(), 0);
|
|
2079
|
-
};
|
|
2080
|
-
handlers["Shift+ArrowUp"] = () => {
|
|
2081
|
-
navigateOption("prev");
|
|
2082
|
-
setTimeout(() => toggleFocusedOption(), 0);
|
|
2083
|
-
};
|
|
2084
|
-
handlers["Ctrl+Shift+Home"] = () => selectRangeToFirst();
|
|
2085
|
-
handlers["Ctrl+Shift+End"] = () => selectRangeToLast();
|
|
2086
|
-
handlers["Ctrl+a"] = () => toggleSelectAll();
|
|
2087
|
-
handlers["Meta+a"] = () => toggleSelectAll();
|
|
2088
|
-
}
|
|
2089
|
-
return handlers;
|
|
2090
|
-
}, [
|
|
2091
|
-
multiple,
|
|
2092
|
-
navigateOption,
|
|
2093
|
-
toggleFocusedOption,
|
|
2094
|
-
selectRangeToFirst,
|
|
2095
|
-
selectRangeToLast,
|
|
2096
|
-
toggleSelectAll
|
|
2097
|
-
]);
|
|
2098
|
-
const keyboardProps = chunkGDLOJH6K_cjs.useKeyboard(keyboardHandlers, {
|
|
2099
|
-
preventDefault: true,
|
|
2100
|
-
stopPropagation: true,
|
|
2101
|
-
disabled
|
|
2102
|
-
});
|
|
2103
|
-
const optionLabels = react.useMemo(() => {
|
|
2104
|
-
return Array.from(optionsRef.current.values()).map((info) => info.label);
|
|
2105
|
-
}, [optionsVersion]);
|
|
2106
|
-
const typeAheadProps = chunkGDLOJH6K_cjs.useTypeAhead(
|
|
2107
|
-
optionLabels,
|
|
2108
|
-
(matchedLabel) => {
|
|
2109
|
-
for (const [value, info] of optionsRef.current.entries()) {
|
|
2110
|
-
if (info.label === matchedLabel && !info.disabled) {
|
|
2111
|
-
setFocusedValue(value);
|
|
2112
|
-
if (!multiple) {
|
|
2113
|
-
let newVal = value;
|
|
2114
|
-
if (!isControlled) {
|
|
2115
|
-
setUncontrolledValue(newVal);
|
|
2116
|
-
}
|
|
2117
|
-
onValueChange?.(newVal);
|
|
2118
|
-
announce2(`${matchedLabel} selected`, { politeness: "polite" });
|
|
2119
|
-
}
|
|
2120
|
-
break;
|
|
2121
|
-
}
|
|
2122
|
-
}
|
|
2123
|
-
},
|
|
2124
|
-
{ disabled }
|
|
2125
|
-
);
|
|
2126
|
-
const handleKeyDown = react.useCallback(
|
|
2127
|
-
(event) => {
|
|
2128
|
-
keyboardProps.onKeyDown(event);
|
|
2129
|
-
if (!event.defaultPrevented) {
|
|
2130
|
-
typeAheadProps.onKeyDown(event);
|
|
2131
|
-
}
|
|
2132
|
-
},
|
|
2133
|
-
[keyboardProps, typeAheadProps]
|
|
2134
|
-
);
|
|
2135
|
-
const handleFocus = react.useCallback(() => {
|
|
2136
|
-
if (focusedValue) return;
|
|
2137
|
-
if (!multiple && currentValue && typeof currentValue === "string") {
|
|
2138
|
-
setFocusedValue(currentValue);
|
|
2139
|
-
return;
|
|
2140
|
-
}
|
|
2141
|
-
if (multiple && Array.isArray(currentValue) && currentValue.length > 0) {
|
|
2142
|
-
setFocusedValue(currentValue[0] ?? null);
|
|
2143
|
-
return;
|
|
2144
|
-
}
|
|
2145
|
-
if (enabledValues.length > 0) {
|
|
2146
|
-
setFocusedValue(enabledValues[0] ?? null);
|
|
2147
|
-
}
|
|
2148
|
-
}, [focusedValue, multiple, currentValue, enabledValues]);
|
|
2149
|
-
const handleBlur = react.useCallback(() => {
|
|
2150
|
-
}, []);
|
|
2151
|
-
const listboxRef = react.useRef(null);
|
|
2152
|
-
react.useEffect(() => {
|
|
2153
|
-
if (focusedValue && listboxRef.current) {
|
|
2154
|
-
const el = listboxRef.current.querySelector(
|
|
2155
|
-
`[data-value="${CSS.escape(focusedValue)}"]`
|
|
2156
|
-
);
|
|
2157
|
-
el?.scrollIntoView({ block: "nearest" });
|
|
2158
|
-
}
|
|
2159
|
-
}, [focusedValue]);
|
|
2160
|
-
const contextValue = react.useMemo(
|
|
2161
|
-
() => ({
|
|
2162
|
-
multiple,
|
|
2163
|
-
disabled,
|
|
2164
|
-
discoverable,
|
|
2165
|
-
unstyled,
|
|
2166
|
-
orientation,
|
|
2167
|
-
selectedValues,
|
|
2168
|
-
focusedValue,
|
|
2169
|
-
onSelect: handleSelect,
|
|
2170
|
-
onFocusOption: setFocusedValue,
|
|
2171
|
-
registerOption,
|
|
2172
|
-
unregisterOption,
|
|
2173
|
-
updateOptionDisabled,
|
|
2174
|
-
isSelected,
|
|
2175
|
-
listboxId
|
|
2176
|
-
}),
|
|
2177
|
-
[
|
|
2178
|
-
multiple,
|
|
2179
|
-
disabled,
|
|
2180
|
-
discoverable,
|
|
2181
|
-
unstyled,
|
|
2182
|
-
orientation,
|
|
2183
|
-
selectedValues,
|
|
2184
|
-
focusedValue,
|
|
2185
|
-
handleSelect,
|
|
2186
|
-
registerOption,
|
|
2187
|
-
unregisterOption,
|
|
2188
|
-
updateOptionDisabled,
|
|
2189
|
-
isSelected,
|
|
2190
|
-
listboxId
|
|
2191
|
-
]
|
|
2192
|
-
);
|
|
2193
|
-
const mergedRef = react.useCallback(
|
|
2194
|
-
(node) => {
|
|
2195
|
-
listboxRef.current = node;
|
|
2196
|
-
if (typeof ref === "function") {
|
|
2197
|
-
ref(node);
|
|
2198
|
-
} else if (ref) {
|
|
2199
|
-
ref.current = node;
|
|
2200
|
-
}
|
|
2201
|
-
},
|
|
2202
|
-
[ref]
|
|
2203
|
-
);
|
|
2204
|
-
const activeDescendantId = focusedValue ? `${listboxId}-option-${focusedValue}` : void 0;
|
|
2205
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ListboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2206
|
-
"div",
|
|
2207
|
-
{
|
|
2208
|
-
ref: mergedRef,
|
|
2209
|
-
role: "listbox",
|
|
2210
|
-
"aria-label": ariaLabel,
|
|
2211
|
-
"aria-labelledby": ariaLabelledBy,
|
|
2212
|
-
"aria-orientation": orientation,
|
|
2213
|
-
"aria-multiselectable": multiple || void 0,
|
|
2214
|
-
"aria-disabled": disabled || void 0,
|
|
2215
|
-
"aria-activedescendant": activeDescendantId,
|
|
2216
|
-
tabIndex: disabled && !discoverable ? -1 : 0,
|
|
2217
|
-
className: `compa11y-listbox ${className}`.trim(),
|
|
2218
|
-
"data-compa11y-listbox": "",
|
|
2219
|
-
"data-orientation": orientation,
|
|
2220
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
2221
|
-
"data-multiple": multiple ? "true" : void 0,
|
|
2222
|
-
onKeyDown: handleKeyDown,
|
|
2223
|
-
onFocus: handleFocus,
|
|
2224
|
-
onBlur: handleBlur,
|
|
2225
|
-
style: unstyled ? {} : {
|
|
2226
|
-
width: "var(--compa11y-listbox-width, 250px)",
|
|
2227
|
-
maxHeight: "var(--compa11y-listbox-max-height, 300px)",
|
|
2228
|
-
overflowY: "auto",
|
|
2229
|
-
border: "var(--compa11y-listbox-border, 1px solid #e0e0e0)",
|
|
2230
|
-
borderRadius: "var(--compa11y-listbox-radius, 4px)",
|
|
2231
|
-
background: "var(--compa11y-listbox-bg, white)",
|
|
2232
|
-
padding: "var(--compa11y-listbox-padding, 0.25rem 0)",
|
|
2233
|
-
...disabled ? {
|
|
2234
|
-
opacity: "var(--compa11y-listbox-disabled-opacity, 0.5)",
|
|
2235
|
-
cursor: "not-allowed"
|
|
2236
|
-
} : {}
|
|
2237
|
-
},
|
|
2238
|
-
children
|
|
2239
|
-
}
|
|
2240
|
-
) });
|
|
2241
|
-
}
|
|
2242
|
-
);
|
|
2243
|
-
Listbox.displayName = "Listbox";
|
|
2244
|
-
var ListboxOption = react.forwardRef(
|
|
2245
|
-
function ListboxOption2({
|
|
2246
|
-
value,
|
|
2247
|
-
disabled: localDisabled = false,
|
|
2248
|
-
discoverable: _,
|
|
2249
|
-
unstyled: localUnstyled,
|
|
2250
|
-
className = "",
|
|
2251
|
-
children,
|
|
2252
|
-
"aria-label": ariaLabel
|
|
2253
|
-
}, ref) {
|
|
2254
|
-
const context = useListboxContext();
|
|
2255
|
-
const { groupDisabled } = react.useContext(ListboxGroupContext);
|
|
2256
|
-
const disabled = context.disabled || groupDisabled || localDisabled;
|
|
2257
|
-
const unstyled = localUnstyled ?? context.unstyled;
|
|
2258
|
-
const selected = context.isSelected(value);
|
|
2259
|
-
const focused = context.focusedValue === value;
|
|
2260
|
-
const optionId = `${context.listboxId}-option-${value}`;
|
|
2261
|
-
const labelRef = react.useRef("");
|
|
2262
|
-
const optionRef = react.useRef(null);
|
|
2263
|
-
const mergedRef = react.useCallback(
|
|
2264
|
-
(node) => {
|
|
2265
|
-
optionRef.current = node;
|
|
2266
|
-
if (typeof ref === "function") {
|
|
2267
|
-
ref(node);
|
|
2268
|
-
} else if (ref) {
|
|
2269
|
-
ref.current = node;
|
|
2270
|
-
}
|
|
2271
|
-
},
|
|
2272
|
-
[ref]
|
|
2273
|
-
);
|
|
2274
|
-
react.useEffect(() => {
|
|
2275
|
-
const label = typeof children === "string" ? children : optionRef.current?.textContent?.trim() || value;
|
|
2276
|
-
labelRef.current = label;
|
|
2277
|
-
context.registerOption(value, disabled, label);
|
|
2278
|
-
return () => context.unregisterOption(value);
|
|
2279
|
-
}, [value]);
|
|
2280
|
-
react.useEffect(() => {
|
|
2281
|
-
context.updateOptionDisabled(value, disabled);
|
|
2282
|
-
}, [disabled, value]);
|
|
2283
|
-
const handleClick = react.useCallback(
|
|
2284
|
-
(event) => {
|
|
2285
|
-
if (disabled) {
|
|
2286
|
-
event.preventDefault();
|
|
2287
|
-
return;
|
|
2288
|
-
}
|
|
2289
|
-
context.onFocusOption(value);
|
|
2290
|
-
context.onSelect(value);
|
|
2291
|
-
},
|
|
2292
|
-
[disabled, context, value]
|
|
2293
|
-
);
|
|
2294
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2295
|
-
"div",
|
|
2296
|
-
{
|
|
2297
|
-
ref: mergedRef,
|
|
2298
|
-
id: optionId,
|
|
2299
|
-
role: "option",
|
|
2300
|
-
"aria-selected": selected,
|
|
2301
|
-
"aria-disabled": disabled || void 0,
|
|
2302
|
-
"aria-label": ariaLabel,
|
|
2303
|
-
className: `compa11y-listbox-option ${className}`.trim(),
|
|
2304
|
-
"data-compa11y-listbox-option": "",
|
|
2305
|
-
"data-value": value,
|
|
2306
|
-
"data-selected": selected ? "true" : "false",
|
|
2307
|
-
"data-focused": focused ? "true" : "false",
|
|
2308
|
-
"data-disabled": disabled ? "true" : void 0,
|
|
2309
|
-
onClick: handleClick,
|
|
2310
|
-
style: unstyled ? {
|
|
2311
|
-
cursor: disabled ? "not-allowed" : "pointer"
|
|
2312
|
-
} : {
|
|
2313
|
-
display: "flex",
|
|
2314
|
-
alignItems: "center",
|
|
2315
|
-
justifyContent: "space-between",
|
|
2316
|
-
padding: "var(--compa11y-listbox-option-padding, 0.5rem 0.75rem)",
|
|
2317
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
2318
|
-
userSelect: "none",
|
|
2319
|
-
transition: "background 0.1s ease",
|
|
2320
|
-
background: focused ? selected ? "var(--compa11y-listbox-option-selected-hover-bg, #cce0ff)" : "var(--compa11y-listbox-option-hover-bg, #f5f5f5)" : selected ? "var(--compa11y-listbox-option-selected-bg, #e6f0ff)" : "transparent",
|
|
2321
|
-
fontWeight: selected ? 500 : "normal",
|
|
2322
|
-
opacity: disabled ? 0.5 : 1
|
|
2323
|
-
},
|
|
2324
|
-
children: [
|
|
2325
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children }),
|
|
2326
|
-
selected && !unstyled && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2327
|
-
"span",
|
|
2328
|
-
{
|
|
2329
|
-
"aria-hidden": "true",
|
|
2330
|
-
style: {
|
|
2331
|
-
fontSize: "0.875rem",
|
|
2332
|
-
color: "var(--compa11y-listbox-check-color, #0066cc)",
|
|
2333
|
-
marginLeft: "0.5rem"
|
|
2334
|
-
},
|
|
2335
|
-
children: "\u2713"
|
|
2336
|
-
}
|
|
2337
|
-
)
|
|
2338
|
-
]
|
|
2339
|
-
}
|
|
2340
|
-
);
|
|
2341
|
-
}
|
|
2342
|
-
);
|
|
2343
|
-
ListboxOption.displayName = "ListboxOption";
|
|
2344
|
-
var ListboxGroup = react.forwardRef(
|
|
2345
|
-
function ListboxGroup2({
|
|
2346
|
-
label,
|
|
2347
|
-
disabled: groupDisabled = false,
|
|
2348
|
-
unstyled: localUnstyled,
|
|
2349
|
-
className = "",
|
|
2350
|
-
children
|
|
2351
|
-
}, ref) {
|
|
2352
|
-
const context = useListboxContext();
|
|
2353
|
-
const unstyled = localUnstyled ?? context.unstyled;
|
|
2354
|
-
const labelId = chunk52J4Z3QD_cjs.useId("listbox-group");
|
|
2355
|
-
const groupContextValue = react.useMemo(
|
|
2356
|
-
() => ({ groupDisabled: context.disabled || groupDisabled }),
|
|
2357
|
-
[context.disabled, groupDisabled]
|
|
2358
|
-
);
|
|
2359
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ListboxGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2360
|
-
"div",
|
|
2361
|
-
{
|
|
2362
|
-
ref,
|
|
2363
|
-
role: "group",
|
|
2364
|
-
"aria-labelledby": labelId,
|
|
2365
|
-
"aria-disabled": groupDisabled || void 0,
|
|
2366
|
-
className: `compa11y-listbox-group ${className}`.trim(),
|
|
2367
|
-
"data-compa11y-listbox-group": "",
|
|
2368
|
-
"data-disabled": groupDisabled ? "true" : void 0,
|
|
2369
|
-
style: unstyled ? {} : {
|
|
2370
|
-
opacity: groupDisabled ? 0.5 : 1
|
|
2371
|
-
},
|
|
2372
|
-
children: [
|
|
2373
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2374
|
-
"div",
|
|
2375
|
-
{
|
|
2376
|
-
id: labelId,
|
|
2377
|
-
role: "presentation",
|
|
2378
|
-
style: unstyled ? {} : {
|
|
2379
|
-
padding: "var(--compa11y-listbox-group-label-padding, 0.5rem 0.75rem 0.25rem)",
|
|
2380
|
-
fontSize: "var(--compa11y-listbox-group-label-size, 0.75rem)",
|
|
2381
|
-
fontWeight: 600,
|
|
2382
|
-
color: "var(--compa11y-listbox-group-label-color, #666)",
|
|
2383
|
-
textTransform: "uppercase",
|
|
2384
|
-
letterSpacing: "0.05em"
|
|
2385
|
-
},
|
|
2386
|
-
children: label
|
|
2387
|
-
}
|
|
2388
|
-
),
|
|
2389
|
-
children
|
|
2390
|
-
]
|
|
2391
|
-
}
|
|
2392
|
-
) });
|
|
2393
|
-
}
|
|
2394
|
-
);
|
|
2395
|
-
ListboxGroup.displayName = "ListboxGroup";
|
|
2396
|
-
var ListboxCompound = Object.assign(Listbox, {
|
|
2397
|
-
Option: ListboxOption,
|
|
2398
|
-
Group: ListboxGroup
|
|
2399
|
-
});
|
|
2400
|
-
var InputContext = react.createContext(null);
|
|
2401
|
-
function useInputContext() {
|
|
2402
|
-
const ctx = react.useContext(InputContext);
|
|
2403
|
-
if (!ctx) {
|
|
2404
|
-
throw new Error(
|
|
2405
|
-
"[Compa11y Input]: Input sub-components (Input.Label, Input.Field, etc.) must be used within <Input>."
|
|
2406
|
-
);
|
|
2407
|
-
}
|
|
2408
|
-
return ctx;
|
|
2409
|
-
}
|
|
2410
|
-
var InputLabel = react.forwardRef(
|
|
2411
|
-
function InputLabel2({ children, className }, ref) {
|
|
2412
|
-
const ctx = useInputContext();
|
|
2413
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2414
|
-
"label",
|
|
2415
|
-
{
|
|
2416
|
-
ref,
|
|
2417
|
-
id: ctx.labelId,
|
|
2418
|
-
htmlFor: ctx.fieldId,
|
|
2419
|
-
"data-compa11y-input-label": "",
|
|
2420
|
-
className,
|
|
2421
|
-
style: ctx.unstyled ? {} : {
|
|
2422
|
-
display: "block",
|
|
2423
|
-
color: ctx.disabled ? "var(--compa11y-input-disabled-color, #999)" : "var(--compa11y-input-label-color, inherit)",
|
|
2424
|
-
fontSize: "var(--compa11y-input-label-size, 0.875rem)",
|
|
2425
|
-
fontWeight: "var(--compa11y-input-label-weight, 500)"
|
|
2426
|
-
},
|
|
2427
|
-
children: [
|
|
2428
|
-
children,
|
|
2429
|
-
ctx.required && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2430
|
-
"span",
|
|
2431
|
-
{
|
|
2432
|
-
"data-compa11y-input-required": "",
|
|
2433
|
-
"aria-hidden": "true",
|
|
2434
|
-
style: ctx.unstyled ? {} : {
|
|
2435
|
-
color: "var(--compa11y-input-required-color, #ef4444)",
|
|
2436
|
-
marginLeft: "0.125rem"
|
|
2437
|
-
},
|
|
2438
|
-
children: "*"
|
|
2439
|
-
}
|
|
2440
|
-
)
|
|
2441
|
-
]
|
|
2442
|
-
}
|
|
2443
|
-
);
|
|
2444
|
-
}
|
|
2445
|
-
);
|
|
2446
|
-
InputLabel.displayName = "InputLabel";
|
|
2447
|
-
var InputField = react.forwardRef(
|
|
2448
|
-
function InputField2({
|
|
2449
|
-
type = "text",
|
|
2450
|
-
onFocus: providedOnFocus,
|
|
2451
|
-
onBlur: providedOnBlur,
|
|
2452
|
-
className,
|
|
2453
|
-
style,
|
|
2454
|
-
...rest
|
|
2455
|
-
}, ref) {
|
|
2456
|
-
const ctx = useInputContext();
|
|
2457
|
-
const inputRef = react.useRef(null);
|
|
2458
|
-
const mergedRef = react.useCallback(
|
|
2459
|
-
(node) => {
|
|
2460
|
-
inputRef.current = node;
|
|
2461
|
-
if (typeof ref === "function") {
|
|
2462
|
-
ref(node);
|
|
2463
|
-
} else if (ref) {
|
|
2464
|
-
ref.current = node;
|
|
2465
|
-
}
|
|
2466
|
-
},
|
|
2467
|
-
[ref]
|
|
2468
|
-
);
|
|
2469
|
-
const handleChange = react.useCallback(
|
|
2470
|
-
(event) => {
|
|
2471
|
-
ctx.setValue(event.target.value);
|
|
2472
|
-
},
|
|
2473
|
-
[ctx.setValue]
|
|
2474
|
-
);
|
|
2475
|
-
const handleFocus = react.useCallback(
|
|
2476
|
-
(event) => {
|
|
2477
|
-
ctx.focusProps.onFocus();
|
|
2478
|
-
providedOnFocus?.(event);
|
|
2479
|
-
},
|
|
2480
|
-
[ctx.focusProps, providedOnFocus]
|
|
2481
|
-
);
|
|
2482
|
-
const handleBlur = react.useCallback(
|
|
2483
|
-
(event) => {
|
|
2484
|
-
ctx.focusProps.onBlur();
|
|
2485
|
-
providedOnBlur?.(event);
|
|
2486
|
-
},
|
|
2487
|
-
[ctx.focusProps, providedOnBlur]
|
|
2488
|
-
);
|
|
2489
|
-
const describedByParts = [];
|
|
2490
|
-
describedByParts.push(ctx.hintId);
|
|
2491
|
-
if (ctx.hasError) {
|
|
2492
|
-
describedByParts.push(ctx.errorId);
|
|
2493
|
-
}
|
|
2494
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2495
|
-
"input",
|
|
2496
|
-
{
|
|
2497
|
-
ref: mergedRef,
|
|
2498
|
-
id: ctx.fieldId,
|
|
2499
|
-
type,
|
|
2500
|
-
value: ctx.value,
|
|
2501
|
-
onChange: handleChange,
|
|
2502
|
-
onFocus: handleFocus,
|
|
2503
|
-
onBlur: handleBlur,
|
|
2504
|
-
disabled: ctx.disabled,
|
|
2505
|
-
readOnly: ctx.readOnly,
|
|
2506
|
-
"aria-describedby": describedByParts.join(" ") || void 0,
|
|
2507
|
-
"aria-invalid": ctx.hasError ? "true" : void 0,
|
|
2508
|
-
"aria-required": ctx.required ? "true" : void 0,
|
|
2509
|
-
"data-compa11y-input-field": "",
|
|
2510
|
-
className,
|
|
2511
|
-
style: ctx.unstyled ? style : {
|
|
2512
|
-
width: "100%",
|
|
2513
|
-
padding: "var(--compa11y-input-padding, 0.5rem 0.75rem)",
|
|
2514
|
-
border: ctx.hasError ? "1px solid var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border, 1px solid #ccc)",
|
|
2515
|
-
borderRadius: "var(--compa11y-input-radius, 4px)",
|
|
2516
|
-
fontSize: "var(--compa11y-input-font-size, 0.875rem)",
|
|
2517
|
-
fontFamily: "inherit",
|
|
2518
|
-
background: ctx.disabled ? "var(--compa11y-input-disabled-bg, #f5f5f5)" : ctx.readOnly ? "var(--compa11y-input-readonly-bg, #f9f9f9)" : "var(--compa11y-input-bg, white)",
|
|
2519
|
-
color: "inherit",
|
|
2520
|
-
cursor: ctx.disabled ? "not-allowed" : void 0,
|
|
2521
|
-
opacity: ctx.disabled ? "var(--compa11y-input-disabled-opacity, 0.7)" : void 0,
|
|
2522
|
-
...ctx.isFocusVisible && !ctx.disabled ? {
|
|
2523
|
-
outline: ctx.hasError ? "2px solid var(--compa11y-input-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
2524
|
-
outlineOffset: "-1px",
|
|
2525
|
-
borderColor: ctx.hasError ? "var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border-focus, #0066cc)"
|
|
2526
|
-
} : {},
|
|
2527
|
-
...style
|
|
2528
|
-
},
|
|
2529
|
-
...rest
|
|
2530
|
-
}
|
|
2531
|
-
);
|
|
2532
|
-
}
|
|
2533
|
-
);
|
|
2534
|
-
InputField.displayName = "InputField";
|
|
2535
|
-
var InputHint = react.forwardRef(
|
|
2536
|
-
function InputHint2({ children, className }, ref) {
|
|
2537
|
-
const ctx = useInputContext();
|
|
2538
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2539
|
-
"div",
|
|
2540
|
-
{
|
|
2541
|
-
ref,
|
|
2542
|
-
id: ctx.hintId,
|
|
2543
|
-
"data-compa11y-input-hint": "",
|
|
2544
|
-
className,
|
|
2545
|
-
style: ctx.unstyled ? {} : {
|
|
2546
|
-
color: "var(--compa11y-input-hint-color, #666)",
|
|
2547
|
-
fontSize: "var(--compa11y-input-hint-size, 0.8125rem)"
|
|
2548
|
-
},
|
|
2549
|
-
children
|
|
2550
|
-
}
|
|
2551
|
-
);
|
|
2552
|
-
}
|
|
2553
|
-
);
|
|
2554
|
-
InputHint.displayName = "InputHint";
|
|
2555
|
-
var InputError = react.forwardRef(
|
|
2556
|
-
function InputError2({ children, className }, ref) {
|
|
2557
|
-
const ctx = useInputContext();
|
|
2558
|
-
if (!children) return null;
|
|
2559
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2560
|
-
"div",
|
|
2561
|
-
{
|
|
2562
|
-
ref,
|
|
2563
|
-
id: ctx.errorId,
|
|
2564
|
-
role: "alert",
|
|
2565
|
-
"data-compa11y-input-error": "",
|
|
2566
|
-
className,
|
|
2567
|
-
style: ctx.unstyled ? {} : {
|
|
2568
|
-
color: "var(--compa11y-input-error-color, #ef4444)",
|
|
2569
|
-
fontSize: "var(--compa11y-input-error-size, 0.8125rem)"
|
|
2570
|
-
},
|
|
2571
|
-
children
|
|
2572
|
-
}
|
|
2573
|
-
);
|
|
2574
|
-
}
|
|
2575
|
-
);
|
|
2576
|
-
InputError.displayName = "InputError";
|
|
2577
|
-
var Input = react.forwardRef(
|
|
2578
|
-
function Input2({
|
|
2579
|
-
value: controlledValue,
|
|
2580
|
-
defaultValue = "",
|
|
2581
|
-
onValueChange,
|
|
2582
|
-
type = "text",
|
|
2583
|
-
label,
|
|
2584
|
-
hint,
|
|
2585
|
-
error,
|
|
2586
|
-
required = false,
|
|
2587
|
-
disabled = false,
|
|
2588
|
-
readOnly = false,
|
|
2589
|
-
"aria-label": ariaLabel,
|
|
2590
|
-
"aria-labelledby": ariaLabelledBy,
|
|
2591
|
-
placeholder,
|
|
2592
|
-
name,
|
|
2593
|
-
autoComplete,
|
|
2594
|
-
maxLength,
|
|
2595
|
-
minLength,
|
|
2596
|
-
pattern,
|
|
2597
|
-
inputMode,
|
|
2598
|
-
id: providedId,
|
|
2599
|
-
unstyled = false,
|
|
2600
|
-
className,
|
|
2601
|
-
onFocus: providedOnFocus,
|
|
2602
|
-
onBlur: providedOnBlur,
|
|
2603
|
-
children
|
|
2604
|
-
}, ref) {
|
|
2605
|
-
const generatedId = chunk52J4Z3QD_cjs.useId("input");
|
|
2606
|
-
const baseId = providedId || generatedId;
|
|
2607
|
-
const fieldId = `${baseId}-field`;
|
|
2608
|
-
const labelId = `${baseId}-label`;
|
|
2609
|
-
const hintId = `${baseId}-hint`;
|
|
2610
|
-
const errorId = `${baseId}-error`;
|
|
2611
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
|
|
2612
|
-
const isControlled = controlledValue !== void 0;
|
|
2613
|
-
const currentValue = isControlled ? controlledValue : uncontrolledValue;
|
|
2614
|
-
const setValue = react.useCallback(
|
|
2615
|
-
(newValue) => {
|
|
2616
|
-
if (!isControlled) {
|
|
2617
|
-
setUncontrolledValue(newValue);
|
|
2618
|
-
}
|
|
2619
|
-
onValueChange?.(newValue);
|
|
2620
|
-
},
|
|
2621
|
-
[isControlled, onValueChange]
|
|
2622
|
-
);
|
|
2623
|
-
const { isFocusVisible, focusProps } = useFocusVisible();
|
|
2624
|
-
react.useEffect(() => {
|
|
2625
|
-
if (process.env.NODE_ENV !== "production") {
|
|
2626
|
-
const isCompound2 = react.Children.count(children) > 0;
|
|
2627
|
-
if (!isCompound2 && !label && !ariaLabel && !ariaLabelledBy) {
|
|
2628
|
-
console.warn(
|
|
2629
|
-
"[Compa11y Input]: Input has no accessible label. Screen readers need this to identify the input. Use label prop, aria-label, or aria-labelledby."
|
|
2630
|
-
);
|
|
2631
|
-
}
|
|
2632
|
-
}
|
|
2633
|
-
}, [children, label, ariaLabel, ariaLabelledBy]);
|
|
2634
|
-
const hasError = Boolean(error);
|
|
2635
|
-
const isCompound = react.Children.count(children) > 0;
|
|
2636
|
-
const contextValue = {
|
|
2637
|
-
fieldId,
|
|
2638
|
-
labelId,
|
|
2639
|
-
hintId,
|
|
2640
|
-
errorId,
|
|
2641
|
-
value: currentValue,
|
|
2642
|
-
setValue,
|
|
2643
|
-
hasError,
|
|
2644
|
-
disabled,
|
|
2645
|
-
readOnly,
|
|
2646
|
-
required,
|
|
2647
|
-
isFocusVisible,
|
|
2648
|
-
focusProps,
|
|
2649
|
-
unstyled
|
|
2650
|
-
};
|
|
2651
|
-
const dataAttrs = {
|
|
2652
|
-
"data-compa11y-input": "",
|
|
2653
|
-
"data-error": hasError ? "true" : "false",
|
|
2654
|
-
"data-disabled": disabled ? "true" : "false",
|
|
2655
|
-
"data-required": required ? "true" : "false",
|
|
2656
|
-
"data-readonly": readOnly ? "true" : "false"
|
|
2657
|
-
};
|
|
2658
|
-
const wrapperStyle = unstyled ? {} : {
|
|
2659
|
-
display: "flex",
|
|
2660
|
-
flexDirection: "column",
|
|
2661
|
-
gap: "0.25rem"
|
|
2662
|
-
};
|
|
2663
|
-
if (isCompound) {
|
|
2664
|
-
return /* @__PURE__ */ jsxRuntime.jsx(InputContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...dataAttrs, className, style: wrapperStyle, children }) });
|
|
2665
|
-
}
|
|
2666
|
-
const inputRef = react.useRef(null);
|
|
2667
|
-
const mergedRef = react.useCallback(
|
|
2668
|
-
(node) => {
|
|
2669
|
-
inputRef.current = node;
|
|
2670
|
-
if (typeof ref === "function") {
|
|
2671
|
-
ref(node);
|
|
2672
|
-
} else if (ref) {
|
|
2673
|
-
ref.current = node;
|
|
2674
|
-
}
|
|
2675
|
-
},
|
|
2676
|
-
[ref]
|
|
2677
|
-
);
|
|
2678
|
-
const handleChange = react.useCallback(
|
|
2679
|
-
(event) => {
|
|
2680
|
-
setValue(event.target.value);
|
|
2681
|
-
},
|
|
2682
|
-
[setValue]
|
|
2683
|
-
);
|
|
2684
|
-
const handleFocus = react.useCallback(
|
|
2685
|
-
(event) => {
|
|
2686
|
-
focusProps.onFocus();
|
|
2687
|
-
providedOnFocus?.(event);
|
|
2688
|
-
},
|
|
2689
|
-
[focusProps, providedOnFocus]
|
|
2690
|
-
);
|
|
2691
|
-
const handleBlur = react.useCallback(
|
|
2692
|
-
(event) => {
|
|
2693
|
-
focusProps.onBlur();
|
|
2694
|
-
providedOnBlur?.(event);
|
|
2695
|
-
},
|
|
2696
|
-
[focusProps, providedOnBlur]
|
|
2697
|
-
);
|
|
2698
|
-
const describedByParts = [];
|
|
2699
|
-
if (hint) describedByParts.push(hintId);
|
|
2700
|
-
if (hasError) describedByParts.push(errorId);
|
|
2701
|
-
const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
|
|
2702
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...dataAttrs, className, style: wrapperStyle, children: [
|
|
2703
|
-
label && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2704
|
-
"label",
|
|
2705
|
-
{
|
|
2706
|
-
id: labelId,
|
|
2707
|
-
htmlFor: fieldId,
|
|
2708
|
-
"data-compa11y-input-label": "",
|
|
2709
|
-
style: unstyled ? {} : {
|
|
2710
|
-
display: "block",
|
|
2711
|
-
color: disabled ? "var(--compa11y-input-disabled-color, #999)" : "var(--compa11y-input-label-color, inherit)",
|
|
2712
|
-
fontSize: "var(--compa11y-input-label-size, 0.875rem)",
|
|
2713
|
-
fontWeight: "var(--compa11y-input-label-weight, 500)"
|
|
2714
|
-
},
|
|
2715
|
-
children: [
|
|
2716
|
-
label,
|
|
2717
|
-
required && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2718
|
-
"span",
|
|
2719
|
-
{
|
|
2720
|
-
"data-compa11y-input-required": "",
|
|
2721
|
-
"aria-hidden": "true",
|
|
2722
|
-
style: unstyled ? {} : {
|
|
2723
|
-
color: "var(--compa11y-input-required-color, #ef4444)",
|
|
2724
|
-
marginLeft: "0.125rem"
|
|
2725
|
-
},
|
|
2726
|
-
children: "*"
|
|
2727
|
-
}
|
|
2728
|
-
)
|
|
2729
|
-
]
|
|
2730
|
-
}
|
|
2731
|
-
),
|
|
2732
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2733
|
-
"input",
|
|
2734
|
-
{
|
|
2735
|
-
ref: mergedRef,
|
|
2736
|
-
id: fieldId,
|
|
2737
|
-
type,
|
|
2738
|
-
value: currentValue,
|
|
2739
|
-
onChange: handleChange,
|
|
2740
|
-
onFocus: handleFocus,
|
|
2741
|
-
onBlur: handleBlur,
|
|
2742
|
-
disabled,
|
|
2743
|
-
readOnly,
|
|
2744
|
-
required,
|
|
2745
|
-
placeholder,
|
|
2746
|
-
name,
|
|
2747
|
-
autoComplete,
|
|
2748
|
-
maxLength,
|
|
2749
|
-
minLength,
|
|
2750
|
-
pattern,
|
|
2751
|
-
inputMode,
|
|
2752
|
-
"aria-label": !label ? ariaLabel : void 0,
|
|
2753
|
-
"aria-labelledby": !label && ariaLabelledBy ? ariaLabelledBy : label ? labelId : void 0,
|
|
2754
|
-
"aria-describedby": ariaDescribedBy,
|
|
2755
|
-
"aria-invalid": hasError ? "true" : void 0,
|
|
2756
|
-
"aria-required": required ? "true" : void 0,
|
|
2757
|
-
"data-compa11y-input-field": "",
|
|
2758
|
-
style: unstyled ? {} : {
|
|
2759
|
-
width: "100%",
|
|
2760
|
-
padding: "var(--compa11y-input-padding, 0.5rem 0.75rem)",
|
|
2761
|
-
border: hasError ? "1px solid var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border, 1px solid #ccc)",
|
|
2762
|
-
borderRadius: "var(--compa11y-input-radius, 4px)",
|
|
2763
|
-
fontSize: "var(--compa11y-input-font-size, 0.875rem)",
|
|
2764
|
-
fontFamily: "inherit",
|
|
2765
|
-
background: disabled ? "var(--compa11y-input-disabled-bg, #f5f5f5)" : readOnly ? "var(--compa11y-input-readonly-bg, #f9f9f9)" : "var(--compa11y-input-bg, white)",
|
|
2766
|
-
color: "inherit",
|
|
2767
|
-
cursor: disabled ? "not-allowed" : void 0,
|
|
2768
|
-
opacity: disabled ? "var(--compa11y-input-disabled-opacity, 0.7)" : void 0,
|
|
2769
|
-
...isFocusVisible && !disabled ? {
|
|
2770
|
-
outline: hasError ? "2px solid var(--compa11y-input-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
2771
|
-
outlineOffset: "-1px",
|
|
2772
|
-
borderColor: hasError ? "var(--compa11y-input-border-error, #ef4444)" : "var(--compa11y-input-border-focus, #0066cc)"
|
|
2773
|
-
} : {}
|
|
2774
|
-
}
|
|
2775
|
-
}
|
|
2776
|
-
),
|
|
2777
|
-
hint && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2778
|
-
"div",
|
|
2779
|
-
{
|
|
2780
|
-
id: hintId,
|
|
2781
|
-
"data-compa11y-input-hint": "",
|
|
2782
|
-
style: unstyled ? {} : {
|
|
2783
|
-
color: "var(--compa11y-input-hint-color, #666)",
|
|
2784
|
-
fontSize: "var(--compa11y-input-hint-size, 0.8125rem)"
|
|
2785
|
-
},
|
|
2786
|
-
children: hint
|
|
2787
|
-
}
|
|
2788
|
-
),
|
|
2789
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2790
|
-
"div",
|
|
2791
|
-
{
|
|
2792
|
-
id: errorId,
|
|
2793
|
-
role: "alert",
|
|
2794
|
-
"data-compa11y-input-error": "",
|
|
2795
|
-
style: unstyled ? {} : {
|
|
2796
|
-
color: "var(--compa11y-input-error-color, #ef4444)",
|
|
2797
|
-
fontSize: "var(--compa11y-input-error-size, 0.8125rem)"
|
|
2798
|
-
},
|
|
2799
|
-
children: error
|
|
2800
|
-
}
|
|
2801
|
-
)
|
|
2802
|
-
] });
|
|
2803
|
-
}
|
|
2804
|
-
);
|
|
2805
|
-
Input.displayName = "Input";
|
|
2806
|
-
var InputCompound = Object.assign(Input, {
|
|
2807
|
-
Label: InputLabel,
|
|
2808
|
-
Field: InputField,
|
|
2809
|
-
Hint: InputHint,
|
|
2810
|
-
Error: InputError
|
|
2811
|
-
});
|
|
2812
|
-
var VARIANT_STYLES = {
|
|
2813
|
-
primary: {
|
|
2814
|
-
background: "var(--compa11y-button-primary-bg, #0066cc)",
|
|
2815
|
-
color: "var(--compa11y-button-primary-color, white)",
|
|
2816
|
-
border: "var(--compa11y-button-primary-border, 1px solid #0066cc)"
|
|
2817
|
-
},
|
|
2818
|
-
secondary: {
|
|
2819
|
-
background: "var(--compa11y-button-secondary-bg, white)",
|
|
2820
|
-
color: "var(--compa11y-button-secondary-color, #333)",
|
|
2821
|
-
border: "var(--compa11y-button-secondary-border, 1px solid #ccc)"
|
|
2822
|
-
},
|
|
2823
|
-
danger: {
|
|
2824
|
-
background: "var(--compa11y-button-danger-bg, #ef4444)",
|
|
2825
|
-
color: "var(--compa11y-button-danger-color, white)",
|
|
2826
|
-
border: "var(--compa11y-button-danger-border, 1px solid #ef4444)"
|
|
2827
|
-
},
|
|
2828
|
-
outline: {
|
|
2829
|
-
background: "var(--compa11y-button-outline-bg, transparent)",
|
|
2830
|
-
color: "var(--compa11y-button-outline-color, #0066cc)",
|
|
2831
|
-
border: "var(--compa11y-button-outline-border, 1px solid #0066cc)"
|
|
2832
|
-
},
|
|
2833
|
-
ghost: {
|
|
2834
|
-
background: "var(--compa11y-button-ghost-bg, transparent)",
|
|
2835
|
-
color: "var(--compa11y-button-ghost-color, #333)",
|
|
2836
|
-
border: "var(--compa11y-button-ghost-border, 1px solid transparent)"
|
|
2837
|
-
}
|
|
2838
|
-
};
|
|
2839
|
-
var SIZE_STYLES = {
|
|
2840
|
-
sm: {
|
|
2841
|
-
padding: "var(--compa11y-button-padding-sm, 0.25rem 0.5rem)",
|
|
2842
|
-
fontSize: "var(--compa11y-button-font-size-sm, 0.75rem)"
|
|
2843
|
-
},
|
|
2844
|
-
md: {
|
|
2845
|
-
padding: "var(--compa11y-button-padding-md, 0.5rem 1rem)",
|
|
2846
|
-
fontSize: "var(--compa11y-button-font-size-md, 0.875rem)"
|
|
2847
|
-
},
|
|
2848
|
-
lg: {
|
|
2849
|
-
padding: "var(--compa11y-button-padding-lg, 0.75rem 1.5rem)",
|
|
2850
|
-
fontSize: "var(--compa11y-button-font-size-lg, 1rem)"
|
|
2851
|
-
}
|
|
2852
|
-
};
|
|
2853
|
-
var Button = react.forwardRef(
|
|
2854
|
-
function Button2({
|
|
2855
|
-
variant = "secondary",
|
|
2856
|
-
size = "md",
|
|
2857
|
-
type = "button",
|
|
2858
|
-
disabled = false,
|
|
2859
|
-
discoverable = false,
|
|
2860
|
-
loading = false,
|
|
2861
|
-
unstyled = false,
|
|
2862
|
-
"aria-label": ariaLabel,
|
|
2863
|
-
className,
|
|
2864
|
-
style,
|
|
2865
|
-
onClick,
|
|
2866
|
-
onFocus: providedOnFocus,
|
|
2867
|
-
onBlur: providedOnBlur,
|
|
2868
|
-
children,
|
|
2869
|
-
...rest
|
|
2870
|
-
}, ref) {
|
|
2871
|
-
const generatedId = chunk52J4Z3QD_cjs.useId("button");
|
|
2872
|
-
const buttonRef = react.useRef(null);
|
|
2873
|
-
const mergedRef = react.useCallback(
|
|
2874
|
-
(node) => {
|
|
2875
|
-
buttonRef.current = node;
|
|
2876
|
-
if (typeof ref === "function") {
|
|
2877
|
-
ref(node);
|
|
2878
|
-
} else if (ref) {
|
|
2879
|
-
ref.current = node;
|
|
2880
|
-
}
|
|
2881
|
-
},
|
|
2882
|
-
[ref]
|
|
2883
|
-
);
|
|
2884
|
-
const { isFocusVisible, focusProps } = useFocusVisible();
|
|
2885
|
-
react.useEffect(() => {
|
|
2886
|
-
if (process.env.NODE_ENV !== "production") {
|
|
2887
|
-
if (!children && !ariaLabel && !rest["aria-labelledby"]) {
|
|
2888
|
-
console.warn(
|
|
2889
|
-
"[Compa11y Button]: Button has no accessible label. Screen readers need this to identify the button. Add text content, aria-label, or aria-labelledby."
|
|
2890
|
-
);
|
|
2891
|
-
}
|
|
2892
|
-
}
|
|
2893
|
-
}, [children, ariaLabel, rest["aria-labelledby"]]);
|
|
2894
|
-
const useNativeDisabled = disabled && !discoverable;
|
|
2895
|
-
const isInteractionDisabled = disabled || loading;
|
|
2896
|
-
const handleClick = react.useCallback(
|
|
2897
|
-
(event) => {
|
|
2898
|
-
if (isInteractionDisabled) {
|
|
2899
|
-
event.preventDefault();
|
|
2900
|
-
return;
|
|
2901
|
-
}
|
|
2902
|
-
onClick?.(event);
|
|
2903
|
-
},
|
|
2904
|
-
[isInteractionDisabled, onClick]
|
|
2905
|
-
);
|
|
2906
|
-
const handleFocus = react.useCallback(
|
|
2907
|
-
(event) => {
|
|
2908
|
-
focusProps.onFocus();
|
|
2909
|
-
providedOnFocus?.(event);
|
|
2910
|
-
},
|
|
2911
|
-
[focusProps, providedOnFocus]
|
|
2912
|
-
);
|
|
2913
|
-
const handleBlur = react.useCallback(
|
|
2914
|
-
(event) => {
|
|
2915
|
-
focusProps.onBlur();
|
|
2916
|
-
providedOnBlur?.(event);
|
|
2917
|
-
},
|
|
2918
|
-
[focusProps, providedOnBlur]
|
|
2919
|
-
);
|
|
2920
|
-
const dataAttrs = {
|
|
2921
|
-
"data-compa11y-button": "",
|
|
2922
|
-
"data-variant": variant,
|
|
2923
|
-
"data-size": size,
|
|
2924
|
-
"data-disabled": disabled ? "true" : "false",
|
|
2925
|
-
"data-loading": loading ? "true" : "false"
|
|
2926
|
-
};
|
|
2927
|
-
const baseStyle = unstyled ? {} : {
|
|
2928
|
-
display: "inline-flex",
|
|
2929
|
-
alignItems: "center",
|
|
2930
|
-
justifyContent: "center",
|
|
2931
|
-
gap: "0.5rem",
|
|
2932
|
-
borderRadius: "var(--compa11y-button-radius, 4px)",
|
|
2933
|
-
fontFamily: "inherit",
|
|
2934
|
-
fontWeight: "var(--compa11y-button-font-weight, 500)",
|
|
2935
|
-
lineHeight: "1.5",
|
|
2936
|
-
cursor: isInteractionDisabled ? "not-allowed" : "pointer",
|
|
2937
|
-
opacity: disabled ? "var(--compa11y-button-disabled-opacity, 0.5)" : void 0,
|
|
2938
|
-
transition: "background-color 0.15s ease, border-color 0.15s ease",
|
|
2939
|
-
...VARIANT_STYLES[variant],
|
|
2940
|
-
...SIZE_STYLES[size],
|
|
2941
|
-
...isFocusVisible && !useNativeDisabled ? {
|
|
2942
|
-
outline: "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
2943
|
-
outlineOffset: "2px"
|
|
2944
|
-
} : {}
|
|
2945
|
-
};
|
|
2946
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2947
|
-
"button",
|
|
2948
|
-
{
|
|
2949
|
-
ref: mergedRef,
|
|
2950
|
-
id: generatedId,
|
|
2951
|
-
type,
|
|
2952
|
-
disabled: useNativeDisabled,
|
|
2953
|
-
tabIndex: disabled && !discoverable ? void 0 : 0,
|
|
2954
|
-
"aria-disabled": isInteractionDisabled ? "true" : void 0,
|
|
2955
|
-
"aria-busy": loading ? "true" : void 0,
|
|
2956
|
-
"aria-label": ariaLabel,
|
|
2957
|
-
onClick: handleClick,
|
|
2958
|
-
onFocus: handleFocus,
|
|
2959
|
-
onBlur: handleBlur,
|
|
2960
|
-
className,
|
|
2961
|
-
style: { ...baseStyle, ...style },
|
|
2962
|
-
...dataAttrs,
|
|
2963
|
-
...rest,
|
|
2964
|
-
children: [
|
|
2965
|
-
loading && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2966
|
-
"span",
|
|
2967
|
-
{
|
|
2968
|
-
"data-compa11y-button-spinner": "",
|
|
2969
|
-
"aria-hidden": "true",
|
|
2970
|
-
style: unstyled ? {} : {
|
|
2971
|
-
display: "inline-block",
|
|
2972
|
-
width: "1em",
|
|
2973
|
-
height: "1em",
|
|
2974
|
-
border: "2px solid currentColor",
|
|
2975
|
-
borderRightColor: "transparent",
|
|
2976
|
-
borderRadius: "50%",
|
|
2977
|
-
animation: "compa11y-spin 0.6s linear infinite"
|
|
2978
|
-
}
|
|
2979
|
-
}
|
|
2980
|
-
),
|
|
2981
|
-
children
|
|
2982
|
-
]
|
|
2983
|
-
}
|
|
2984
|
-
);
|
|
2985
|
-
}
|
|
2986
|
-
);
|
|
2987
|
-
Button.displayName = "Button";
|
|
2988
|
-
var TextareaContext = react.createContext(null);
|
|
2989
|
-
function useTextareaContext() {
|
|
2990
|
-
const ctx = react.useContext(TextareaContext);
|
|
2991
|
-
if (!ctx) {
|
|
2992
|
-
throw new Error(
|
|
2993
|
-
"[Compa11y Textarea]: Textarea sub-components (Textarea.Label, Textarea.Field, etc.) must be used within <Textarea>."
|
|
2994
|
-
);
|
|
2995
|
-
}
|
|
2996
|
-
return ctx;
|
|
2997
|
-
}
|
|
2998
|
-
var TextareaLabel = react.forwardRef(
|
|
2999
|
-
function TextareaLabel2({ children, className }, ref) {
|
|
3000
|
-
const ctx = useTextareaContext();
|
|
3001
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3002
|
-
"label",
|
|
3003
|
-
{
|
|
3004
|
-
ref,
|
|
3005
|
-
id: ctx.labelId,
|
|
3006
|
-
htmlFor: ctx.fieldId,
|
|
3007
|
-
"data-compa11y-textarea-label": "",
|
|
3008
|
-
className,
|
|
3009
|
-
style: ctx.unstyled ? {} : {
|
|
3010
|
-
display: "block",
|
|
3011
|
-
color: ctx.disabled ? "var(--compa11y-textarea-disabled-color, #999)" : "var(--compa11y-textarea-label-color, inherit)",
|
|
3012
|
-
fontSize: "var(--compa11y-textarea-label-size, 0.875rem)",
|
|
3013
|
-
fontWeight: "var(--compa11y-textarea-label-weight, 500)"
|
|
3014
|
-
},
|
|
3015
|
-
children: [
|
|
3016
|
-
children,
|
|
3017
|
-
ctx.required && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3018
|
-
"span",
|
|
3019
|
-
{
|
|
3020
|
-
"data-compa11y-textarea-required": "",
|
|
3021
|
-
"aria-hidden": "true",
|
|
3022
|
-
style: ctx.unstyled ? {} : {
|
|
3023
|
-
color: "var(--compa11y-textarea-required-color, #ef4444)",
|
|
3024
|
-
marginLeft: "0.125rem"
|
|
3025
|
-
},
|
|
3026
|
-
children: "*"
|
|
3027
|
-
}
|
|
3028
|
-
)
|
|
3029
|
-
]
|
|
3030
|
-
}
|
|
3031
|
-
);
|
|
3032
|
-
}
|
|
3033
|
-
);
|
|
3034
|
-
TextareaLabel.displayName = "TextareaLabel";
|
|
3035
|
-
var TextareaField = react.forwardRef(
|
|
3036
|
-
function TextareaField2({
|
|
3037
|
-
onFocus: providedOnFocus,
|
|
3038
|
-
onBlur: providedOnBlur,
|
|
3039
|
-
className,
|
|
3040
|
-
style,
|
|
3041
|
-
rows: rowsOverride,
|
|
3042
|
-
...rest
|
|
3043
|
-
}, ref) {
|
|
3044
|
-
const ctx = useTextareaContext();
|
|
3045
|
-
const textareaRef = react.useRef(null);
|
|
3046
|
-
const mergedRef = react.useCallback(
|
|
3047
|
-
(node) => {
|
|
3048
|
-
textareaRef.current = node;
|
|
3049
|
-
if (typeof ref === "function") {
|
|
3050
|
-
ref(node);
|
|
3051
|
-
} else if (ref) {
|
|
3052
|
-
ref.current = node;
|
|
3053
|
-
}
|
|
3054
|
-
},
|
|
3055
|
-
[ref]
|
|
3056
|
-
);
|
|
3057
|
-
const handleChange = react.useCallback(
|
|
3058
|
-
(event) => {
|
|
3059
|
-
ctx.setValue(event.target.value);
|
|
3060
|
-
},
|
|
3061
|
-
[ctx.setValue]
|
|
3062
|
-
);
|
|
3063
|
-
const handleFocus = react.useCallback(
|
|
3064
|
-
(event) => {
|
|
3065
|
-
ctx.focusProps.onFocus();
|
|
3066
|
-
providedOnFocus?.(event);
|
|
3067
|
-
},
|
|
3068
|
-
[ctx.focusProps, providedOnFocus]
|
|
3069
|
-
);
|
|
3070
|
-
const handleBlur = react.useCallback(
|
|
3071
|
-
(event) => {
|
|
3072
|
-
ctx.focusProps.onBlur();
|
|
3073
|
-
providedOnBlur?.(event);
|
|
3074
|
-
},
|
|
3075
|
-
[ctx.focusProps, providedOnBlur]
|
|
3076
|
-
);
|
|
3077
|
-
const describedByParts = [];
|
|
3078
|
-
describedByParts.push(ctx.hintId);
|
|
3079
|
-
if (ctx.hasError) {
|
|
3080
|
-
describedByParts.push(ctx.errorId);
|
|
3081
|
-
}
|
|
3082
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3083
|
-
"textarea",
|
|
3084
|
-
{
|
|
3085
|
-
ref: mergedRef,
|
|
3086
|
-
id: ctx.fieldId,
|
|
3087
|
-
rows: rowsOverride ?? ctx.rows,
|
|
3088
|
-
value: ctx.value,
|
|
3089
|
-
onChange: handleChange,
|
|
3090
|
-
onFocus: handleFocus,
|
|
3091
|
-
onBlur: handleBlur,
|
|
3092
|
-
disabled: ctx.disabled,
|
|
3093
|
-
readOnly: ctx.readOnly,
|
|
3094
|
-
"aria-describedby": describedByParts.join(" ") || void 0,
|
|
3095
|
-
"aria-invalid": ctx.hasError ? "true" : void 0,
|
|
3096
|
-
"aria-required": ctx.required ? "true" : void 0,
|
|
3097
|
-
"data-compa11y-textarea-field": "",
|
|
3098
|
-
className,
|
|
3099
|
-
style: ctx.unstyled ? style : {
|
|
3100
|
-
width: "100%",
|
|
3101
|
-
padding: "var(--compa11y-textarea-padding, 0.5rem 0.75rem)",
|
|
3102
|
-
border: ctx.hasError ? "1px solid var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border, 1px solid #ccc)",
|
|
3103
|
-
borderRadius: "var(--compa11y-textarea-radius, 4px)",
|
|
3104
|
-
fontSize: "var(--compa11y-textarea-font-size, 0.875rem)",
|
|
3105
|
-
fontFamily: "inherit",
|
|
3106
|
-
lineHeight: "1.5",
|
|
3107
|
-
resize: ctx.resize,
|
|
3108
|
-
background: ctx.disabled ? "var(--compa11y-textarea-disabled-bg, #f5f5f5)" : ctx.readOnly ? "var(--compa11y-textarea-readonly-bg, #f9f9f9)" : "var(--compa11y-textarea-bg, white)",
|
|
3109
|
-
color: "inherit",
|
|
3110
|
-
cursor: ctx.disabled ? "not-allowed" : void 0,
|
|
3111
|
-
opacity: ctx.disabled ? "var(--compa11y-textarea-disabled-opacity, 0.7)" : void 0,
|
|
3112
|
-
...ctx.isFocusVisible && !ctx.disabled ? {
|
|
3113
|
-
outline: ctx.hasError ? "2px solid var(--compa11y-textarea-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
3114
|
-
outlineOffset: "-1px",
|
|
3115
|
-
borderColor: ctx.hasError ? "var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border-focus, #0066cc)"
|
|
3116
|
-
} : {},
|
|
3117
|
-
...style
|
|
3118
|
-
},
|
|
3119
|
-
...rest
|
|
3120
|
-
}
|
|
3121
|
-
);
|
|
3122
|
-
}
|
|
3123
|
-
);
|
|
3124
|
-
TextareaField.displayName = "TextareaField";
|
|
3125
|
-
var TextareaHint = react.forwardRef(
|
|
3126
|
-
function TextareaHint2({ children, className }, ref) {
|
|
3127
|
-
const ctx = useTextareaContext();
|
|
3128
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3129
|
-
"div",
|
|
3130
|
-
{
|
|
3131
|
-
ref,
|
|
3132
|
-
id: ctx.hintId,
|
|
3133
|
-
"data-compa11y-textarea-hint": "",
|
|
3134
|
-
className,
|
|
3135
|
-
style: ctx.unstyled ? {} : {
|
|
3136
|
-
color: "var(--compa11y-textarea-hint-color, #666)",
|
|
3137
|
-
fontSize: "var(--compa11y-textarea-hint-size, 0.8125rem)"
|
|
3138
|
-
},
|
|
3139
|
-
children
|
|
3140
|
-
}
|
|
3141
|
-
);
|
|
3142
|
-
}
|
|
3143
|
-
);
|
|
3144
|
-
TextareaHint.displayName = "TextareaHint";
|
|
3145
|
-
var TextareaError = react.forwardRef(
|
|
3146
|
-
function TextareaError2({ children, className }, ref) {
|
|
3147
|
-
const ctx = useTextareaContext();
|
|
3148
|
-
if (!children) return null;
|
|
3149
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3150
|
-
"div",
|
|
3151
|
-
{
|
|
3152
|
-
ref,
|
|
3153
|
-
id: ctx.errorId,
|
|
3154
|
-
role: "alert",
|
|
3155
|
-
"data-compa11y-textarea-error": "",
|
|
3156
|
-
className,
|
|
3157
|
-
style: ctx.unstyled ? {} : {
|
|
3158
|
-
color: "var(--compa11y-textarea-error-color, #ef4444)",
|
|
3159
|
-
fontSize: "var(--compa11y-textarea-error-size, 0.8125rem)"
|
|
3160
|
-
},
|
|
3161
|
-
children
|
|
3162
|
-
}
|
|
3163
|
-
);
|
|
3164
|
-
}
|
|
3165
|
-
);
|
|
3166
|
-
TextareaError.displayName = "TextareaError";
|
|
3167
|
-
var Textarea = react.forwardRef(
|
|
3168
|
-
function Textarea2({
|
|
3169
|
-
value: controlledValue,
|
|
3170
|
-
defaultValue = "",
|
|
3171
|
-
onValueChange,
|
|
3172
|
-
rows = 3,
|
|
3173
|
-
resize = "vertical",
|
|
3174
|
-
label,
|
|
3175
|
-
hint,
|
|
3176
|
-
error,
|
|
3177
|
-
required = false,
|
|
3178
|
-
disabled = false,
|
|
3179
|
-
readOnly = false,
|
|
3180
|
-
"aria-label": ariaLabel,
|
|
3181
|
-
"aria-labelledby": ariaLabelledBy,
|
|
3182
|
-
placeholder,
|
|
3183
|
-
name,
|
|
3184
|
-
autoComplete,
|
|
3185
|
-
maxLength,
|
|
3186
|
-
minLength,
|
|
3187
|
-
id: providedId,
|
|
3188
|
-
unstyled = false,
|
|
3189
|
-
className,
|
|
3190
|
-
onFocus: providedOnFocus,
|
|
3191
|
-
onBlur: providedOnBlur,
|
|
3192
|
-
children
|
|
3193
|
-
}, ref) {
|
|
3194
|
-
const generatedId = chunk52J4Z3QD_cjs.useId("textarea");
|
|
3195
|
-
const baseId = providedId || generatedId;
|
|
3196
|
-
const fieldId = `${baseId}-field`;
|
|
3197
|
-
const labelId = `${baseId}-label`;
|
|
3198
|
-
const hintId = `${baseId}-hint`;
|
|
3199
|
-
const errorId = `${baseId}-error`;
|
|
3200
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
|
|
3201
|
-
const isControlled = controlledValue !== void 0;
|
|
3202
|
-
const currentValue = isControlled ? controlledValue : uncontrolledValue;
|
|
3203
|
-
const setValue = react.useCallback(
|
|
3204
|
-
(newValue) => {
|
|
3205
|
-
if (!isControlled) {
|
|
3206
|
-
setUncontrolledValue(newValue);
|
|
3207
|
-
}
|
|
3208
|
-
onValueChange?.(newValue);
|
|
3209
|
-
},
|
|
3210
|
-
[isControlled, onValueChange]
|
|
3211
|
-
);
|
|
3212
|
-
const { isFocusVisible, focusProps } = useFocusVisible();
|
|
3213
|
-
react.useEffect(() => {
|
|
3214
|
-
if (process.env.NODE_ENV !== "production") {
|
|
3215
|
-
const isCompound2 = react.Children.count(children) > 0;
|
|
3216
|
-
if (!isCompound2 && !label && !ariaLabel && !ariaLabelledBy) {
|
|
3217
|
-
console.warn(
|
|
3218
|
-
"[Compa11y Textarea]: Textarea has no accessible label. Screen readers need this to identify the textarea. Use label prop, aria-label, or aria-labelledby."
|
|
3219
|
-
);
|
|
3220
|
-
}
|
|
3221
|
-
}
|
|
3222
|
-
}, [children, label, ariaLabel, ariaLabelledBy]);
|
|
3223
|
-
const hasError = Boolean(error);
|
|
3224
|
-
const isCompound = react.Children.count(children) > 0;
|
|
3225
|
-
const contextValue = {
|
|
3226
|
-
fieldId,
|
|
3227
|
-
labelId,
|
|
3228
|
-
hintId,
|
|
3229
|
-
errorId,
|
|
3230
|
-
value: currentValue,
|
|
3231
|
-
setValue,
|
|
3232
|
-
hasError,
|
|
3233
|
-
disabled,
|
|
3234
|
-
readOnly,
|
|
3235
|
-
required,
|
|
3236
|
-
rows,
|
|
3237
|
-
resize,
|
|
3238
|
-
isFocusVisible,
|
|
3239
|
-
focusProps,
|
|
3240
|
-
unstyled
|
|
3241
|
-
};
|
|
3242
|
-
const dataAttrs = {
|
|
3243
|
-
"data-compa11y-textarea": "",
|
|
3244
|
-
"data-error": hasError ? "true" : "false",
|
|
3245
|
-
"data-disabled": disabled ? "true" : "false",
|
|
3246
|
-
"data-required": required ? "true" : "false",
|
|
3247
|
-
"data-readonly": readOnly ? "true" : "false"
|
|
3248
|
-
};
|
|
3249
|
-
const wrapperStyle = unstyled ? {} : {
|
|
3250
|
-
display: "flex",
|
|
3251
|
-
flexDirection: "column",
|
|
3252
|
-
gap: "0.25rem"
|
|
3253
|
-
};
|
|
3254
|
-
if (isCompound) {
|
|
3255
|
-
return /* @__PURE__ */ jsxRuntime.jsx(TextareaContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...dataAttrs, className, style: wrapperStyle, children }) });
|
|
3256
|
-
}
|
|
3257
|
-
const textareaRef = react.useRef(null);
|
|
3258
|
-
const mergedRef = react.useCallback(
|
|
3259
|
-
(node) => {
|
|
3260
|
-
textareaRef.current = node;
|
|
3261
|
-
if (typeof ref === "function") {
|
|
3262
|
-
ref(node);
|
|
3263
|
-
} else if (ref) {
|
|
3264
|
-
ref.current = node;
|
|
3265
|
-
}
|
|
3266
|
-
},
|
|
3267
|
-
[ref]
|
|
3268
|
-
);
|
|
3269
|
-
const handleChange = react.useCallback(
|
|
3270
|
-
(event) => {
|
|
3271
|
-
setValue(event.target.value);
|
|
3272
|
-
},
|
|
3273
|
-
[setValue]
|
|
3274
|
-
);
|
|
3275
|
-
const handleFocus = react.useCallback(
|
|
3276
|
-
(event) => {
|
|
3277
|
-
focusProps.onFocus();
|
|
3278
|
-
providedOnFocus?.(event);
|
|
3279
|
-
},
|
|
3280
|
-
[focusProps, providedOnFocus]
|
|
3281
|
-
);
|
|
3282
|
-
const handleBlur = react.useCallback(
|
|
3283
|
-
(event) => {
|
|
3284
|
-
focusProps.onBlur();
|
|
3285
|
-
providedOnBlur?.(event);
|
|
3286
|
-
},
|
|
3287
|
-
[focusProps, providedOnBlur]
|
|
3288
|
-
);
|
|
3289
|
-
const describedByParts = [];
|
|
3290
|
-
if (hint) describedByParts.push(hintId);
|
|
3291
|
-
if (hasError) describedByParts.push(errorId);
|
|
3292
|
-
const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
|
|
3293
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...dataAttrs, className, style: wrapperStyle, children: [
|
|
3294
|
-
label && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3295
|
-
"label",
|
|
3296
|
-
{
|
|
3297
|
-
id: labelId,
|
|
3298
|
-
htmlFor: fieldId,
|
|
3299
|
-
"data-compa11y-textarea-label": "",
|
|
3300
|
-
style: unstyled ? {} : {
|
|
3301
|
-
display: "block",
|
|
3302
|
-
color: disabled ? "var(--compa11y-textarea-disabled-color, #999)" : "var(--compa11y-textarea-label-color, inherit)",
|
|
3303
|
-
fontSize: "var(--compa11y-textarea-label-size, 0.875rem)",
|
|
3304
|
-
fontWeight: "var(--compa11y-textarea-label-weight, 500)"
|
|
3305
|
-
},
|
|
3306
|
-
children: [
|
|
3307
|
-
label,
|
|
3308
|
-
required && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3309
|
-
"span",
|
|
3310
|
-
{
|
|
3311
|
-
"data-compa11y-textarea-required": "",
|
|
3312
|
-
"aria-hidden": "true",
|
|
3313
|
-
style: unstyled ? {} : {
|
|
3314
|
-
color: "var(--compa11y-textarea-required-color, #ef4444)",
|
|
3315
|
-
marginLeft: "0.125rem"
|
|
3316
|
-
},
|
|
3317
|
-
children: "*"
|
|
3318
|
-
}
|
|
3319
|
-
)
|
|
3320
|
-
]
|
|
3321
|
-
}
|
|
3322
|
-
),
|
|
3323
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3324
|
-
"textarea",
|
|
3325
|
-
{
|
|
3326
|
-
ref: mergedRef,
|
|
3327
|
-
id: fieldId,
|
|
3328
|
-
rows,
|
|
3329
|
-
value: currentValue,
|
|
3330
|
-
onChange: handleChange,
|
|
3331
|
-
onFocus: handleFocus,
|
|
3332
|
-
onBlur: handleBlur,
|
|
3333
|
-
disabled,
|
|
3334
|
-
readOnly,
|
|
3335
|
-
required,
|
|
3336
|
-
placeholder,
|
|
3337
|
-
name,
|
|
3338
|
-
autoComplete,
|
|
3339
|
-
maxLength,
|
|
3340
|
-
minLength,
|
|
3341
|
-
"aria-label": !label ? ariaLabel : void 0,
|
|
3342
|
-
"aria-labelledby": !label && ariaLabelledBy ? ariaLabelledBy : label ? labelId : void 0,
|
|
3343
|
-
"aria-describedby": ariaDescribedBy,
|
|
3344
|
-
"aria-invalid": hasError ? "true" : void 0,
|
|
3345
|
-
"aria-required": required ? "true" : void 0,
|
|
3346
|
-
"data-compa11y-textarea-field": "",
|
|
3347
|
-
style: unstyled ? {} : {
|
|
3348
|
-
width: "100%",
|
|
3349
|
-
padding: "var(--compa11y-textarea-padding, 0.5rem 0.75rem)",
|
|
3350
|
-
border: hasError ? "1px solid var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border, 1px solid #ccc)",
|
|
3351
|
-
borderRadius: "var(--compa11y-textarea-radius, 4px)",
|
|
3352
|
-
fontSize: "var(--compa11y-textarea-font-size, 0.875rem)",
|
|
3353
|
-
fontFamily: "inherit",
|
|
3354
|
-
lineHeight: "1.5",
|
|
3355
|
-
resize,
|
|
3356
|
-
background: disabled ? "var(--compa11y-textarea-disabled-bg, #f5f5f5)" : readOnly ? "var(--compa11y-textarea-readonly-bg, #f9f9f9)" : "var(--compa11y-textarea-bg, white)",
|
|
3357
|
-
color: "inherit",
|
|
3358
|
-
cursor: disabled ? "not-allowed" : void 0,
|
|
3359
|
-
opacity: disabled ? "var(--compa11y-textarea-disabled-opacity, 0.7)" : void 0,
|
|
3360
|
-
...isFocusVisible && !disabled ? {
|
|
3361
|
-
outline: hasError ? "2px solid var(--compa11y-textarea-border-error, #ef4444)" : "2px solid var(--compa11y-focus-color, #0066cc)",
|
|
3362
|
-
outlineOffset: "-1px",
|
|
3363
|
-
borderColor: hasError ? "var(--compa11y-textarea-border-error, #ef4444)" : "var(--compa11y-textarea-border-focus, #0066cc)"
|
|
3364
|
-
} : {}
|
|
3365
|
-
}
|
|
3366
|
-
}
|
|
3367
|
-
),
|
|
3368
|
-
hint && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3369
|
-
"div",
|
|
3370
|
-
{
|
|
3371
|
-
id: hintId,
|
|
3372
|
-
"data-compa11y-textarea-hint": "",
|
|
3373
|
-
style: unstyled ? {} : {
|
|
3374
|
-
color: "var(--compa11y-textarea-hint-color, #666)",
|
|
3375
|
-
fontSize: "var(--compa11y-textarea-hint-size, 0.8125rem)"
|
|
3376
|
-
},
|
|
3377
|
-
children: hint
|
|
3378
|
-
}
|
|
3379
|
-
),
|
|
3380
|
-
hasError && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3381
|
-
"div",
|
|
3382
|
-
{
|
|
3383
|
-
id: errorId,
|
|
3384
|
-
role: "alert",
|
|
3385
|
-
"data-compa11y-textarea-error": "",
|
|
3386
|
-
style: unstyled ? {} : {
|
|
3387
|
-
color: "var(--compa11y-textarea-error-color, #ef4444)",
|
|
3388
|
-
fontSize: "var(--compa11y-textarea-error-size, 0.8125rem)"
|
|
3389
|
-
},
|
|
3390
|
-
children: error
|
|
3391
|
-
}
|
|
3392
|
-
)
|
|
3393
|
-
] });
|
|
3394
|
-
}
|
|
3395
|
-
);
|
|
3396
|
-
Textarea.displayName = "Textarea";
|
|
3397
|
-
var TextareaCompound = Object.assign(Textarea, {
|
|
3398
|
-
Label: TextareaLabel,
|
|
3399
|
-
Field: TextareaField,
|
|
3400
|
-
Hint: TextareaHint,
|
|
3401
|
-
Error: TextareaError
|
|
3402
|
-
});
|
|
3403
|
-
|
|
3404
|
-
Object.defineProperty(exports, "Dialog", {
|
|
3405
|
-
enumerable: true,
|
|
3406
|
-
get: function () { return chunkIR46CNNY_cjs.DialogCompound; }
|
|
3407
|
-
});
|
|
3408
|
-
Object.defineProperty(exports, "DialogActions", {
|
|
3409
|
-
enumerable: true,
|
|
3410
|
-
get: function () { return chunkIR46CNNY_cjs.DialogActions; }
|
|
3411
|
-
});
|
|
3412
|
-
Object.defineProperty(exports, "DialogBase", {
|
|
3413
|
-
enumerable: true,
|
|
3414
|
-
get: function () { return chunkIR46CNNY_cjs.Dialog; }
|
|
3415
|
-
});
|
|
3416
|
-
Object.defineProperty(exports, "DialogClose", {
|
|
3417
|
-
enumerable: true,
|
|
3418
|
-
get: function () { return chunkIR46CNNY_cjs.DialogClose; }
|
|
3419
|
-
});
|
|
3420
|
-
Object.defineProperty(exports, "DialogContent", {
|
|
3421
|
-
enumerable: true,
|
|
3422
|
-
get: function () { return chunkIR46CNNY_cjs.DialogContent; }
|
|
3423
|
-
});
|
|
3424
|
-
Object.defineProperty(exports, "DialogDescription", {
|
|
3425
|
-
enumerable: true,
|
|
3426
|
-
get: function () { return chunkIR46CNNY_cjs.DialogDescription; }
|
|
3427
|
-
});
|
|
3428
|
-
Object.defineProperty(exports, "DialogTitle", {
|
|
3429
|
-
enumerable: true,
|
|
3430
|
-
get: function () { return chunkIR46CNNY_cjs.DialogTitle; }
|
|
3431
|
-
});
|
|
3432
|
-
Object.defineProperty(exports, "DialogTrigger", {
|
|
3433
|
-
enumerable: true,
|
|
3434
|
-
get: function () { return chunkIR46CNNY_cjs.DialogTrigger; }
|
|
3435
|
-
});
|
|
3436
|
-
Object.defineProperty(exports, "useDialogContext", {
|
|
3437
|
-
enumerable: true,
|
|
3438
|
-
get: function () { return chunkIR46CNNY_cjs.useDialogContext; }
|
|
3439
|
-
});
|
|
3440
|
-
Object.defineProperty(exports, "useFocusTrap", {
|
|
3441
|
-
enumerable: true,
|
|
3442
|
-
get: function () { return chunkIR46CNNY_cjs.useFocusTrap; }
|
|
3443
|
-
});
|
|
3444
|
-
Object.defineProperty(exports, "useFocusTrapControls", {
|
|
3445
|
-
enumerable: true,
|
|
3446
|
-
get: function () { return chunkIR46CNNY_cjs.useFocusTrapControls; }
|
|
3447
|
-
});
|
|
3448
|
-
Object.defineProperty(exports, "ActionMenu", {
|
|
3449
|
-
enumerable: true,
|
|
3450
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenuCompound; }
|
|
3451
|
-
});
|
|
3452
|
-
Object.defineProperty(exports, "ActionMenuBase", {
|
|
3453
|
-
enumerable: true,
|
|
3454
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenu; }
|
|
3455
|
-
});
|
|
3456
|
-
Object.defineProperty(exports, "ActionMenuContent", {
|
|
3457
|
-
enumerable: true,
|
|
3458
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenuContent; }
|
|
3459
|
-
});
|
|
3460
|
-
Object.defineProperty(exports, "ActionMenuItem", {
|
|
3461
|
-
enumerable: true,
|
|
3462
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenuItem; }
|
|
3463
|
-
});
|
|
3464
|
-
Object.defineProperty(exports, "ActionMenuLabel", {
|
|
3465
|
-
enumerable: true,
|
|
3466
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenuLabel; }
|
|
3467
|
-
});
|
|
3468
|
-
Object.defineProperty(exports, "ActionMenuSeparator", {
|
|
3469
|
-
enumerable: true,
|
|
3470
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenuSeparator; }
|
|
3471
|
-
});
|
|
3472
|
-
Object.defineProperty(exports, "ActionMenuTrigger", {
|
|
3473
|
-
enumerable: true,
|
|
3474
|
-
get: function () { return chunkR4FR6M6I_cjs.ActionMenuTrigger; }
|
|
3475
|
-
});
|
|
3476
|
-
Object.defineProperty(exports, "useActionMenuContext", {
|
|
3477
|
-
enumerable: true,
|
|
3478
|
-
get: function () { return chunkR4FR6M6I_cjs.useActionMenuContext; }
|
|
3479
|
-
});
|
|
3480
|
-
Object.defineProperty(exports, "Tab", {
|
|
3481
|
-
enumerable: true,
|
|
3482
|
-
get: function () { return chunkD2UMS62N_cjs.Tab; }
|
|
3483
|
-
});
|
|
3484
|
-
Object.defineProperty(exports, "TabList", {
|
|
3485
|
-
enumerable: true,
|
|
3486
|
-
get: function () { return chunkD2UMS62N_cjs.TabList; }
|
|
3487
|
-
});
|
|
3488
|
-
Object.defineProperty(exports, "TabPanel", {
|
|
3489
|
-
enumerable: true,
|
|
3490
|
-
get: function () { return chunkD2UMS62N_cjs.TabPanel; }
|
|
3491
|
-
});
|
|
3492
|
-
Object.defineProperty(exports, "Tabs", {
|
|
3493
|
-
enumerable: true,
|
|
3494
|
-
get: function () { return chunkD2UMS62N_cjs.TabsCompound; }
|
|
3495
|
-
});
|
|
3496
|
-
Object.defineProperty(exports, "TabsBase", {
|
|
3497
|
-
enumerable: true,
|
|
3498
|
-
get: function () { return chunkD2UMS62N_cjs.Tabs; }
|
|
3499
|
-
});
|
|
3500
|
-
Object.defineProperty(exports, "useTabsContext", {
|
|
3501
|
-
enumerable: true,
|
|
3502
|
-
get: function () { return chunkD2UMS62N_cjs.useTabsContext; }
|
|
3503
|
-
});
|
|
3504
|
-
Object.defineProperty(exports, "ToastProvider", {
|
|
3505
|
-
enumerable: true,
|
|
3506
|
-
get: function () { return chunkSOBS7MIH_cjs.ToastProvider; }
|
|
3507
|
-
});
|
|
3508
|
-
Object.defineProperty(exports, "ToastViewport", {
|
|
3509
|
-
enumerable: true,
|
|
3510
|
-
get: function () { return chunkSOBS7MIH_cjs.ToastViewport; }
|
|
3511
|
-
});
|
|
3512
|
-
Object.defineProperty(exports, "useToast", {
|
|
3513
|
-
enumerable: true,
|
|
3514
|
-
get: function () { return chunkSOBS7MIH_cjs.useToast; }
|
|
3515
|
-
});
|
|
3516
|
-
Object.defineProperty(exports, "useToastHelpers", {
|
|
3517
|
-
enumerable: true,
|
|
3518
|
-
get: function () { return chunkSOBS7MIH_cjs.useToastHelpers; }
|
|
3519
|
-
});
|
|
3520
|
-
Object.defineProperty(exports, "Combobox", {
|
|
3521
|
-
enumerable: true,
|
|
3522
|
-
get: function () { return chunkOIVTOU4Z_cjs.ComboboxCompound; }
|
|
3523
|
-
});
|
|
3524
|
-
Object.defineProperty(exports, "ComboboxBase", {
|
|
3525
|
-
enumerable: true,
|
|
3526
|
-
get: function () { return chunkOIVTOU4Z_cjs.Combobox; }
|
|
3527
|
-
});
|
|
3528
|
-
Object.defineProperty(exports, "ComboboxInput", {
|
|
3529
|
-
enumerable: true,
|
|
3530
|
-
get: function () { return chunkOIVTOU4Z_cjs.ComboboxInput; }
|
|
3531
|
-
});
|
|
3532
|
-
Object.defineProperty(exports, "ComboboxListbox", {
|
|
3533
|
-
enumerable: true,
|
|
3534
|
-
get: function () { return chunkOIVTOU4Z_cjs.ComboboxListbox; }
|
|
3535
|
-
});
|
|
3536
|
-
Object.defineProperty(exports, "ComboboxOption", {
|
|
3537
|
-
enumerable: true,
|
|
3538
|
-
get: function () { return chunkOIVTOU4Z_cjs.ComboboxOption; }
|
|
3539
|
-
});
|
|
3540
|
-
Object.defineProperty(exports, "useAnnounceLoading", {
|
|
3541
|
-
enumerable: true,
|
|
3542
|
-
get: function () { return chunkRBDQCIS7_cjs.useAnnounceLoading; }
|
|
3543
|
-
});
|
|
3544
|
-
Object.defineProperty(exports, "useAnnounceOnChange", {
|
|
3545
|
-
enumerable: true,
|
|
3546
|
-
get: function () { return chunkRBDQCIS7_cjs.useAnnounceOnChange; }
|
|
3547
|
-
});
|
|
3548
|
-
Object.defineProperty(exports, "useAnnouncer", {
|
|
3549
|
-
enumerable: true,
|
|
3550
|
-
get: function () { return chunkRBDQCIS7_cjs.useAnnouncer; }
|
|
3551
|
-
});
|
|
3552
|
-
Object.defineProperty(exports, "useGridKeyboard", {
|
|
3553
|
-
enumerable: true,
|
|
3554
|
-
get: function () { return chunkGDLOJH6K_cjs.useGridKeyboard; }
|
|
3555
|
-
});
|
|
3556
|
-
Object.defineProperty(exports, "useKeyPressed", {
|
|
3557
|
-
enumerable: true,
|
|
3558
|
-
get: function () { return chunkGDLOJH6K_cjs.useKeyPressed; }
|
|
3559
|
-
});
|
|
3560
|
-
Object.defineProperty(exports, "useKeyboard", {
|
|
3561
|
-
enumerable: true,
|
|
3562
|
-
get: function () { return chunkGDLOJH6K_cjs.useKeyboard; }
|
|
3563
|
-
});
|
|
3564
|
-
Object.defineProperty(exports, "useMenuKeyboard", {
|
|
3565
|
-
enumerable: true,
|
|
3566
|
-
get: function () { return chunkGDLOJH6K_cjs.useMenuKeyboard; }
|
|
3567
|
-
});
|
|
3568
|
-
Object.defineProperty(exports, "useTabsKeyboard", {
|
|
3569
|
-
enumerable: true,
|
|
3570
|
-
get: function () { return chunkGDLOJH6K_cjs.useTabsKeyboard; }
|
|
3571
|
-
});
|
|
3572
|
-
Object.defineProperty(exports, "useTypeAhead", {
|
|
3573
|
-
enumerable: true,
|
|
3574
|
-
get: function () { return chunkGDLOJH6K_cjs.useTypeAhead; }
|
|
3575
|
-
});
|
|
3576
|
-
Object.defineProperty(exports, "useId", {
|
|
3577
|
-
enumerable: true,
|
|
3578
|
-
get: function () { return chunk52J4Z3QD_cjs.useId; }
|
|
3579
|
-
});
|
|
3580
|
-
Object.defineProperty(exports, "useIdScope", {
|
|
3581
|
-
enumerable: true,
|
|
3582
|
-
get: function () { return chunk52J4Z3QD_cjs.useIdScope; }
|
|
3583
|
-
});
|
|
3584
|
-
Object.defineProperty(exports, "useIds", {
|
|
3585
|
-
enumerable: true,
|
|
3586
|
-
get: function () { return chunk52J4Z3QD_cjs.useIds; }
|
|
3587
|
-
});
|
|
3588
|
-
Object.defineProperty(exports, "announce", {
|
|
3589
|
-
enumerable: true,
|
|
3590
|
-
get: function () { return core.announce; }
|
|
3591
|
-
});
|
|
3592
|
-
Object.defineProperty(exports, "announceAssertive", {
|
|
3593
|
-
enumerable: true,
|
|
3594
|
-
get: function () { return core.announceAssertive; }
|
|
3595
|
-
});
|
|
3596
|
-
Object.defineProperty(exports, "announceError", {
|
|
3597
|
-
enumerable: true,
|
|
3598
|
-
get: function () { return core.announceError; }
|
|
3599
|
-
});
|
|
3600
|
-
Object.defineProperty(exports, "announcePolite", {
|
|
3601
|
-
enumerable: true,
|
|
3602
|
-
get: function () { return core.announcePolite; }
|
|
3603
|
-
});
|
|
3604
|
-
Object.defineProperty(exports, "announceProgress", {
|
|
3605
|
-
enumerable: true,
|
|
3606
|
-
get: function () { return core.announceProgress; }
|
|
3607
|
-
});
|
|
3608
|
-
Object.defineProperty(exports, "announceStatus", {
|
|
3609
|
-
enumerable: true,
|
|
3610
|
-
get: function () { return core.announceStatus; }
|
|
3611
|
-
});
|
|
3612
|
-
Object.defineProperty(exports, "aria", {
|
|
3613
|
-
enumerable: true,
|
|
3614
|
-
get: function () { return core.aria; }
|
|
3615
|
-
});
|
|
3616
|
-
Object.defineProperty(exports, "buildAriaProps", {
|
|
3617
|
-
enumerable: true,
|
|
3618
|
-
get: function () { return core.buildAriaProps; }
|
|
3619
|
-
});
|
|
3620
|
-
Object.defineProperty(exports, "checks", {
|
|
3621
|
-
enumerable: true,
|
|
3622
|
-
get: function () { return core.checks; }
|
|
3623
|
-
});
|
|
3624
|
-
Object.defineProperty(exports, "createComponentWarnings", {
|
|
3625
|
-
enumerable: true,
|
|
3626
|
-
get: function () { return core.createComponentWarnings; }
|
|
3627
|
-
});
|
|
3628
|
-
Object.defineProperty(exports, "hasAccessibleName", {
|
|
3629
|
-
enumerable: true,
|
|
3630
|
-
get: function () { return core.hasAccessibleName; }
|
|
3631
|
-
});
|
|
3632
|
-
Object.defineProperty(exports, "isAndroid", {
|
|
3633
|
-
enumerable: true,
|
|
3634
|
-
get: function () { return core.isAndroid; }
|
|
3635
|
-
});
|
|
3636
|
-
Object.defineProperty(exports, "isBrowser", {
|
|
3637
|
-
enumerable: true,
|
|
3638
|
-
get: function () { return core.isBrowser; }
|
|
3639
|
-
});
|
|
3640
|
-
Object.defineProperty(exports, "isIOS", {
|
|
3641
|
-
enumerable: true,
|
|
3642
|
-
get: function () { return core.isIOS; }
|
|
3643
|
-
});
|
|
3644
|
-
Object.defineProperty(exports, "isMac", {
|
|
3645
|
-
enumerable: true,
|
|
3646
|
-
get: function () { return core.isMac; }
|
|
3647
|
-
});
|
|
3648
|
-
Object.defineProperty(exports, "mergeAriaIds", {
|
|
3649
|
-
enumerable: true,
|
|
3650
|
-
get: function () { return core.mergeAriaIds; }
|
|
3651
|
-
});
|
|
3652
|
-
Object.defineProperty(exports, "prefersDarkMode", {
|
|
3653
|
-
enumerable: true,
|
|
3654
|
-
get: function () { return core.prefersDarkMode; }
|
|
3655
|
-
});
|
|
3656
|
-
Object.defineProperty(exports, "prefersHighContrast", {
|
|
3657
|
-
enumerable: true,
|
|
3658
|
-
get: function () { return core.prefersHighContrast; }
|
|
3659
|
-
});
|
|
3660
|
-
Object.defineProperty(exports, "prefersReducedMotion", {
|
|
3661
|
-
enumerable: true,
|
|
3662
|
-
get: function () { return core.prefersReducedMotion; }
|
|
3663
|
-
});
|
|
3664
|
-
Object.defineProperty(exports, "setWarningHandler", {
|
|
3665
|
-
enumerable: true,
|
|
3666
|
-
get: function () { return core.setWarningHandler; }
|
|
3667
|
-
});
|
|
3668
|
-
Object.defineProperty(exports, "warn", {
|
|
3669
|
-
enumerable: true,
|
|
3670
|
-
get: function () { return core.warn; }
|
|
3671
|
-
});
|
|
3672
|
-
exports.Button = Button;
|
|
3673
|
-
exports.Checkbox = CheckboxCompound;
|
|
3674
|
-
exports.CheckboxBase = Checkbox;
|
|
3675
|
-
exports.CheckboxGroup = CheckboxGroup;
|
|
3676
|
-
exports.CheckboxIndicator = CheckboxIndicator;
|
|
3677
|
-
exports.Input = InputCompound;
|
|
3678
|
-
exports.InputBase = Input;
|
|
3679
|
-
exports.InputError = InputError;
|
|
3680
|
-
exports.InputField = InputField;
|
|
3681
|
-
exports.InputHint = InputHint;
|
|
3682
|
-
exports.InputLabel = InputLabel;
|
|
3683
|
-
exports.Listbox = ListboxCompound;
|
|
3684
|
-
exports.ListboxBase = Listbox;
|
|
3685
|
-
exports.ListboxGroup = ListboxGroup;
|
|
3686
|
-
exports.ListboxOption = ListboxOption;
|
|
3687
|
-
exports.Radio = Radio;
|
|
3688
|
-
exports.RadioGroup = RadioGroupCompound;
|
|
3689
|
-
exports.RadioGroupBase = RadioGroup;
|
|
3690
|
-
exports.Select = SelectCompound;
|
|
3691
|
-
exports.SelectBase = Select;
|
|
3692
|
-
exports.SelectListbox = SelectListbox;
|
|
3693
|
-
exports.SelectOptionItem = SelectOptionItem;
|
|
3694
|
-
exports.SelectTrigger = SelectTrigger;
|
|
3695
|
-
exports.Switch = Switch;
|
|
3696
|
-
exports.Textarea = TextareaCompound;
|
|
3697
|
-
exports.TextareaBase = Textarea;
|
|
3698
|
-
exports.TextareaError = TextareaError;
|
|
3699
|
-
exports.TextareaField = TextareaField;
|
|
3700
|
-
exports.TextareaHint = TextareaHint;
|
|
3701
|
-
exports.TextareaLabel = TextareaLabel;
|
|
3702
|
-
exports.useCheckboxGroupContext = useCheckboxGroupContext;
|
|
3703
|
-
exports.useFocusControl = useFocusControl;
|
|
3704
|
-
exports.useFocusManager = useFocusManager;
|
|
3705
|
-
exports.useFocusVisible = useFocusVisible;
|
|
3706
|
-
exports.useFocusWithin = useFocusWithin;
|
|
3707
|
-
exports.useInputContext = useInputContext;
|
|
3708
|
-
exports.useListboxContext = useListboxContext;
|
|
3709
|
-
exports.useRadioGroupContext = useRadioGroupContext;
|
|
3710
|
-
exports.useRovingTabindex = useRovingTabindex;
|
|
3711
|
-
exports.useRovingTabindexMap = useRovingTabindexMap;
|
|
3712
|
-
exports.useTextareaContext = useTextareaContext;
|
|
3713
|
-
//# sourceMappingURL=index.cjs.map
|
|
3714
|
-
//# sourceMappingURL=index.cjs.map
|
|
1
|
+
'use strict';var chunkFD4F6ONU_cjs=require('./chunk-FD4F6ONU.cjs'),chunk36S2JYVF_cjs=require('./chunk-36S2JYVF.cjs'),chunkDWU3PTJO_cjs=require('./chunk-DWU3PTJO.cjs'),chunkDDFEION3_cjs=require('./chunk-DDFEION3.cjs'),chunkFOVHQAY5_cjs=require('./chunk-FOVHQAY5.cjs'),chunkJS3UD7KS_cjs=require('./chunk-JS3UD7KS.cjs'),chunkAJ7JSWUT_cjs=require('./chunk-AJ7JSWUT.cjs'),chunkMAR6RBHF_cjs=require('./chunk-MAR6RBHF.cjs'),react=require('react'),core=require('@compa11y/core'),jsxRuntime=require('react/jsx-runtime');function te(){let[x,t]=react.useState(false);react.useEffect(()=>core.initFocusVisible(),[]);let c=react.useCallback(()=>{t(core.isFocusVisible());},[]),r=react.useCallback(()=>{t(false);},[]);return {isFocusVisible:x,focusProps:{onFocus:c,onBlur:r}}}function Ot(x={}){let{autoFocus:t=false,restoreFocus:c=false,focusVisible:r=true}=x,e=react.useCallback(n=>{n&&t&&requestAnimationFrame(()=>{r?core.focusWithVisibleRing(n):n.focus();});},[t,r]);return react.useEffect(()=>{if(!c)return;let n=document.activeElement;return ()=>{n&&n.focus&&n.focus();}},[c]),e}function At(){let x=react.useCallback(c=>{},[]),t=react.useCallback(c=>{let r=x;r.current&&(c?.visible?core.focusWithVisibleRing(r.current):r.current.focus());},[]);return {ref:x,focus:t}}function Vt(){let[x,t]=react.useState(false),c=react.useCallback(n=>{},[]),r=react.useCallback(()=>{t(true);},[]),e=react.useCallback(n=>{let i=n.currentTarget,l=n.relatedTarget;(!l||!i.contains(l))&&t(false);},[]);return {ref:c,hasFocus:x,focusWithinProps:{onFocus:r,onBlur:e}}}function Qe(x){let{itemCount:t,initialIndex:c=0,wrap:r=true,orientation:e="both",onChange:n}=x,[i,l]=react.useState(c),o=react.useRef([]);react.useEffect(()=>{i>=t&&l(Math.max(0,t-1));},[t,i]);let a=react.useCallback(b=>{let f=b;f<0?f=r?t-1:0:f>=t&&(f=r?0:t-1),l(f),n?.(f),o.current[f]?.focus();},[t,r,n]),p=react.useCallback((b,f)=>{let m=false;switch(b.key){case "ArrowRight":(e==="horizontal"||e==="both")&&(a(f+1),m=true);break;case "ArrowLeft":(e==="horizontal"||e==="both")&&(a(f-1),m=true);break;case "ArrowDown":(e==="vertical"||e==="both")&&(a(f+1),m=true);break;case "ArrowUp":(e==="vertical"||e==="both")&&(a(f-1),m=true);break;case "Home":a(0),m=true;break;case "End":a(t-1),m=true;break}m&&(b.preventDefault(),b.stopPropagation());},[e,a,t]),s=react.useCallback(b=>({ref:f=>{o.current[b]=f;},tabIndex:b===i?0:-1,onKeyDown:f=>p(f,b),onFocus:()=>{b!==i&&(l(b),n?.(b));}}),[i,p,n]);return {activeIndex:i,setActiveIndex:a,getItemProps:s,first:()=>a(0),last:()=>a(t-1),next:()=>a(i+1),previous:()=>a(i-1)}}function Nt(x,t={}){let c=Qe({...t,itemCount:x.length}),r=react.useCallback(n=>{let i=x.indexOf(n);if(i===-1)throw new Error(`Unknown item ID: ${n}`);return c.getItemProps(i)},[x,c]),e=x[c.activeIndex];return {...c,activeId:e,getItemProps:r,setActiveId:n=>{let i=x.indexOf(n);i!==-1&&c.setActiveIndex(i);}}}var nn=core.createComponentWarnings("Select"),Gt=react.createContext(null);function nt(){let x=react.useContext(Gt);if(!x)throw new Error("Select compound components must be used within a Select component");return x}function Dt(x,t,c){let r=x.length,e=t+c;e<0&&(e=r-1),e>=r&&(e=0);let n=e;for(;x[e]?.disabled;)if(e+=c,e<0&&(e=r-1),e>=r&&(e=0),e===n)return -1;return e}function Bt(x){return x.findIndex(t=>!t.disabled)}function zt(x){for(let t=x.length-1;t>=0;t--)if(!x[t]?.disabled)return t;return -1}function at({options:x,value:t,defaultValue:c,onValueChange:r,disabled:e=false,placeholder:n="Select an option...","aria-label":i,"aria-labelledby":l,children:o}){let[a,p]=react.useState(c??null),[s,b]=react.useState(false),[f,m]=react.useState(-1),u=react.useRef(null),T=t!==void 0?t:a,C=chunkMAR6RBHF_cjs.a("select-trigger"),S=chunkMAR6RBHF_cjs.a("select-listbox"),R=chunkMAR6RBHF_cjs.a("select-option"),d=react.useCallback(P=>{t===void 0&&p(P),r?.(P);},[t,r]),y=react.useCallback(P=>`${R}-${P}`,[R]),w=react.useCallback(P=>{d(P.value),b(false),m(-1),u.current?.focus();},[d]);react.useEffect(()=>{!i&&!l&&nn.warning("Select has no accessible label.","Add aria-label or aria-labelledby prop.");},[i,l]);let E={selectedValue:T,setSelectedValue:d,isOpen:s,setIsOpen:b,highlightedIndex:f,setHighlightedIndex:m,options:x,triggerId:C,listboxId:S,getOptionId:y,onSelect:w,triggerRef:u,placeholder:n,disabled:e};return jsxRuntime.jsx(Gt.Provider,{value:E,children:jsxRuntime.jsx("div",{"data-compa11y-select":true,"data-disabled":e||void 0,children:o})})}var rt=react.forwardRef(function({onKeyDown:t,onClick:c,onBlur:r,...e},n){let{selectedValue:i,isOpen:l,setIsOpen:o,highlightedIndex:a,setHighlightedIndex:p,options:s,triggerId:b,listboxId:f,getOptionId:m,onSelect:u,triggerRef:T,placeholder:C,disabled:S}=nt(),{announce:R}=chunkJS3UD7KS_cjs.a(),d=chunkAJ7JSWUT_cjs.e(s.map(h=>h.label),h=>{let F=s.findIndex(H=>H.label===h&&!H.disabled);F>=0&&(l||o(true),p(F));},{disabled:S}),y=react.useCallback((h=false)=>{o(true);let F=s.findIndex(H=>H.value===i);F>=0?p(F):p(h?zt(s):Bt(s));},[s,i,o,p]),w=chunkAJ7JSWUT_cjs.a({ArrowDown:()=>{if(!l)y();else {let h=Dt(s,a,1);h>=0&&p(h);}},ArrowUp:()=>{if(!l)y(true);else {let h=Dt(s,a,-1);h>=0&&p(h);}},Enter:()=>{if(l&&a>=0){let h=s[a];h&&!h.disabled&&(u(h),R(`${h.label} selected`));}else l||y();}," ":()=>{if(l&&a>=0){let h=s[a];h&&!h.disabled&&(u(h),R(`${h.label} selected`));}else l||y();},Escape:()=>{l&&(o(false),p(-1));},Home:()=>{l&&p(Bt(s));},End:()=>{l&&p(zt(s));},Tab:()=>(l&&(o(false),p(-1)),false)},{preventDefault:true,stopPropagation:false}),E=h=>{t?.(h),h.defaultPrevented||w.onKeyDown(h),h.defaultPrevented||d.onKeyDown(h);},P=h=>{c?.(h),!h.defaultPrevented&&!S&&(l?(o(false),p(-1)):y());},O=h=>{r?.(h),setTimeout(()=>{o(false),p(-1);},150);},N=l&&a>=0?m(a):void 0,A=s.find(h=>h.value===i),$=A?.label??C,g=react.useCallback(h=>{T.current=h,typeof n=="function"?n(h):n&&(n.current=h);},[n,T]);return jsxRuntime.jsxs("button",{ref:g,id:b,type:"button",role:"combobox","aria-expanded":l,"aria-controls":f,"aria-haspopup":"listbox","aria-activedescendant":N,disabled:S,onKeyDown:E,onClick:P,onBlur:O,"data-compa11y-select-trigger":true,"data-placeholder":!A||void 0,...e,children:[jsxRuntime.jsx("span",{"data-compa11y-select-value":true,children:$}),jsxRuntime.jsx("span",{"aria-hidden":"true","data-compa11y-select-chevron":true,children:"\u25BC"})]})}),it=react.forwardRef(function({children:t,style:c,...r},e){let{isOpen:n,options:i,listboxId:l,triggerId:o}=nt(),{announce:a}=chunkJS3UD7KS_cjs.a(),p=react.useRef(null),[s,b]=react.useState("bottom");react.useEffect(()=>{n&&a(`${i.length} option${i.length===1?"":"s"} available`);},[n,i.length,a]),react.useLayoutEffect(()=>{if(n&&p.current){let C=p.current.getBoundingClientRect(),R=window.innerHeight-C.top,d=C.top,y=Math.min(C.height,200);R<y+50&&d>R?b("top"):b("bottom");}},[n]);let f=T=>{T.preventDefault();},m=react.useCallback(T=>{p.current=T,typeof e=="function"?e(T):e&&(e.current=T);},[e]);return n?jsxRuntime.jsx("ul",{ref:m,id:l,role:"listbox","aria-labelledby":o,style:{...c,...s==="top"?{bottom:"100%",top:"auto",marginBottom:"4px",marginTop:0}:{}},onMouseDown:f,"data-compa11y-select-listbox":true,"data-position":s,...r,children:t??i.map((T,C)=>jsxRuntime.jsx(ke,{option:T,index:C},T.value))}):null}),ke=react.forwardRef(function({option:t,index:c,onClick:r,onMouseEnter:e,...n},i){let{selectedValue:l,highlightedIndex:o,setHighlightedIndex:a,getOptionId:p,onSelect:s}=nt(),{announce:b}=chunkJS3UD7KS_cjs.a(),f=react.useRef(null),m=l===t.value,u=o===c,T=p(c);react.useEffect(()=>{u&&f.current&&f.current.scrollIntoView({block:"nearest",behavior:"smooth"});},[u]);let C=d=>{r?.(d),!d.defaultPrevented&&!t.disabled&&(s(t),b(`${t.label} selected`));},S=d=>{e?.(d),t.disabled||a(c);},R=react.useCallback(d=>{f.current=d,typeof i=="function"?i(d):i&&(i.current=d);},[i]);return jsxRuntime.jsxs("li",{ref:R,id:T,role:"option","aria-selected":m,"aria-disabled":t.disabled,"data-highlighted":u,"data-selected":m,"data-disabled":t.disabled,onClick:C,onMouseEnter:S,"data-compa11y-select-option":true,...n,children:[jsxRuntime.jsx("span",{"data-compa11y-select-option-text":true,children:t.label}),m&&jsxRuntime.jsx("span",{"aria-hidden":"true","data-compa11y-select-check":true,children:"\u2713"})]})}),$t=Object.assign(at,{Trigger:rt,Listbox:it,Option:ke});var Wt=core.createComponentWarnings("Checkbox"),cn=()=>jsxRuntime.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",style:{display:"block"},children:jsxRuntime.jsx("path",{d:"M2.5 6L5 8.5L9.5 3.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),un=()=>jsxRuntime.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",style:{display:"block"},children:jsxRuntime.jsx("path",{d:"M3 6H9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}),Ut=react.createContext(null);function ct(){return react.useContext(Ut)}var we=react.forwardRef(function({value:t,defaultValue:c=[],onValueChange:r,disabled:e=false,legend:n,error:i,orientation:l="vertical",name:o,unstyled:a=false,className:p="",children:s,"aria-label":b,"aria-labelledby":f},m){let u=chunkMAR6RBHF_cjs.a("checkbox-group"),T=o||u,C=chunkMAR6RBHF_cjs.a("checkbox-group-error"),[S,R]=react.useState(c),d=t!==void 0,y=d?t:S;react.useEffect(()=>{!n&&!b&&!f&&Wt.warning("CheckboxGroup has no accessible label. Screen readers need this to identify the group.",'Add legend="...", aria-label="...", or aria-labelledby="..."');},[n,b,f]);let w=react.useCallback((g,h)=>{let F=d?t:S,H=h?[...F,g]:F.filter(D=>D!==g);d||R(H),r?.(H);},[d,t,S,r]),E={name:T,value:y,disabled:e,unstyled:a,onCheckboxChange:w},P=!!i,O={border:"none",margin:0,padding:0,minWidth:0},N=a?{padding:0,marginBottom:"0.5rem"}:{padding:0,marginBottom:"0.5rem",fontWeight:600},A={display:"flex",flexDirection:l==="horizontal"?"row":"column",flexWrap:l==="horizontal"?"wrap":void 0,gap:"var(--compa11y-checkbox-group-gap, 0.75rem)"},$=a?{marginTop:"0.25rem"}:{color:"var(--compa11y-checkbox-group-error-color, #ef4444)",fontSize:"0.8125rem",marginTop:"0.25rem"};return jsxRuntime.jsx(Ut.Provider,{value:E,children:jsxRuntime.jsxs("fieldset",{ref:m,className:p,"aria-label":b,"aria-labelledby":f,"aria-describedby":P?C:void 0,disabled:e,"data-compa11y-checkbox-group":"","data-orientation":l,"data-disabled":e?"true":void 0,style:O,children:[n&&jsxRuntime.jsx("legend",{"data-compa11y-checkbox-group-legend":"",style:N,children:n}),jsxRuntime.jsx("div",{style:A,children:s}),P&&jsxRuntime.jsx("div",{id:C,role:"alert","data-compa11y-checkbox-group-error":"",style:$,children:i})]})})});we.displayName="CheckboxGroup";var He=react.forwardRef(function({checked:t,defaultChecked:c=false,onCheckedChange:r,indeterminate:e=false,label:n,hint:i,error:l,disabled:o=false,value:a,required:p=false,unstyled:s,className:b="",size:f="md",name:m,"aria-label":u,"aria-labelledby":T,"aria-describedby":C,onClick:S,onFocus:R,onBlur:d,...y},w){let E=ct(),P=chunkMAR6RBHF_cjs.a("checkbox"),O=`${P}-input`,N=`${P}-label`,A=`${P}-hint`,$=`${P}-error`,{announce:g}=chunkJS3UD7KS_cjs.a(),{isFocusVisible:h,focusProps:F}=te(),H=E!==null,D=H&&E.disabled||o,z=s??(H?E.unstyled:false),I=H?E.name:m,[U,q]=react.useState(c),W=H?E.value.includes(a||""):t!==void 0?t:U,K=react.useRef(null),V=react.useCallback(ce=>{K.current=ce,typeof w=="function"?w(ce):w&&(w.current=ce);},[w]);react.useEffect(()=>{K.current&&(K.current.indeterminate=e);},[e]),react.useEffect(()=>{!n&&!u&&!T&&Wt.warning("Checkbox has no accessible label. Screen readers need this to identify the checkbox.",'Add label="...", aria-label="...", or aria-labelledby="..."');},[n,u,T]);let j=react.useCallback(ce=>{let Le=ce.target.checked;H?E.onCheckboxChange(a||"",Le):(t===void 0&&q(Le),r?.(Le)),g(`${typeof n=="string"?n:u||"Checkbox"} ${Le?"checked":"unchecked"}`);},[H,E,a,t,r,n,u,g]),X=react.useCallback(ce=>{F.onFocus(),R?.(ce);},[F,R]),J=react.useCallback(ce=>{F.onBlur(),d?.(ce);},[F,d]),_=!!n,ee=!!i,oe=!!l,ne=[];C&&ne.push(C),ee&&ne.push(A),oe&&ne.push($);let v=ne.length?ne.join(" "):void 0,M={sm:{box:16},md:{box:20},lg:{box:24}}[f],L={display:"inline-flex",alignItems:"flex-start",gap:"0.5rem",cursor:D?"not-allowed":"pointer",userSelect:"none",...D&&!z?{opacity:.5}:{}},G={position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},Re={position:"absolute",opacity:0,width:"100%",height:"100%",margin:0,cursor:"inherit",zIndex:1},xe=z?{}:{width:M.box,height:M.box,minWidth:24,minHeight:24,border:W||e?"var(--compa11y-checkbox-checked-border, 2px solid #0066cc)":"var(--compa11y-checkbox-border, 2px solid #666)",borderRadius:"var(--compa11y-checkbox-radius, 3px)",background:W||e?"var(--compa11y-checkbox-checked-bg, #0066cc)":"var(--compa11y-checkbox-bg, white)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,transition:"all 0.15s ease",pointerEvents:"none",color:"var(--compa11y-checkbox-check-color, white)",...h?{outline:"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"2px"}:{}},po={display:"flex",flexDirection:"column",gap:"0.125rem",paddingTop:"0.125rem"},bo=z?{cursor:"inherit"}:{cursor:"inherit",color:"var(--compa11y-checkbox-label-color, inherit)"},fo=z?{}:{color:"var(--compa11y-checkbox-hint-color, #666)",fontSize:"0.8125rem"},mo=z?{}:{color:"var(--compa11y-checkbox-error-color, #ef4444)",fontSize:"0.8125rem"};return jsxRuntime.jsxs("div",{className:b,"data-compa11y-checkbox":"","data-checked":W?"true":"false","data-indeterminate":e?"true":void 0,"data-disabled":D?"true":void 0,"data-size":f,style:L,children:[jsxRuntime.jsxs("div",{style:G,children:[jsxRuntime.jsx("input",{ref:V,type:"checkbox",id:O,name:I,value:a,checked:W,onChange:j,onClick:S,onFocus:X,onBlur:J,disabled:D,required:p,"aria-required":p||void 0,"aria-invalid":oe||void 0,"aria-label":!_&&!T?u:void 0,"aria-labelledby":T||(_?N:void 0),"aria-describedby":v,"aria-checked":e?"mixed":W,tabIndex:D?-1:0,style:Re,...y}),!z&&jsxRuntime.jsxs("div",{"data-compa11y-checkbox-indicator":"","aria-hidden":"true",style:xe,children:[W&&!e&&jsxRuntime.jsx(cn,{}),e&&jsxRuntime.jsx(un,{})]})]}),(_||ee||oe)&&jsxRuntime.jsxs("div",{style:po,children:[_&&jsxRuntime.jsxs("label",{htmlFor:O,id:N,"data-compa11y-checkbox-label":"",style:bo,children:[n,p&&jsxRuntime.jsx("span",{"aria-hidden":"true",style:{color:"var(--compa11y-checkbox-required-color, #ef4444)",marginLeft:"0.125rem"},children:"*"})]}),ee&&jsxRuntime.jsx("div",{id:A,"data-compa11y-checkbox-hint":"",style:fo,children:i}),oe&&jsxRuntime.jsx("div",{id:$,role:"alert","data-compa11y-checkbox-error":"",style:mo,children:l})]})]})});He.displayName="Checkbox";var Fe=react.forwardRef(function({children:t,className:c},r){return jsxRuntime.jsx("div",{ref:r,className:c,"data-compa11y-checkbox-indicator":"","aria-hidden":"true",children:t})});Fe.displayName="CheckboxIndicator";var qt=Object.assign(He,{Group:we,Indicator:Fe});var mn=core.createComponentWarnings("RadioGroup"),pt=react.createContext(null);function bt(){let x=react.useContext(pt);if(!x)throw new Error("[Compa11y RadioGroup]: Radio must be used within a RadioGroup.");return x}var Oe=react.forwardRef(function({value:t,defaultValue:c,onValueChange:r,disabled:e=false,discoverable:n=true,required:i=false,orientation:l="vertical",name:o,legend:a,hint:p,error:s,unstyled:b=false,className:f="",children:m,"aria-label":u,"aria-labelledby":T},C){let S=chunkMAR6RBHF_cjs.a("radiogroup"),R=o||S,d=chunkMAR6RBHF_cjs.a("radiogroup-hint"),y=chunkMAR6RBHF_cjs.a("radiogroup-error"),[w,E]=react.useState(c??null),P=t!==void 0,O=P?t:w,N=react.useRef(new Map);react.useEffect(()=>{!a&&!u&&!T&&mn.warning("RadioGroup has no accessible label. Screen readers need this to identify the group.",'Add legend="...", aria-label="...", or aria-labelledby="..."');},[a,u,T]);let A=react.useCallback(V=>{e||(P||E(V),r?.(V));},[e,P,r]),$=react.useCallback((V,j)=>{N.current.set(V,j);},[]),g=react.useCallback(V=>{N.current.delete(V);},[]),h=react.useCallback((V,j)=>{N.current.set(V,j);},[]),F=react.useCallback(()=>{let V=[];return N.current.forEach((j,X)=>{!j&&!e&&V.push(X);}),V},[e]),H=react.useRef(null),D=C||H,z=react.useCallback(V=>{let j=F();if(j.length===0)return;let X=O?j.indexOf(O):-1,J;switch(V){case "next":J=X<0?0:(X+1)%j.length;break;case "prev":J=X<0?j.length-1:(X-1+j.length)%j.length;break;case "first":J=0;break;case "last":J=j.length-1;break}let _=j[J];if(_!==void 0){A(_);let ee=typeof D=="object"&&D?D.current:null;ee&&ee.querySelector(`input[type="radio"][value="${CSS.escape(_)}"]`)?.focus();}},[F,O,A,D]),I=chunkAJ7JSWUT_cjs.a({ArrowDown:()=>z("next"),ArrowRight:()=>z("next"),ArrowUp:()=>z("prev"),ArrowLeft:()=>z("prev"),Home:()=>z("first"),End:()=>z("last")},{preventDefault:true,stopPropagation:true,disabled:e}),U={name:R,value:O??null,disabled:e,discoverable:n,required:i,unstyled:b,orientation:l,onValueChange:A,registerRadio:$,unregisterRadio:g,updateRadioDisabled:h},q=[];p&&q.push(d),s&&q.push(y);let W=q.length>0?q.join(" "):void 0,K=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:b?{display:"flex",flexDirection:l==="horizontal"?"row":"column"}:{display:"flex",flexDirection:l==="horizontal"?"row":"column",gap:"var(--compa11y-radio-gap, 0.75rem)"},children:m}),p&&jsxRuntime.jsx("div",{id:d,style:b?{}:{color:"var(--compa11y-radio-group-hint-color, #666)",fontSize:"0.8125rem",marginTop:"0.25rem"},children:p}),s&&jsxRuntime.jsx("div",{id:y,role:"alert",style:b?{}:{color:"var(--compa11y-radio-group-error-color, #ef4444)",fontSize:"0.8125rem",marginTop:"0.25rem"},children:s})]});return a?jsxRuntime.jsx(pt.Provider,{value:U,children:jsxRuntime.jsxs("fieldset",{ref:D,role:"radiogroup","aria-label":u,"aria-labelledby":T,"aria-orientation":l,"aria-required":i||void 0,"aria-disabled":e||void 0,"aria-invalid":s?true:void 0,"aria-describedby":W,className:`compa11y-radiogroup ${f}`.trim(),"data-compa11y-radiogroup":"","data-orientation":l,"data-disabled":e?"true":void 0,"data-error":s?"true":void 0,onKeyDown:I.onKeyDown,style:b?{border:"none",margin:0,padding:0,minWidth:0}:{border:"none",margin:0,padding:0,minWidth:0},children:[jsxRuntime.jsxs("legend",{style:b?{}:{padding:0,marginBottom:"var(--compa11y-radio-group-legend-gap, 0.5rem)",fontWeight:"var(--compa11y-radio-group-legend-weight, 600)",color:"var(--compa11y-radio-group-legend-color, inherit)",fontSize:"var(--compa11y-radio-group-legend-size, 1rem)"},children:[a,i&&!b&&jsxRuntime.jsxs("span",{"aria-hidden":"true",style:{color:"var(--compa11y-radio-group-required-color, #ef4444)",marginLeft:"0.125rem"},children:[" ","*"]})]}),K]})}):jsxRuntime.jsx(pt.Provider,{value:U,children:jsxRuntime.jsx("div",{ref:D,role:"radiogroup","aria-label":u,"aria-labelledby":T,"aria-orientation":l,"aria-required":i||void 0,"aria-disabled":e||void 0,"aria-invalid":s?true:void 0,"aria-describedby":W,className:`compa11y-radiogroup ${f}`.trim(),"data-compa11y-radiogroup":"","data-orientation":l,"data-disabled":e?"true":void 0,"data-error":s?"true":void 0,onKeyDown:I.onKeyDown,children:K})})});Oe.displayName="RadioGroup";var Ae=react.forwardRef(function({value:t,disabled:c=false,discoverable:r,label:e,hint:n,unstyled:i,className:l="",children:o,"aria-label":a},p){let s=bt(),b=chunkMAR6RBHF_cjs.a("radio"),f=chunkMAR6RBHF_cjs.a("radio-hint"),m=s.disabled||c,u=r??s.discoverable,T=i??s.unstyled,C=s.value===t,{announce:S}=chunkJS3UD7KS_cjs.a(),{isFocusVisible:R,focusProps:d}=te(),y=react.useRef(null),w=react.useCallback(I=>{y.current=I,typeof p=="function"?p(I):p&&(p.current=I);},[p]);react.useEffect(()=>(s.registerRadio(t,m),()=>s.unregisterRadio(t)),[t]),react.useEffect(()=>{s.updateRadioDisabled(t,m);},[m,t]);let E=react.useCallback(I=>{if(m){I.preventDefault();return}s.onValueChange(t),S(`${e||(typeof o=="string"?o:null)||t} selected`,{politeness:"polite"});},[m,s,t,e,o,S]),P=react.useCallback(I=>{m&&I.preventDefault();},[m]),O=react.useCallback(I=>{d.onFocus(),!C&&!m&&s.onValueChange(t);},[d,C,m,s,t]),N=react.useCallback(()=>{d.onBlur();},[d]),A=!!(o||e),$=o||e,g=`${b}-label`,h=!!n,F=(()=>{if(s.value!==null)return false;let I=Array.from(y.current?.closest('[role="radiogroup"]')?.querySelectorAll('input[type="radio"]')??[]);for(let U of I){let q=U;if(!q.disabled&&q.getAttribute("aria-disabled")!=="true")return q.value===t}return false})(),H=m&&!u?-1:C||s.value===null&&F?0:-1,D=m&&!u,z=h?f:void 0;return jsxRuntime.jsxs("label",{htmlFor:b,className:`compa11y-radio-wrapper ${l}`.trim(),"data-compa11y-radio":"","data-value":t,"data-checked":C?"true":"false","data-disabled":m?"true":void 0,style:T?{display:"inline-flex",alignItems:"flex-start",cursor:m?"not-allowed":"pointer",gap:"0.5rem"}:{display:"inline-flex",alignItems:"flex-start",gap:"var(--compa11y-radio-gap, 0.5rem)",cursor:m?"not-allowed":"pointer",userSelect:"none",opacity:m?.5:1},children:[jsxRuntime.jsxs("div",{style:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:[jsxRuntime.jsx("input",{ref:w,type:"radio",id:b,name:s.name,value:t,checked:C,onChange:E,onClick:P,onFocus:O,onBlur:N,disabled:D,tabIndex:H,"aria-disabled":m?"true":void 0,"aria-label":A?void 0:a,"aria-labelledby":A?g:void 0,"aria-describedby":z,required:s.required,className:"compa11y-radio-input",style:{position:"absolute",opacity:0,width:"var(--compa11y-radio-size, 1.25rem)",height:"var(--compa11y-radio-size, 1.25rem)",margin:0,cursor:m?"not-allowed":"pointer"}}),!T&&jsxRuntime.jsx("div",{className:"compa11y-radio-circle",style:{width:"var(--compa11y-radio-size, 1.25rem)",height:"var(--compa11y-radio-size, 1.25rem)",minWidth:"24px",minHeight:"24px",border:C?"var(--compa11y-radio-checked-border, 2px solid #0066cc)":"var(--compa11y-radio-border, 2px solid #666)",borderRadius:"50%",background:C?"var(--compa11y-radio-checked-bg, #0066cc)":"var(--compa11y-radio-bg, white)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,transition:"all 0.15s ease",pointerEvents:"none",...R?{outline:"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"2px"}:{}},children:jsxRuntime.jsx("div",{"aria-hidden":"true",style:{width:"var(--compa11y-radio-dot-size, 0.5rem)",height:"var(--compa11y-radio-dot-size, 0.5rem)",borderRadius:"50%",background:"var(--compa11y-radio-dot-color, white)",opacity:C?1:0,transform:C?"scale(1)":"scale(0)",transition:"all 0.15s ease"}})})]}),(A||h)&&jsxRuntime.jsxs("div",{style:T?{}:{display:"flex",flexDirection:"column",gap:"0.125rem",paddingTop:"0.125rem"},children:[A&&jsxRuntime.jsx("span",{id:g,className:"compa11y-radio-label",style:T?{}:{color:"var(--compa11y-radio-label-color, inherit)",fontSize:"var(--compa11y-radio-label-size, 1rem)"},children:$}),h&&jsxRuntime.jsx("span",{id:f,className:"compa11y-radio-hint",style:T?{}:{color:"var(--compa11y-radio-hint-color, #666)",fontSize:"var(--compa11y-radio-hint-size, 0.8125rem)"},children:n})]})]})});Ae.displayName="Radio";var Yt=Object.assign(Oe,{Radio:Ae});var Tn=core.createComponentWarnings("Switch"),mt=react.forwardRef(function({checked:t,defaultChecked:c=false,onCheckedChange:r,label:e,disabled:n=false,unstyled:i=false,className:l,size:o="md","aria-label":a,"aria-labelledby":p,onClick:s,...b},f){let u=`${chunkMAR6RBHF_cjs.a("switch")}-label`,{announce:T}=chunkJS3UD7KS_cjs.a(),[C,S]=react.useState(c),R=t!==void 0,d=R?t:C;react.useEffect(()=>{!e&&!a&&!p&&Tn.warning("Switch has no accessible label. Screen readers need this to identify the switch.",'Add label="Description", aria-label="...", or aria-labelledby="..."');},[e,a,p]);let y=react.useCallback(()=>{if(n)return;let I=!d;R||S(I),r?.(I),T(`${e||a||"Switch"} ${I?"on":"off"}`);},[d,n,R,r,e,a,T]),w=react.useCallback(I=>{s?.(I),I.defaultPrevented||y();},[s,y]),E=chunkAJ7JSWUT_cjs.a({" ":()=>{y();},Enter:()=>{y();}},{preventDefault:true}),P=I=>{b.onKeyDown?.(I),I.defaultPrevented||E.onKeyDown(I);},O=a,N=p||(e?u:void 0),A={display:"inline-flex",alignItems:"center"},g={sm:{width:32,height:18,thumb:14,translate:14},md:{width:44,height:24,thumb:20,translate:20},lg:{width:56,height:30,thumb:26,translate:26}}[o],h={position:"relative",display:"inline-flex",alignItems:"center",flexShrink:0,width:g.width,height:g.height,border:"none",padding:2,cursor:n?"not-allowed":"pointer"},F=i?{}:{backgroundColor:d?"#0066cc":"#d1d5db",borderRadius:g.height/2,transition:"background-color 0.2s ease",opacity:n?.5:1},H={position:"absolute",left:2,width:g.thumb,height:g.thumb,pointerEvents:"none",transform:d?`translateX(${g.translate}px)`:"translateX(0)"},D=i?{}:{backgroundColor:"white",borderRadius:"50%",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.2)",transition:"transform 0.2s ease"},z=i?{marginLeft:8,userSelect:"none",cursor:n?"not-allowed":"pointer"}:{marginLeft:8,userSelect:"none",cursor:n?"not-allowed":"pointer",opacity:n?.5:1};return jsxRuntime.jsxs("div",{style:A,"data-compa11y-switch-wrapper":true,"data-size":o,children:[jsxRuntime.jsx("button",{ref:f,type:"button",role:"switch","aria-checked":d,"aria-label":O,"aria-labelledby":N,disabled:n,onClick:w,onKeyDown:P,className:l,style:{...h,...F},tabIndex:n?-1:0,"data-compa11y-switch":true,"data-checked":d,"data-disabled":n||void 0,"data-size":o,...b,onFocus:I=>{i||(I.currentTarget.style.outline="2px solid #0066cc",I.currentTarget.style.outlineOffset="2px"),b.onFocus?.(I);},onBlur:I=>{i||(I.currentTarget.style.outline="none"),b.onBlur?.(I);},children:jsxRuntime.jsx("span",{style:{...H,...D},"data-compa11y-switch-thumb":true,"aria-hidden":"true"})}),e&&jsxRuntime.jsx("label",{id:u,onClick:n?void 0:()=>y(),style:z,"data-compa11y-switch-label":true,children:e})]})});mt.displayName="Switch";var In=core.createComponentWarnings("Listbox"),Qt=react.createContext(null);function De(){let x=react.useContext(Qt);if(!x)throw new Error("[Compa11y Listbox]: Option/Group must be used within a Listbox.");return x}var eo=react.createContext({groupDisabled:false}),Be=react.forwardRef(function({value:t,defaultValue:c,onValueChange:r,multiple:e=false,disabled:n=false,discoverable:i=true,orientation:l="vertical",unstyled:o=false,className:a="",children:p,"aria-label":s,"aria-labelledby":b},f){let m=chunkMAR6RBHF_cjs.a("listbox"),{announce:u}=chunkJS3UD7KS_cjs.a(),[T,C]=react.useState(()=>c??(e?[]:"")),S=t!==void 0,R=S?t:T,d=react.useMemo(()=>e?new Set(Array.isArray(R)?R:[]):new Set(R?[String(R)]:[]),[R,e]),[y,w]=react.useState(null),E=react.useRef(new Map),[P,O]=react.useState(0),N=react.useCallback((v,k,M)=>{E.current.set(v,{disabled:k,label:M}),O(L=>L+1);},[]),A=react.useCallback(v=>{E.current.delete(v),O(k=>k+1);},[]),$=react.useCallback((v,k)=>{let M=E.current.get(v);M&&E.current.set(v,{...M,disabled:k});},[]),g=react.useMemo(()=>{let v=[];return E.current.forEach((k,M)=>{!k.disabled&&!n&&v.push(M);}),v},[P,n]);react.useEffect(()=>{!s&&!b&&In.warning("Listbox has no accessible label. Screen readers need this.",'Add aria-label="..." or aria-labelledby="..."');},[s,b]);let h=react.useCallback(v=>d.has(v),[d]),F=react.useCallback(v=>{if(n)return;let k=E.current.get(v);if(k?.disabled)return;let M,L=k?.label||v;if(e){let G=new Set(d);G.has(v)?(G.delete(v),u(`${L} deselected`,{politeness:"polite"})):(G.add(v),u(`${L} selected`,{politeness:"polite"})),M=Array.from(G);}else M=v,u(`${L} selected`,{politeness:"polite"});S||C(M),r?.(M);},[n,e,d,S,r,u]),H=react.useCallback(v=>{if(g.length===0)return;let k=y?g.indexOf(y):-1,M;switch(v){case "next":M=k<0?0:Math.min(k+1,g.length-1);break;case "prev":M=k<0?g.length-1:Math.max(k-1,0);break;case "first":M=0;break;case "last":M=g.length-1;break}let L=g[M];if(L!==void 0)if(w(L),e){let Re=E.current.get(L)?.label||L,xe=d.has(L);u(`${Re}${xe?", selected":""}`,{politeness:"polite"});}else {let Re=E.current.get(L)?.label||L,xe=L;S||C(xe),r?.(xe),u(`${Re} selected`,{politeness:"polite"});}},[g,y,e,S,r,u,d]),D=react.useCallback(()=>{y&&e&&F(y);},[y,e,F]),z=react.useCallback(()=>{if(!e||!y)return;let v=g.indexOf(y);if(v<0)return;let k=g.slice(0,v+1),M=new Set(d);k.forEach(G=>M.add(G));let L=Array.from(M);S||C(L),r?.(L),w(g[0]??null),u(`${k.length} items selected`,{politeness:"polite"});},[e,y,g,d,S,r,u]),I=react.useCallback(()=>{if(!e||!y)return;let v=g.indexOf(y);if(v<0)return;let k=g.slice(v),M=new Set(d);k.forEach(G=>M.add(G));let L=Array.from(M);S||C(L),r?.(L),w(g[g.length-1]??null),u(`${k.length} items selected`,{politeness:"polite"});},[e,y,g,d,S,r,u]),U=react.useCallback(()=>{if(!e)return;let v=g.every(M=>d.has(M)),k;v?(k=[],u("All deselected",{politeness:"polite"})):(k=[...g],u("All selected",{politeness:"polite"})),S||C(k),r?.(k);},[e,g,d,S,r,u]),q=react.useMemo(()=>{let v={ArrowDown:()=>H("next"),ArrowUp:()=>H("prev"),Home:()=>H("first"),End:()=>H("last")};return e&&(v[" "]=()=>D(),v["Shift+ArrowDown"]=()=>{H("next"),setTimeout(()=>D(),0);},v["Shift+ArrowUp"]=()=>{H("prev"),setTimeout(()=>D(),0);},v["Ctrl+Shift+Home"]=()=>z(),v["Ctrl+Shift+End"]=()=>I(),v["Ctrl+a"]=()=>U(),v["Meta+a"]=()=>U()),v},[e,H,D,z,I,U]),W=chunkAJ7JSWUT_cjs.a(q,{preventDefault:true,stopPropagation:true,disabled:n}),K=react.useMemo(()=>Array.from(E.current.values()).map(v=>v.label),[P]),V=chunkAJ7JSWUT_cjs.e(K,v=>{for(let[k,M]of E.current.entries())if(M.label===v&&!M.disabled){if(w(k),!e){let L=k;S||C(L),r?.(L),u(`${v} selected`,{politeness:"polite"});}break}},{disabled:n}),j=react.useCallback(v=>{W.onKeyDown(v),v.defaultPrevented||V.onKeyDown(v);},[W,V]),X=react.useCallback(()=>{if(!y){if(!e&&R&&typeof R=="string"){w(R);return}if(e&&Array.isArray(R)&&R.length>0){w(R[0]??null);return}g.length>0&&w(g[0]??null);}},[y,e,R,g]),J=react.useCallback(()=>{},[]),_=react.useRef(null);react.useEffect(()=>{y&&_.current&&_.current.querySelector(`[data-value="${CSS.escape(y)}"]`)?.scrollIntoView({block:"nearest"});},[y]);let ee=react.useMemo(()=>({multiple:e,disabled:n,discoverable:i,unstyled:o,orientation:l,selectedValues:d,focusedValue:y,onSelect:F,onFocusOption:w,registerOption:N,unregisterOption:A,updateOptionDisabled:$,isSelected:h,listboxId:m}),[e,n,i,o,l,d,y,F,N,A,$,h,m]),oe=react.useCallback(v=>{_.current=v,typeof f=="function"?f(v):f&&(f.current=v);},[f]),ne=y?`${m}-option-${y}`:void 0;return jsxRuntime.jsx(Qt.Provider,{value:ee,children:jsxRuntime.jsx("div",{ref:oe,role:"listbox","aria-label":s,"aria-labelledby":b,"aria-orientation":l,"aria-multiselectable":e||void 0,"aria-disabled":n||void 0,"aria-activedescendant":ne,tabIndex:n&&!i?-1:0,className:`compa11y-listbox ${a}`.trim(),"data-compa11y-listbox":"","data-orientation":l,"data-disabled":n?"true":void 0,"data-multiple":e?"true":void 0,onKeyDown:j,onFocus:X,onBlur:J,style:o?{}:{width:"var(--compa11y-listbox-width, 250px)",maxHeight:"var(--compa11y-listbox-max-height, 300px)",overflowY:"auto",border:"var(--compa11y-listbox-border, 1px solid #e0e0e0)",borderRadius:"var(--compa11y-listbox-radius, 4px)",background:"var(--compa11y-listbox-bg, white)",padding:"var(--compa11y-listbox-padding, 0.25rem 0)",...n?{opacity:"var(--compa11y-listbox-disabled-opacity, 0.5)",cursor:"not-allowed"}:{}},children:p})})});Be.displayName="Listbox";var ze=react.forwardRef(function({value:t,disabled:c=false,discoverable:r,unstyled:e,className:n="",children:i,"aria-label":l},o){let a=De(),{groupDisabled:p}=react.useContext(eo),s=a.disabled||p||c,b=e??a.unstyled,f=a.isSelected(t),m=a.focusedValue===t,u=`${a.listboxId}-option-${t}`,T=react.useRef(""),C=react.useRef(null),S=react.useCallback(d=>{C.current=d,typeof o=="function"?o(d):o&&(o.current=d);},[o]);react.useEffect(()=>{let d=typeof i=="string"?i:C.current?.textContent?.trim()||t;return T.current=d,a.registerOption(t,s,d),()=>a.unregisterOption(t)},[t]),react.useEffect(()=>{a.updateOptionDisabled(t,s);},[s,t]);let R=react.useCallback(d=>{if(s){d.preventDefault();return}a.onFocusOption(t),a.onSelect(t);},[s,a,t]);return jsxRuntime.jsxs("div",{ref:S,id:u,role:"option","aria-selected":f,"aria-disabled":s||void 0,"aria-label":l,className:`compa11y-listbox-option ${n}`.trim(),"data-compa11y-listbox-option":"","data-value":t,"data-selected":f?"true":"false","data-focused":m?"true":"false","data-disabled":s?"true":void 0,onClick:R,style:b?{cursor:s?"not-allowed":"pointer"}:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"var(--compa11y-listbox-option-padding, 0.5rem 0.75rem)",cursor:s?"not-allowed":"pointer",userSelect:"none",transition:"background 0.1s ease",background:m?f?"var(--compa11y-listbox-option-selected-hover-bg, #cce0ff)":"var(--compa11y-listbox-option-hover-bg, #f5f5f5)":f?"var(--compa11y-listbox-option-selected-bg, #e6f0ff)":"transparent",fontWeight:f?500:"normal",opacity:s?.5:1},children:[jsxRuntime.jsx("span",{style:{flex:1},children:i}),f&&!b&&jsxRuntime.jsx("span",{"aria-hidden":"true",style:{fontSize:"0.875rem",color:"var(--compa11y-listbox-check-color, #0066cc)",marginLeft:"0.5rem"},children:"\u2713"})]})});ze.displayName="ListboxOption";var Ge=react.forwardRef(function({label:t,disabled:c=false,unstyled:r,className:e="",children:n},i){let l=De(),o=r??l.unstyled,a=chunkMAR6RBHF_cjs.a("listbox-group"),p=react.useMemo(()=>({groupDisabled:l.disabled||c}),[l.disabled,c]);return jsxRuntime.jsx(eo.Provider,{value:p,children:jsxRuntime.jsxs("div",{ref:i,role:"group","aria-labelledby":a,"aria-disabled":c||void 0,className:`compa11y-listbox-group ${e}`.trim(),"data-compa11y-listbox-group":"","data-disabled":c?"true":void 0,style:o?{}:{opacity:c?.5:1},children:[jsxRuntime.jsx("div",{id:a,role:"presentation",style:o?{}:{padding:"var(--compa11y-listbox-group-label-padding, 0.5rem 0.75rem 0.25rem)",fontSize:"var(--compa11y-listbox-group-label-size, 0.75rem)",fontWeight:600,color:"var(--compa11y-listbox-group-label-color, #666)",textTransform:"uppercase",letterSpacing:"0.05em"},children:t}),n]})})});Ge.displayName="ListboxGroup";var to=Object.assign(Be,{Option:ze,Group:Ge});var ro=react.createContext(null);function Te(){let x=react.useContext(ro);if(!x)throw new Error("[Compa11y Input]: Input sub-components (Input.Label, Input.Field, etc.) must be used within <Input>.");return x}var $e=react.forwardRef(function({children:t,className:c},r){let e=Te();return jsxRuntime.jsxs("label",{ref:r,id:e.labelId,htmlFor:e.fieldId,"data-compa11y-input-label":"",className:c,style:e.unstyled?{}:{display:"block",color:e.disabled?"var(--compa11y-input-disabled-color, #999)":"var(--compa11y-input-label-color, inherit)",fontSize:"var(--compa11y-input-label-size, 0.875rem)",fontWeight:"var(--compa11y-input-label-weight, 500)"},children:[t,e.required&&jsxRuntime.jsx("span",{"data-compa11y-input-required":"","aria-hidden":"true",style:e.unstyled?{}:{color:"var(--compa11y-input-required-color, #ef4444)",marginLeft:"0.125rem"},children:"*"})]})});$e.displayName="InputLabel";var Ke=react.forwardRef(function({type:t="text",onFocus:c,onBlur:r,className:e,style:n,...i},l){let o=Te(),a=react.useRef(null),p=react.useCallback(u=>{a.current=u,typeof l=="function"?l(u):l&&(l.current=u);},[l]),s=react.useCallback(u=>{o.setValue(u.target.value);},[o.setValue]),b=react.useCallback(u=>{o.focusProps.onFocus(),c?.(u);},[o.focusProps,c]),f=react.useCallback(u=>{o.focusProps.onBlur(),r?.(u);},[o.focusProps,r]),m=[];return m.push(o.hintId),o.hasError&&m.push(o.errorId),jsxRuntime.jsx("input",{ref:p,id:o.fieldId,type:t,value:o.value,onChange:s,onFocus:b,onBlur:f,disabled:o.disabled,readOnly:o.readOnly,"aria-describedby":m.join(" ")||void 0,"aria-invalid":o.hasError?"true":void 0,"aria-required":o.required?"true":void 0,"data-compa11y-input-field":"",className:e,style:o.unstyled?n:{width:"100%",padding:"var(--compa11y-input-padding, 0.5rem 0.75rem)",border:o.hasError?"1px solid var(--compa11y-input-border-error, #ef4444)":"var(--compa11y-input-border, 1px solid #ccc)",borderRadius:"var(--compa11y-input-radius, 4px)",fontSize:"var(--compa11y-input-font-size, 0.875rem)",fontFamily:"inherit",background:o.disabled?"var(--compa11y-input-disabled-bg, #f5f5f5)":o.readOnly?"var(--compa11y-input-readonly-bg, #f9f9f9)":"var(--compa11y-input-bg, white)",color:"inherit",cursor:o.disabled?"not-allowed":void 0,opacity:o.disabled?"var(--compa11y-input-disabled-opacity, 0.7)":void 0,...o.isFocusVisible&&!o.disabled?{outline:o.hasError?"2px solid var(--compa11y-input-border-error, #ef4444)":"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"-1px",borderColor:o.hasError?"var(--compa11y-input-border-error, #ef4444)":"var(--compa11y-input-border-focus, #0066cc)"}:{},...n},...i})});Ke.displayName="InputField";var je=react.forwardRef(function({children:t,className:c},r){let e=Te();return jsxRuntime.jsx("div",{ref:r,id:e.hintId,"data-compa11y-input-hint":"",className:c,style:e.unstyled?{}:{color:"var(--compa11y-input-hint-color, #666)",fontSize:"var(--compa11y-input-hint-size, 0.8125rem)"},children:t})});je.displayName="InputHint";var We=react.forwardRef(function({children:t,className:c},r){let e=Te();return t?jsxRuntime.jsx("div",{ref:r,id:e.errorId,role:"alert","data-compa11y-input-error":"",className:c,style:e.unstyled?{}:{color:"var(--compa11y-input-error-color, #ef4444)",fontSize:"var(--compa11y-input-error-size, 0.8125rem)"},children:t}):null});We.displayName="InputError";var Ue=react.forwardRef(function({value:t,defaultValue:c="",onValueChange:r,type:e="text",label:n,hint:i,error:l,required:o=false,disabled:a=false,readOnly:p=false,"aria-label":s,"aria-labelledby":b,placeholder:f,name:m,autoComplete:u,maxLength:T,minLength:C,pattern:S,inputMode:R,id:d,unstyled:y=false,className:w,onFocus:E,onBlur:P,children:O},N){let A=chunkMAR6RBHF_cjs.a("input"),$=d||A,g=`${$}-field`,h=`${$}-label`,F=`${$}-hint`,H=`${$}-error`,[D,z]=react.useState(c),I=t!==void 0,U=I?t:D,q=react.useCallback(G=>{I||z(G),r?.(G);},[I,r]),{isFocusVisible:W,focusProps:K}=te();react.useEffect(()=>{process.env.NODE_ENV!=="production"&&!(react.Children.count(O)>0)&&!n&&!s&&!b&&console.warn("[Compa11y Input]: Input has no accessible label. Screen readers need this to identify the input. Use label prop, aria-label, or aria-labelledby.");},[O,n,s,b]);let V=!!l,j=react.Children.count(O)>0,X={fieldId:g,labelId:h,hintId:F,errorId:H,value:U,setValue:q,hasError:V,disabled:a,readOnly:p,required:o,isFocusVisible:W,focusProps:K,unstyled:y},J={"data-compa11y-input":"","data-error":V?"true":"false","data-disabled":a?"true":"false","data-required":o?"true":"false","data-readonly":p?"true":"false"},_=y?{}:{display:"flex",flexDirection:"column",gap:"0.25rem"};if(j)return jsxRuntime.jsx(ro.Provider,{value:X,children:jsxRuntime.jsx("div",{...J,className:w,style:_,children:O})});let ee=react.useRef(null),oe=react.useCallback(G=>{ee.current=G,typeof N=="function"?N(G):N&&(N.current=G);},[N]),ne=react.useCallback(G=>{q(G.target.value);},[q]),v=react.useCallback(G=>{K.onFocus(),E?.(G);},[K,E]),k=react.useCallback(G=>{K.onBlur(),P?.(G);},[K,P]),M=[];i&&M.push(F),V&&M.push(H);let L=M.length>0?M.join(" "):void 0;return jsxRuntime.jsxs("div",{...J,className:w,style:_,children:[n&&jsxRuntime.jsxs("label",{id:h,htmlFor:g,"data-compa11y-input-label":"",style:y?{}:{display:"block",color:a?"var(--compa11y-input-disabled-color, #999)":"var(--compa11y-input-label-color, inherit)",fontSize:"var(--compa11y-input-label-size, 0.875rem)",fontWeight:"var(--compa11y-input-label-weight, 500)"},children:[n,o&&jsxRuntime.jsx("span",{"data-compa11y-input-required":"","aria-hidden":"true",style:y?{}:{color:"var(--compa11y-input-required-color, #ef4444)",marginLeft:"0.125rem"},children:"*"})]}),jsxRuntime.jsx("input",{ref:oe,id:g,type:e,value:U,onChange:ne,onFocus:v,onBlur:k,disabled:a,readOnly:p,required:o,placeholder:f,name:m,autoComplete:u,maxLength:T,minLength:C,pattern:S,inputMode:R,"aria-label":n?void 0:s,"aria-labelledby":!n&&b?b:n?h:void 0,"aria-describedby":L,"aria-invalid":V?"true":void 0,"aria-required":o?"true":void 0,"data-compa11y-input-field":"",style:y?{}:{width:"100%",padding:"var(--compa11y-input-padding, 0.5rem 0.75rem)",border:V?"1px solid var(--compa11y-input-border-error, #ef4444)":"var(--compa11y-input-border, 1px solid #ccc)",borderRadius:"var(--compa11y-input-radius, 4px)",fontSize:"var(--compa11y-input-font-size, 0.875rem)",fontFamily:"inherit",background:a?"var(--compa11y-input-disabled-bg, #f5f5f5)":p?"var(--compa11y-input-readonly-bg, #f9f9f9)":"var(--compa11y-input-bg, white)",color:"inherit",cursor:a?"not-allowed":void 0,opacity:a?"var(--compa11y-input-disabled-opacity, 0.7)":void 0,...W&&!a?{outline:V?"2px solid var(--compa11y-input-border-error, #ef4444)":"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"-1px",borderColor:V?"var(--compa11y-input-border-error, #ef4444)":"var(--compa11y-input-border-focus, #0066cc)"}:{}}}),i&&jsxRuntime.jsx("div",{id:F,"data-compa11y-input-hint":"",style:y?{}:{color:"var(--compa11y-input-hint-color, #666)",fontSize:"var(--compa11y-input-hint-size, 0.8125rem)"},children:i}),V&&jsxRuntime.jsx("div",{id:H,role:"alert","data-compa11y-input-error":"",style:y?{}:{color:"var(--compa11y-input-error-color, #ef4444)",fontSize:"var(--compa11y-input-error-size, 0.8125rem)"},children:l})]})});Ue.displayName="Input";var io=Object.assign(Ue,{Label:$e,Field:Ke,Hint:je,Error:We});var Hn={primary:{background:"var(--compa11y-button-primary-bg, #0066cc)",color:"var(--compa11y-button-primary-color, white)",border:"var(--compa11y-button-primary-border, 1px solid #0066cc)"},secondary:{background:"var(--compa11y-button-secondary-bg, white)",color:"var(--compa11y-button-secondary-color, #333)",border:"var(--compa11y-button-secondary-border, 1px solid #ccc)"},danger:{background:"var(--compa11y-button-danger-bg, #ef4444)",color:"var(--compa11y-button-danger-color, white)",border:"var(--compa11y-button-danger-border, 1px solid #ef4444)"},outline:{background:"var(--compa11y-button-outline-bg, transparent)",color:"var(--compa11y-button-outline-color, #0066cc)",border:"var(--compa11y-button-outline-border, 1px solid #0066cc)"},ghost:{background:"var(--compa11y-button-ghost-bg, transparent)",color:"var(--compa11y-button-ghost-color, #333)",border:"var(--compa11y-button-ghost-border, 1px solid transparent)"}},Fn={sm:{padding:"var(--compa11y-button-padding-sm, 0.25rem 0.5rem)",fontSize:"var(--compa11y-button-font-size-sm, 0.75rem)"},md:{padding:"var(--compa11y-button-padding-md, 0.5rem 1rem)",fontSize:"var(--compa11y-button-font-size-md, 0.875rem)"},lg:{padding:"var(--compa11y-button-padding-lg, 0.75rem 1.5rem)",fontSize:"var(--compa11y-button-font-size-lg, 1rem)"}},ht=react.forwardRef(function({variant:t="secondary",size:c="md",type:r="button",disabled:e=false,discoverable:n=false,loading:i=false,unstyled:l=false,"aria-label":o,className:a,style:p,onClick:s,onFocus:b,onBlur:f,children:m,...u},T){let C=chunkMAR6RBHF_cjs.a("button"),S=react.useRef(null),R=react.useCallback(g=>{S.current=g,typeof T=="function"?T(g):T&&(T.current=g);},[T]),{isFocusVisible:d,focusProps:y}=te();react.useEffect(()=>{process.env.NODE_ENV!=="production"&&!m&&!o&&!u["aria-labelledby"]&&console.warn("[Compa11y Button]: Button has no accessible label. Screen readers need this to identify the button. Add text content, aria-label, or aria-labelledby.");},[m,o,u["aria-labelledby"]]);let w=e&&!n,E=e||i,P=react.useCallback(g=>{if(E){g.preventDefault();return}s?.(g);},[E,s]),O=react.useCallback(g=>{y.onFocus(),b?.(g);},[y,b]),N=react.useCallback(g=>{y.onBlur(),f?.(g);},[y,f]),A={"data-compa11y-button":"","data-variant":t,"data-size":c,"data-disabled":e?"true":"false","data-loading":i?"true":"false"},$=l?{}:{display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"0.5rem",borderRadius:"var(--compa11y-button-radius, 4px)",fontFamily:"inherit",fontWeight:"var(--compa11y-button-font-weight, 500)",lineHeight:"1.5",cursor:E?"not-allowed":"pointer",opacity:e?"var(--compa11y-button-disabled-opacity, 0.5)":void 0,transition:"background-color 0.15s ease, border-color 0.15s ease",...Hn[t],...Fn[c],...d&&!w?{outline:"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"2px"}:{}};return jsxRuntime.jsxs("button",{ref:R,id:C,type:r,disabled:w,tabIndex:e&&!n?void 0:0,"aria-disabled":E?"true":void 0,"aria-busy":i?"true":void 0,"aria-label":o,onClick:P,onFocus:O,onBlur:N,className:a,style:{...$,...p},...A,...u,children:[i&&jsxRuntime.jsx("span",{"data-compa11y-button-spinner":"","aria-hidden":"true",style:l?{}:{display:"inline-block",width:"1em",height:"1em",border:"2px solid currentColor",borderRightColor:"transparent",borderRadius:"50%",animation:"compa11y-spin 0.6s linear infinite"}}),m]})});ht.displayName="Button";var co=react.createContext(null);function Ce(){let x=react.useContext(co);if(!x)throw new Error("[Compa11y Textarea]: Textarea sub-components (Textarea.Label, Textarea.Field, etc.) must be used within <Textarea>.");return x}var _e=react.forwardRef(function({children:t,className:c},r){let e=Ce();return jsxRuntime.jsxs("label",{ref:r,id:e.labelId,htmlFor:e.fieldId,"data-compa11y-textarea-label":"",className:c,style:e.unstyled?{}:{display:"block",color:e.disabled?"var(--compa11y-textarea-disabled-color, #999)":"var(--compa11y-textarea-label-color, inherit)",fontSize:"var(--compa11y-textarea-label-size, 0.875rem)",fontWeight:"var(--compa11y-textarea-label-weight, 500)"},children:[t,e.required&&jsxRuntime.jsx("span",{"data-compa11y-textarea-required":"","aria-hidden":"true",style:e.unstyled?{}:{color:"var(--compa11y-textarea-required-color, #ef4444)",marginLeft:"0.125rem"},children:"*"})]})});_e.displayName="TextareaLabel";var Ye=react.forwardRef(function({onFocus:t,onBlur:c,className:r,style:e,rows:n,...i},l){let o=Ce(),a=react.useRef(null),p=react.useCallback(u=>{a.current=u,typeof l=="function"?l(u):l&&(l.current=u);},[l]),s=react.useCallback(u=>{o.setValue(u.target.value);},[o.setValue]),b=react.useCallback(u=>{o.focusProps.onFocus(),t?.(u);},[o.focusProps,t]),f=react.useCallback(u=>{o.focusProps.onBlur(),c?.(u);},[o.focusProps,c]),m=[];return m.push(o.hintId),o.hasError&&m.push(o.errorId),jsxRuntime.jsx("textarea",{ref:p,id:o.fieldId,rows:n??o.rows,value:o.value,onChange:s,onFocus:b,onBlur:f,disabled:o.disabled,readOnly:o.readOnly,"aria-describedby":m.join(" ")||void 0,"aria-invalid":o.hasError?"true":void 0,"aria-required":o.required?"true":void 0,"data-compa11y-textarea-field":"",className:r,style:o.unstyled?e:{width:"100%",padding:"var(--compa11y-textarea-padding, 0.5rem 0.75rem)",border:o.hasError?"1px solid var(--compa11y-textarea-border-error, #ef4444)":"var(--compa11y-textarea-border, 1px solid #ccc)",borderRadius:"var(--compa11y-textarea-radius, 4px)",fontSize:"var(--compa11y-textarea-font-size, 0.875rem)",fontFamily:"inherit",lineHeight:"1.5",resize:o.resize,background:o.disabled?"var(--compa11y-textarea-disabled-bg, #f5f5f5)":o.readOnly?"var(--compa11y-textarea-readonly-bg, #f9f9f9)":"var(--compa11y-textarea-bg, white)",color:"inherit",cursor:o.disabled?"not-allowed":void 0,opacity:o.disabled?"var(--compa11y-textarea-disabled-opacity, 0.7)":void 0,...o.isFocusVisible&&!o.disabled?{outline:o.hasError?"2px solid var(--compa11y-textarea-border-error, #ef4444)":"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"-1px",borderColor:o.hasError?"var(--compa11y-textarea-border-error, #ef4444)":"var(--compa11y-textarea-border-focus, #0066cc)"}:{},...e},...i})});Ye.displayName="TextareaField";var Xe=react.forwardRef(function({children:t,className:c},r){let e=Ce();return jsxRuntime.jsx("div",{ref:r,id:e.hintId,"data-compa11y-textarea-hint":"",className:c,style:e.unstyled?{}:{color:"var(--compa11y-textarea-hint-color, #666)",fontSize:"var(--compa11y-textarea-hint-size, 0.8125rem)"},children:t})});Xe.displayName="TextareaHint";var Je=react.forwardRef(function({children:t,className:c},r){let e=Ce();return t?jsxRuntime.jsx("div",{ref:r,id:e.errorId,role:"alert","data-compa11y-textarea-error":"",className:c,style:e.unstyled?{}:{color:"var(--compa11y-textarea-error-color, #ef4444)",fontSize:"var(--compa11y-textarea-error-size, 0.8125rem)"},children:t}):null});Je.displayName="TextareaError";var Ze=react.forwardRef(function({value:t,defaultValue:c="",onValueChange:r,rows:e=3,resize:n="vertical",label:i,hint:l,error:o,required:a=false,disabled:p=false,readOnly:s=false,"aria-label":b,"aria-labelledby":f,placeholder:m,name:u,autoComplete:T,maxLength:C,minLength:S,id:R,unstyled:d=false,className:y,onFocus:w,onBlur:E,children:P},O){let N=chunkMAR6RBHF_cjs.a("textarea"),A=R||N,$=`${A}-field`,g=`${A}-label`,h=`${A}-hint`,F=`${A}-error`,[H,D]=react.useState(c),z=t!==void 0,I=z?t:H,U=react.useCallback(L=>{z||D(L),r?.(L);},[z,r]),{isFocusVisible:q,focusProps:W}=te();react.useEffect(()=>{process.env.NODE_ENV!=="production"&&!(react.Children.count(P)>0)&&!i&&!b&&!f&&console.warn("[Compa11y Textarea]: Textarea has no accessible label. Screen readers need this to identify the textarea. Use label prop, aria-label, or aria-labelledby.");},[P,i,b,f]);let K=!!o,V=react.Children.count(P)>0,j={fieldId:$,labelId:g,hintId:h,errorId:F,value:I,setValue:U,hasError:K,disabled:p,readOnly:s,required:a,rows:e,resize:n,isFocusVisible:q,focusProps:W,unstyled:d},X={"data-compa11y-textarea":"","data-error":K?"true":"false","data-disabled":p?"true":"false","data-required":a?"true":"false","data-readonly":s?"true":"false"},J=d?{}:{display:"flex",flexDirection:"column",gap:"0.25rem"};if(V)return jsxRuntime.jsx(co.Provider,{value:j,children:jsxRuntime.jsx("div",{...X,className:y,style:J,children:P})});let _=react.useRef(null),ee=react.useCallback(L=>{_.current=L,typeof O=="function"?O(L):O&&(O.current=L);},[O]),oe=react.useCallback(L=>{U(L.target.value);},[U]),ne=react.useCallback(L=>{W.onFocus(),w?.(L);},[W,w]),v=react.useCallback(L=>{W.onBlur(),E?.(L);},[W,E]),k=[];l&&k.push(h),K&&k.push(F);let M=k.length>0?k.join(" "):void 0;return jsxRuntime.jsxs("div",{...X,className:y,style:J,children:[i&&jsxRuntime.jsxs("label",{id:g,htmlFor:$,"data-compa11y-textarea-label":"",style:d?{}:{display:"block",color:p?"var(--compa11y-textarea-disabled-color, #999)":"var(--compa11y-textarea-label-color, inherit)",fontSize:"var(--compa11y-textarea-label-size, 0.875rem)",fontWeight:"var(--compa11y-textarea-label-weight, 500)"},children:[i,a&&jsxRuntime.jsx("span",{"data-compa11y-textarea-required":"","aria-hidden":"true",style:d?{}:{color:"var(--compa11y-textarea-required-color, #ef4444)",marginLeft:"0.125rem"},children:"*"})]}),jsxRuntime.jsx("textarea",{ref:ee,id:$,rows:e,value:I,onChange:oe,onFocus:ne,onBlur:v,disabled:p,readOnly:s,required:a,placeholder:m,name:u,autoComplete:T,maxLength:C,minLength:S,"aria-label":i?void 0:b,"aria-labelledby":!i&&f?f:i?g:void 0,"aria-describedby":M,"aria-invalid":K?"true":void 0,"aria-required":a?"true":void 0,"data-compa11y-textarea-field":"",style:d?{}:{width:"100%",padding:"var(--compa11y-textarea-padding, 0.5rem 0.75rem)",border:K?"1px solid var(--compa11y-textarea-border-error, #ef4444)":"var(--compa11y-textarea-border, 1px solid #ccc)",borderRadius:"var(--compa11y-textarea-radius, 4px)",fontSize:"var(--compa11y-textarea-font-size, 0.875rem)",fontFamily:"inherit",lineHeight:"1.5",resize:n,background:p?"var(--compa11y-textarea-disabled-bg, #f5f5f5)":s?"var(--compa11y-textarea-readonly-bg, #f9f9f9)":"var(--compa11y-textarea-bg, white)",color:"inherit",cursor:p?"not-allowed":void 0,opacity:p?"var(--compa11y-textarea-disabled-opacity, 0.7)":void 0,...q&&!p?{outline:K?"2px solid var(--compa11y-textarea-border-error, #ef4444)":"2px solid var(--compa11y-focus-color, #0066cc)",outlineOffset:"-1px",borderColor:K?"var(--compa11y-textarea-border-error, #ef4444)":"var(--compa11y-textarea-border-focus, #0066cc)"}:{}}}),l&&jsxRuntime.jsx("div",{id:h,"data-compa11y-textarea-hint":"",style:d?{}:{color:"var(--compa11y-textarea-hint-color, #666)",fontSize:"var(--compa11y-textarea-hint-size, 0.8125rem)"},children:l}),K&&jsxRuntime.jsx("div",{id:F,role:"alert","data-compa11y-textarea-error":"",style:d?{}:{color:"var(--compa11y-textarea-error-color, #ef4444)",fontSize:"var(--compa11y-textarea-error-size, 0.8125rem)"},children:o})]})});Ze.displayName="Textarea";var uo=Object.assign(Ze,{Label:_e,Field:Ye,Hint:Xe,Error:Je});Object.defineProperty(exports,"Dialog",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.k}});Object.defineProperty(exports,"DialogActions",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.j}});Object.defineProperty(exports,"DialogBase",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.d}});Object.defineProperty(exports,"DialogClose",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.h}});Object.defineProperty(exports,"DialogContent",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.i}});Object.defineProperty(exports,"DialogDescription",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.g}});Object.defineProperty(exports,"DialogTitle",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.f}});Object.defineProperty(exports,"DialogTrigger",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.e}});Object.defineProperty(exports,"useDialogContext",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.c}});Object.defineProperty(exports,"useFocusTrap",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.a}});Object.defineProperty(exports,"useFocusTrapControls",{enumerable:true,get:function(){return chunkFD4F6ONU_cjs.b}});Object.defineProperty(exports,"ActionMenu",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.i}});Object.defineProperty(exports,"ActionMenuBase",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.c}});Object.defineProperty(exports,"ActionMenuContent",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.e}});Object.defineProperty(exports,"ActionMenuItem",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.f}});Object.defineProperty(exports,"ActionMenuLabel",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.h}});Object.defineProperty(exports,"ActionMenuSeparator",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.g}});Object.defineProperty(exports,"ActionMenuTrigger",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.d}});Object.defineProperty(exports,"useActionMenuContext",{enumerable:true,get:function(){return chunk36S2JYVF_cjs.a}});Object.defineProperty(exports,"Tab",{enumerable:true,get:function(){return chunkDWU3PTJO_cjs.d}});Object.defineProperty(exports,"TabList",{enumerable:true,get:function(){return chunkDWU3PTJO_cjs.c}});Object.defineProperty(exports,"TabPanel",{enumerable:true,get:function(){return chunkDWU3PTJO_cjs.e}});Object.defineProperty(exports,"Tabs",{enumerable:true,get:function(){return chunkDWU3PTJO_cjs.f}});Object.defineProperty(exports,"TabsBase",{enumerable:true,get:function(){return chunkDWU3PTJO_cjs.b}});Object.defineProperty(exports,"useTabsContext",{enumerable:true,get:function(){return chunkDWU3PTJO_cjs.a}});Object.defineProperty(exports,"ToastProvider",{enumerable:true,get:function(){return chunkDDFEION3_cjs.b}});Object.defineProperty(exports,"ToastViewport",{enumerable:true,get:function(){return chunkDDFEION3_cjs.c}});Object.defineProperty(exports,"useToast",{enumerable:true,get:function(){return chunkDDFEION3_cjs.a}});Object.defineProperty(exports,"useToastHelpers",{enumerable:true,get:function(){return chunkDDFEION3_cjs.d}});Object.defineProperty(exports,"Combobox",{enumerable:true,get:function(){return chunkFOVHQAY5_cjs.e}});Object.defineProperty(exports,"ComboboxBase",{enumerable:true,get:function(){return chunkFOVHQAY5_cjs.a}});Object.defineProperty(exports,"ComboboxInput",{enumerable:true,get:function(){return chunkFOVHQAY5_cjs.b}});Object.defineProperty(exports,"ComboboxListbox",{enumerable:true,get:function(){return chunkFOVHQAY5_cjs.c}});Object.defineProperty(exports,"ComboboxOption",{enumerable:true,get:function(){return chunkFOVHQAY5_cjs.d}});Object.defineProperty(exports,"useAnnounceLoading",{enumerable:true,get:function(){return chunkJS3UD7KS_cjs.c}});Object.defineProperty(exports,"useAnnounceOnChange",{enumerable:true,get:function(){return chunkJS3UD7KS_cjs.b}});Object.defineProperty(exports,"useAnnouncer",{enumerable:true,get:function(){return chunkJS3UD7KS_cjs.a}});Object.defineProperty(exports,"useGridKeyboard",{enumerable:true,get:function(){return chunkAJ7JSWUT_cjs.d}});Object.defineProperty(exports,"useKeyPressed",{enumerable:true,get:function(){return chunkAJ7JSWUT_cjs.f}});Object.defineProperty(exports,"useKeyboard",{enumerable:true,get:function(){return chunkAJ7JSWUT_cjs.a}});Object.defineProperty(exports,"useMenuKeyboard",{enumerable:true,get:function(){return chunkAJ7JSWUT_cjs.b}});Object.defineProperty(exports,"useTabsKeyboard",{enumerable:true,get:function(){return chunkAJ7JSWUT_cjs.c}});Object.defineProperty(exports,"useTypeAhead",{enumerable:true,get:function(){return chunkAJ7JSWUT_cjs.e}});Object.defineProperty(exports,"useId",{enumerable:true,get:function(){return chunkMAR6RBHF_cjs.a}});Object.defineProperty(exports,"useIdScope",{enumerable:true,get:function(){return chunkMAR6RBHF_cjs.c}});Object.defineProperty(exports,"useIds",{enumerable:true,get:function(){return chunkMAR6RBHF_cjs.b}});Object.defineProperty(exports,"announce",{enumerable:true,get:function(){return core.announce}});Object.defineProperty(exports,"announceAssertive",{enumerable:true,get:function(){return core.announceAssertive}});Object.defineProperty(exports,"announceError",{enumerable:true,get:function(){return core.announceError}});Object.defineProperty(exports,"announcePolite",{enumerable:true,get:function(){return core.announcePolite}});Object.defineProperty(exports,"announceProgress",{enumerable:true,get:function(){return core.announceProgress}});Object.defineProperty(exports,"announceStatus",{enumerable:true,get:function(){return core.announceStatus}});Object.defineProperty(exports,"aria",{enumerable:true,get:function(){return core.aria}});Object.defineProperty(exports,"buildAriaProps",{enumerable:true,get:function(){return core.buildAriaProps}});Object.defineProperty(exports,"checks",{enumerable:true,get:function(){return core.checks}});Object.defineProperty(exports,"createComponentWarnings",{enumerable:true,get:function(){return core.createComponentWarnings}});Object.defineProperty(exports,"hasAccessibleName",{enumerable:true,get:function(){return core.hasAccessibleName}});Object.defineProperty(exports,"isAndroid",{enumerable:true,get:function(){return core.isAndroid}});Object.defineProperty(exports,"isBrowser",{enumerable:true,get:function(){return core.isBrowser}});Object.defineProperty(exports,"isIOS",{enumerable:true,get:function(){return core.isIOS}});Object.defineProperty(exports,"isMac",{enumerable:true,get:function(){return core.isMac}});Object.defineProperty(exports,"mergeAriaIds",{enumerable:true,get:function(){return core.mergeAriaIds}});Object.defineProperty(exports,"prefersDarkMode",{enumerable:true,get:function(){return core.prefersDarkMode}});Object.defineProperty(exports,"prefersHighContrast",{enumerable:true,get:function(){return core.prefersHighContrast}});Object.defineProperty(exports,"prefersReducedMotion",{enumerable:true,get:function(){return core.prefersReducedMotion}});Object.defineProperty(exports,"setWarningHandler",{enumerable:true,get:function(){return core.setWarningHandler}});Object.defineProperty(exports,"warn",{enumerable:true,get:function(){return core.warn}});exports.Button=ht;exports.Checkbox=qt;exports.CheckboxBase=He;exports.CheckboxGroup=we;exports.CheckboxIndicator=Fe;exports.Input=io;exports.InputBase=Ue;exports.InputError=We;exports.InputField=Ke;exports.InputHint=je;exports.InputLabel=$e;exports.Listbox=to;exports.ListboxBase=Be;exports.ListboxGroup=Ge;exports.ListboxOption=ze;exports.Radio=Ae;exports.RadioGroup=Yt;exports.RadioGroupBase=Oe;exports.Select=$t;exports.SelectBase=at;exports.SelectListbox=it;exports.SelectOptionItem=ke;exports.SelectTrigger=rt;exports.Switch=mt;exports.Textarea=uo;exports.TextareaBase=Ze;exports.TextareaError=Je;exports.TextareaField=Ye;exports.TextareaHint=Xe;exports.TextareaLabel=_e;exports.useCheckboxGroupContext=ct;exports.useFocusControl=At;exports.useFocusManager=Ot;exports.useFocusVisible=te;exports.useFocusWithin=Vt;exports.useInputContext=Te;exports.useListboxContext=De;exports.useRadioGroupContext=bt;exports.useRovingTabindex=Qe;exports.useRovingTabindexMap=Nt;exports.useTextareaContext=Ce;
|