@page-speed/forms 0.5.7 → 0.5.9
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/FormContext-089h0j0Q.d.ts +153 -0
- package/dist/FormContext-iHzBALZa.d.cts +153 -0
- package/dist/{chunk-A7R6GEMA.js → chunk-455PI4LV.js} +84 -3
- package/dist/chunk-455PI4LV.js.map +1 -0
- package/dist/{chunk-5WWMVS2I.js → chunk-4ROWNTY6.js} +334 -415
- package/dist/chunk-4ROWNTY6.js.map +1 -0
- package/dist/{chunk-FIDKDYT7.cjs → chunk-ED4UK63G.cjs} +439 -521
- package/dist/chunk-ED4UK63G.cjs.map +1 -0
- package/dist/{chunk-Q7VR374Y.js → chunk-MJYEXJ3U.js} +3 -3
- package/dist/{chunk-Q7VR374Y.js.map → chunk-MJYEXJ3U.js.map} +1 -1
- package/dist/{chunk-KPHMVGTU.cjs → chunk-MUBEMXI7.cjs} +6 -6
- package/dist/{chunk-KPHMVGTU.cjs.map → chunk-MUBEMXI7.cjs.map} +1 -1
- package/dist/chunk-OF6ZYT7A.cjs +287 -0
- package/dist/chunk-OF6ZYT7A.cjs.map +1 -0
- package/dist/{chunk-QQSBW6N3.cjs → chunk-QRI5TMES.cjs} +85 -2
- package/dist/chunk-QRI5TMES.cjs.map +1 -0
- package/dist/chunk-TOPOO33Z.js +263 -0
- package/dist/chunk-TOPOO33Z.js.map +1 -0
- package/dist/core.cjs +13 -9
- package/dist/core.d.cts +66 -141
- package/dist/core.d.ts +66 -141
- package/dist/core.js +3 -3
- package/dist/index.cjs +14 -14
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +3 -3
- package/dist/inputs.cjs +16 -16
- package/dist/inputs.d.cts +1 -1
- package/dist/inputs.d.ts +1 -1
- package/dist/inputs.js +2 -2
- package/dist/integration.cjs +17 -17
- package/dist/integration.d.cts +1 -1
- package/dist/integration.d.ts +1 -1
- package/dist/integration.js +3 -3
- package/dist/{types-CnOCn7b3.d.ts → types-BemGfSPA.d.cts} +27 -1
- package/dist/{types-CnOCn7b3.d.cts → types-BemGfSPA.d.ts} +27 -1
- package/dist/validation-rules.d.cts +1 -1
- package/dist/validation-rules.d.ts +1 -1
- package/dist/validation-utils.d.cts +1 -1
- package/dist/validation-utils.d.ts +1 -1
- package/dist/validation-valibot.d.cts +1 -1
- package/dist/validation-valibot.d.ts +1 -1
- package/dist/validation.d.cts +1 -1
- package/dist/validation.d.ts +1 -1
- package/package.json +1 -1
- package/dist/chunk-5WWMVS2I.js.map +0 -1
- package/dist/chunk-A7R6GEMA.js.map +0 -1
- package/dist/chunk-FIDKDYT7.cjs.map +0 -1
- package/dist/chunk-N2HOVRRN.js +0 -150
- package/dist/chunk-N2HOVRRN.js.map +0 -1
- package/dist/chunk-O4ZLR7AN.cjs +0 -173
- package/dist/chunk-O4ZLR7AN.cjs.map +0 -1
- package/dist/chunk-QQSBW6N3.cjs.map +0 -1
|
@@ -1,94 +1,13 @@
|
|
|
1
|
-
import { cn,
|
|
2
|
-
import * as
|
|
1
|
+
import { cn, FieldLabel, FieldDescription, LabelGroup, Field, INPUT_AUTOFILL_RESET_CLASSES, Button, Input, buttonVariants } from './chunk-455PI4LV.js';
|
|
2
|
+
import * as React19 from 'react';
|
|
3
3
|
import { Dialog as Dialog$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1, Popover as Popover$1 } from 'radix-ui';
|
|
4
4
|
import { Command as Command$1 } from 'cmdk';
|
|
5
5
|
import { useDirection } from '@radix-ui/react-direction';
|
|
6
6
|
import { Slot } from '@radix-ui/react-slot';
|
|
7
7
|
import { getDefaultClassNames, DayPicker } from 'react-day-picker';
|
|
8
8
|
|
|
9
|
-
var Input = React21.forwardRef(
|
|
10
|
-
({ className, type, ...props }, ref) => {
|
|
11
|
-
return /* @__PURE__ */ React21.createElement(
|
|
12
|
-
"input",
|
|
13
|
-
{
|
|
14
|
-
ref,
|
|
15
|
-
type,
|
|
16
|
-
"data-slot": "input",
|
|
17
|
-
className: cn(
|
|
18
|
-
// Core structure - no hardcoded colors, uses CSS variables
|
|
19
|
-
"flex h-9 w-full min-w-0 rounded-md border border-input",
|
|
20
|
-
"bg-transparent px-3 py-1 text-base shadow-sm",
|
|
21
|
-
"transition-colors outline-none md:text-sm",
|
|
22
|
-
// Focus state - uses ring-ring CSS variable (adapts to theme)
|
|
23
|
-
"focus-visible:ring-1 focus-visible:ring-ring",
|
|
24
|
-
// Error state - uses destructive CSS variables (adapts to theme)
|
|
25
|
-
"aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive",
|
|
26
|
-
// Disabled state - no color hardcoding
|
|
27
|
-
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
28
|
-
// File input specific - inherits text color from parent
|
|
29
|
-
"file:inline-flex file:h-7 file:border-0 file:bg-transparent",
|
|
30
|
-
"file:text-sm file:font-medium",
|
|
31
|
-
// Autofill reset - prevents browser from overriding our dynamic colors
|
|
32
|
-
INPUT_AUTOFILL_RESET_CLASSES,
|
|
33
|
-
className
|
|
34
|
-
),
|
|
35
|
-
...props
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
);
|
|
40
|
-
Input.displayName = "Input";
|
|
41
|
-
|
|
42
|
-
// src/inputs/TextInput.tsx
|
|
43
|
-
function TextInput({
|
|
44
|
-
name,
|
|
45
|
-
value,
|
|
46
|
-
onChange,
|
|
47
|
-
onBlur,
|
|
48
|
-
placeholder,
|
|
49
|
-
disabled = false,
|
|
50
|
-
required = false,
|
|
51
|
-
error = false,
|
|
52
|
-
className = "",
|
|
53
|
-
type = "text",
|
|
54
|
-
id = "text",
|
|
55
|
-
...props
|
|
56
|
-
}) {
|
|
57
|
-
const handleChange = (e) => {
|
|
58
|
-
onChange(e.target.value);
|
|
59
|
-
};
|
|
60
|
-
const handleBlur = () => {
|
|
61
|
-
onBlur?.();
|
|
62
|
-
};
|
|
63
|
-
const hasValue = String(value ?? "").trim().length > 0;
|
|
64
|
-
return /* @__PURE__ */ React21.createElement(
|
|
65
|
-
Input,
|
|
66
|
-
{
|
|
67
|
-
type,
|
|
68
|
-
id,
|
|
69
|
-
name,
|
|
70
|
-
value: value ?? "",
|
|
71
|
-
onChange: handleChange,
|
|
72
|
-
onBlur: handleBlur,
|
|
73
|
-
placeholder,
|
|
74
|
-
disabled,
|
|
75
|
-
required,
|
|
76
|
-
className: cn(
|
|
77
|
-
// Valid value indicator - ring-2 when has value and no error
|
|
78
|
-
!error && hasValue && "ring-2 ring-ring",
|
|
79
|
-
// Error state - handled by Input component via aria-invalid
|
|
80
|
-
className
|
|
81
|
-
),
|
|
82
|
-
"aria-invalid": error || props["aria-invalid"],
|
|
83
|
-
"aria-describedby": props["aria-describedby"],
|
|
84
|
-
"aria-required": required || props["aria-required"],
|
|
85
|
-
...props
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
}
|
|
89
|
-
TextInput.displayName = "TextInput";
|
|
90
9
|
function Textarea({ className, ...props }) {
|
|
91
|
-
return /* @__PURE__ */
|
|
10
|
+
return /* @__PURE__ */ React19.createElement(
|
|
92
11
|
"textarea",
|
|
93
12
|
{
|
|
94
13
|
"data-slot": "textarea",
|
|
@@ -135,7 +54,7 @@ function TextArea({
|
|
|
135
54
|
onBlur?.();
|
|
136
55
|
};
|
|
137
56
|
const hasValue = String(value ?? "").trim().length > 0;
|
|
138
|
-
return /* @__PURE__ */
|
|
57
|
+
return /* @__PURE__ */ React19.createElement(
|
|
139
58
|
Textarea,
|
|
140
59
|
{
|
|
141
60
|
name,
|
|
@@ -168,7 +87,7 @@ function Checkbox({
|
|
|
168
87
|
className,
|
|
169
88
|
...props
|
|
170
89
|
}) {
|
|
171
|
-
return /* @__PURE__ */
|
|
90
|
+
return /* @__PURE__ */ React19.createElement(
|
|
172
91
|
Checkbox$1.Root,
|
|
173
92
|
{
|
|
174
93
|
"data-slot": "checkbox",
|
|
@@ -189,13 +108,13 @@ function Checkbox({
|
|
|
189
108
|
),
|
|
190
109
|
...props
|
|
191
110
|
},
|
|
192
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ React19.createElement(
|
|
193
112
|
Checkbox$1.Indicator,
|
|
194
113
|
{
|
|
195
114
|
"data-slot": "checkbox-indicator",
|
|
196
115
|
className: "grid place-content-center text-current transition-none"
|
|
197
116
|
},
|
|
198
|
-
/* @__PURE__ */
|
|
117
|
+
/* @__PURE__ */ React19.createElement(
|
|
199
118
|
"svg",
|
|
200
119
|
{
|
|
201
120
|
className: "size-3.5",
|
|
@@ -206,7 +125,7 @@ function Checkbox({
|
|
|
206
125
|
strokeLinecap: "round",
|
|
207
126
|
strokeLinejoin: "round"
|
|
208
127
|
},
|
|
209
|
-
/* @__PURE__ */
|
|
128
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "20 6 9 17 4 12" })
|
|
210
129
|
)
|
|
211
130
|
)
|
|
212
131
|
);
|
|
@@ -235,7 +154,7 @@ function Checkbox2({
|
|
|
235
154
|
onBlur?.();
|
|
236
155
|
};
|
|
237
156
|
const showChoiceCard = useChoiceCard || !!description;
|
|
238
|
-
const checkbox = /* @__PURE__ */
|
|
157
|
+
const checkbox = /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
|
|
239
158
|
"input",
|
|
240
159
|
{
|
|
241
160
|
type: "checkbox",
|
|
@@ -259,7 +178,7 @@ function Checkbox2({
|
|
|
259
178
|
border: 0
|
|
260
179
|
}
|
|
261
180
|
}
|
|
262
|
-
), /* @__PURE__ */
|
|
181
|
+
), /* @__PURE__ */ React19.createElement(
|
|
263
182
|
Checkbox,
|
|
264
183
|
{
|
|
265
184
|
id: checkboxId,
|
|
@@ -274,9 +193,9 @@ function Checkbox2({
|
|
|
274
193
|
}
|
|
275
194
|
));
|
|
276
195
|
if (!label) {
|
|
277
|
-
return /* @__PURE__ */
|
|
196
|
+
return /* @__PURE__ */ React19.createElement("div", { className }, checkbox);
|
|
278
197
|
}
|
|
279
|
-
return /* @__PURE__ */
|
|
198
|
+
return /* @__PURE__ */ React19.createElement("div", { className: "space-y-0", "data-invalid": error || void 0 }, /* @__PURE__ */ React19.createElement(
|
|
280
199
|
FieldLabel,
|
|
281
200
|
{
|
|
282
201
|
htmlFor: checkboxId,
|
|
@@ -289,7 +208,7 @@ function Checkbox2({
|
|
|
289
208
|
className
|
|
290
209
|
)
|
|
291
210
|
},
|
|
292
|
-
/* @__PURE__ */
|
|
211
|
+
/* @__PURE__ */ React19.createElement(
|
|
293
212
|
"div",
|
|
294
213
|
{
|
|
295
214
|
className: cn(
|
|
@@ -298,7 +217,7 @@ function Checkbox2({
|
|
|
298
217
|
)
|
|
299
218
|
},
|
|
300
219
|
checkbox,
|
|
301
|
-
/* @__PURE__ */
|
|
220
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex-1 space-y-1" }, /* @__PURE__ */ React19.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React19.createElement(
|
|
302
221
|
FieldDescription,
|
|
303
222
|
{
|
|
304
223
|
id: `${checkboxId}-description`,
|
|
@@ -338,11 +257,11 @@ function CheckboxGroup({
|
|
|
338
257
|
).length;
|
|
339
258
|
const allSelected = selectedEnabledCount === enabledOptions.length;
|
|
340
259
|
const someSelected = selectedEnabledCount > 0 && !allSelected;
|
|
341
|
-
const useChoiceCard =
|
|
260
|
+
const useChoiceCard = React19.useMemo(() => {
|
|
342
261
|
if (!options) return false;
|
|
343
262
|
return options?.some((opt) => opt.description);
|
|
344
263
|
}, [options]);
|
|
345
|
-
const countableValue =
|
|
264
|
+
const countableValue = React19.useMemo(() => {
|
|
346
265
|
if (value?.length > 0) {
|
|
347
266
|
return value.length;
|
|
348
267
|
}
|
|
@@ -367,7 +286,7 @@ function CheckboxGroup({
|
|
|
367
286
|
onBlur?.();
|
|
368
287
|
};
|
|
369
288
|
const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
|
|
370
|
-
const containerClass =
|
|
289
|
+
const containerClass = React19.useMemo(() => {
|
|
371
290
|
return cn(
|
|
372
291
|
"w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
|
|
373
292
|
(layout === "grid" || layout === "inline") && "md:grid-cols-2",
|
|
@@ -376,7 +295,7 @@ function CheckboxGroup({
|
|
|
376
295
|
}, [layout, className]);
|
|
377
296
|
const groupDescriptionId = description ? `${name}-description` : void 0;
|
|
378
297
|
const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
|
|
379
|
-
return /* @__PURE__ */
|
|
298
|
+
return /* @__PURE__ */ React19.createElement(
|
|
380
299
|
"fieldset",
|
|
381
300
|
{
|
|
382
301
|
className: containerClass,
|
|
@@ -386,7 +305,7 @@ function CheckboxGroup({
|
|
|
386
305
|
"aria-required": required || props["aria-required"],
|
|
387
306
|
"aria-label": typeof label === "string" ? label : props["aria-label"]
|
|
388
307
|
},
|
|
389
|
-
/* @__PURE__ */
|
|
308
|
+
/* @__PURE__ */ React19.createElement(
|
|
390
309
|
LabelGroup,
|
|
391
310
|
{
|
|
392
311
|
labelHtmlFor: name,
|
|
@@ -397,7 +316,7 @@ function CheckboxGroup({
|
|
|
397
316
|
primary: label
|
|
398
317
|
}
|
|
399
318
|
),
|
|
400
|
-
showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */
|
|
319
|
+
showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React19.createElement(
|
|
401
320
|
Checkbox2,
|
|
402
321
|
{
|
|
403
322
|
name: `${name}-select-all`,
|
|
@@ -415,7 +334,7 @@ function CheckboxGroup({
|
|
|
415
334
|
options.map((option) => {
|
|
416
335
|
const isChecked = value.includes(option.value);
|
|
417
336
|
const isDisabled = disabled || option.disabled || maxReached && !isChecked;
|
|
418
|
-
return /* @__PURE__ */
|
|
337
|
+
return /* @__PURE__ */ React19.createElement(
|
|
419
338
|
Checkbox2,
|
|
420
339
|
{
|
|
421
340
|
key: option.value,
|
|
@@ -433,7 +352,7 @@ function CheckboxGroup({
|
|
|
433
352
|
}
|
|
434
353
|
);
|
|
435
354
|
}),
|
|
436
|
-
(minSelections || maxSelections) && /* @__PURE__ */
|
|
355
|
+
(minSelections || maxSelections) && /* @__PURE__ */ React19.createElement(
|
|
437
356
|
FieldDescription,
|
|
438
357
|
{
|
|
439
358
|
className: cn(
|
|
@@ -442,8 +361,8 @@ function CheckboxGroup({
|
|
|
442
361
|
),
|
|
443
362
|
"aria-live": "polite"
|
|
444
363
|
},
|
|
445
|
-
minSelections && countableValue < minSelections && /* @__PURE__ */
|
|
446
|
-
maxSelections && /* @__PURE__ */
|
|
364
|
+
minSelections && countableValue < minSelections && /* @__PURE__ */ React19.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
|
|
365
|
+
maxSelections && /* @__PURE__ */ React19.createElement("span", null, countableValue, "/", maxSelections, " selected")
|
|
447
366
|
)
|
|
448
367
|
);
|
|
449
368
|
}
|
|
@@ -452,7 +371,7 @@ function RadioGroup({
|
|
|
452
371
|
className,
|
|
453
372
|
...props
|
|
454
373
|
}) {
|
|
455
|
-
return /* @__PURE__ */
|
|
374
|
+
return /* @__PURE__ */ React19.createElement(
|
|
456
375
|
RadioGroup$1.Root,
|
|
457
376
|
{
|
|
458
377
|
"data-slot": "radio-group",
|
|
@@ -465,7 +384,7 @@ function RadioGroupItem({
|
|
|
465
384
|
className,
|
|
466
385
|
...props
|
|
467
386
|
}) {
|
|
468
|
-
return /* @__PURE__ */
|
|
387
|
+
return /* @__PURE__ */ React19.createElement(
|
|
469
388
|
RadioGroup$1.Item,
|
|
470
389
|
{
|
|
471
390
|
"data-slot": "radio-group-item",
|
|
@@ -483,19 +402,19 @@ function RadioGroupItem({
|
|
|
483
402
|
),
|
|
484
403
|
...props
|
|
485
404
|
},
|
|
486
|
-
/* @__PURE__ */
|
|
405
|
+
/* @__PURE__ */ React19.createElement(
|
|
487
406
|
RadioGroup$1.Indicator,
|
|
488
407
|
{
|
|
489
408
|
"data-slot": "radio-group-indicator",
|
|
490
409
|
className: "relative flex items-center justify-center"
|
|
491
410
|
},
|
|
492
|
-
/* @__PURE__ */
|
|
411
|
+
/* @__PURE__ */ React19.createElement(
|
|
493
412
|
"svg",
|
|
494
413
|
{
|
|
495
414
|
className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
|
|
496
415
|
viewBox: "0 0 24 24"
|
|
497
416
|
},
|
|
498
|
-
/* @__PURE__ */
|
|
417
|
+
/* @__PURE__ */ React19.createElement("circle", { cx: "12", cy: "12", r: "12" })
|
|
499
418
|
)
|
|
500
419
|
)
|
|
501
420
|
);
|
|
@@ -523,18 +442,18 @@ function Radio({
|
|
|
523
442
|
const handleBlur = () => {
|
|
524
443
|
onBlur?.();
|
|
525
444
|
};
|
|
526
|
-
const useChoiceCard =
|
|
445
|
+
const useChoiceCard = React19.useMemo(() => {
|
|
527
446
|
return options.some((option) => option.description);
|
|
528
447
|
}, [options]);
|
|
529
448
|
const groupDescriptionId = description ? `${name}-description` : void 0;
|
|
530
|
-
return /* @__PURE__ */
|
|
449
|
+
return /* @__PURE__ */ React19.createElement("div", { className: cn("w-full", className), "data-invalid": error || void 0 }, (label || description) && /* @__PURE__ */ React19.createElement("div", { className: "mb-3 space-y-1" }, label && /* @__PURE__ */ React19.createElement("div", { className: "text-base font-medium leading-none" }, label), description && /* @__PURE__ */ React19.createElement(
|
|
531
450
|
FieldDescription,
|
|
532
451
|
{
|
|
533
452
|
id: groupDescriptionId,
|
|
534
453
|
className: "leading-snug"
|
|
535
454
|
},
|
|
536
455
|
description
|
|
537
|
-
)), /* @__PURE__ */
|
|
456
|
+
)), /* @__PURE__ */ React19.createElement(
|
|
538
457
|
RadioGroup,
|
|
539
458
|
{
|
|
540
459
|
name,
|
|
@@ -557,7 +476,7 @@ function Radio({
|
|
|
557
476
|
const isDisabled = disabled || option.disabled;
|
|
558
477
|
const radioId = `${name}-${option.value}`;
|
|
559
478
|
const hasDescription = !!option.description;
|
|
560
|
-
return /* @__PURE__ */
|
|
479
|
+
return /* @__PURE__ */ React19.createElement(
|
|
561
480
|
FieldLabel,
|
|
562
481
|
{
|
|
563
482
|
key: option.value,
|
|
@@ -570,7 +489,7 @@ function Radio({
|
|
|
570
489
|
isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
|
|
571
490
|
)
|
|
572
491
|
},
|
|
573
|
-
/* @__PURE__ */
|
|
492
|
+
/* @__PURE__ */ React19.createElement(
|
|
574
493
|
"div",
|
|
575
494
|
{
|
|
576
495
|
className: cn(
|
|
@@ -578,7 +497,7 @@ function Radio({
|
|
|
578
497
|
useChoiceCard ? "items-start" : "items-center"
|
|
579
498
|
)
|
|
580
499
|
},
|
|
581
|
-
/* @__PURE__ */
|
|
500
|
+
/* @__PURE__ */ React19.createElement(
|
|
582
501
|
RadioGroupItem,
|
|
583
502
|
{
|
|
584
503
|
value: option.value,
|
|
@@ -588,7 +507,7 @@ function Radio({
|
|
|
588
507
|
"aria-describedby": hasDescription ? `${radioId}-description` : void 0
|
|
589
508
|
}
|
|
590
509
|
),
|
|
591
|
-
/* @__PURE__ */
|
|
510
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex-1 space-y-1" }, /* @__PURE__ */ React19.createElement("span", { className: "text-sm font-medium leading-none" }, option.label), option.description && /* @__PURE__ */ React19.createElement(
|
|
592
511
|
FieldDescription,
|
|
593
512
|
{
|
|
594
513
|
id: `${radioId}-description`,
|
|
@@ -607,7 +526,7 @@ function Switch({
|
|
|
607
526
|
size = "default",
|
|
608
527
|
...props
|
|
609
528
|
}) {
|
|
610
|
-
return /* @__PURE__ */
|
|
529
|
+
return /* @__PURE__ */ React19.createElement(
|
|
611
530
|
Switch$1.Root,
|
|
612
531
|
{
|
|
613
532
|
"data-slot": "switch",
|
|
@@ -629,7 +548,7 @@ function Switch({
|
|
|
629
548
|
),
|
|
630
549
|
...props
|
|
631
550
|
},
|
|
632
|
-
/* @__PURE__ */
|
|
551
|
+
/* @__PURE__ */ React19.createElement(
|
|
633
552
|
Switch$1.Thumb,
|
|
634
553
|
{
|
|
635
554
|
"data-slot": "switch-thumb",
|
|
@@ -668,7 +587,7 @@ function Switch2({
|
|
|
668
587
|
const handleBlur = () => {
|
|
669
588
|
onBlur?.();
|
|
670
589
|
};
|
|
671
|
-
const switchElement = /* @__PURE__ */
|
|
590
|
+
const switchElement = /* @__PURE__ */ React19.createElement(
|
|
672
591
|
Switch,
|
|
673
592
|
{
|
|
674
593
|
id: switchId,
|
|
@@ -684,9 +603,9 @@ function Switch2({
|
|
|
684
603
|
}
|
|
685
604
|
);
|
|
686
605
|
if (!label) {
|
|
687
|
-
return /* @__PURE__ */
|
|
606
|
+
return /* @__PURE__ */ React19.createElement(Field, { className }, switchElement);
|
|
688
607
|
}
|
|
689
|
-
return /* @__PURE__ */
|
|
608
|
+
return /* @__PURE__ */ React19.createElement(Field, { className: "gap-0", invalid: Boolean(error) }, /* @__PURE__ */ React19.createElement(
|
|
690
609
|
FieldLabel,
|
|
691
610
|
{
|
|
692
611
|
htmlFor: switchId,
|
|
@@ -697,7 +616,7 @@ function Switch2({
|
|
|
697
616
|
)
|
|
698
617
|
},
|
|
699
618
|
switchElement,
|
|
700
|
-
/* @__PURE__ */
|
|
619
|
+
/* @__PURE__ */ React19.createElement(Field, { className: "gap-1" }, /* @__PURE__ */ React19.createElement("span", { className: "text-sm font-medium leading-none" }, label), description && /* @__PURE__ */ React19.createElement(
|
|
701
620
|
FieldDescription,
|
|
702
621
|
{
|
|
703
622
|
id: `${switchId}-description`,
|
|
@@ -711,17 +630,17 @@ Switch2.displayName = "Switch";
|
|
|
711
630
|
function Select({
|
|
712
631
|
...props
|
|
713
632
|
}) {
|
|
714
|
-
return /* @__PURE__ */
|
|
633
|
+
return /* @__PURE__ */ React19.createElement(Select$1.Root, { "data-slot": "select", ...props });
|
|
715
634
|
}
|
|
716
635
|
function SelectGroup({
|
|
717
636
|
...props
|
|
718
637
|
}) {
|
|
719
|
-
return /* @__PURE__ */
|
|
638
|
+
return /* @__PURE__ */ React19.createElement(Select$1.Group, { "data-slot": "select-group", ...props });
|
|
720
639
|
}
|
|
721
640
|
function SelectValue({
|
|
722
641
|
...props
|
|
723
642
|
}) {
|
|
724
|
-
return /* @__PURE__ */
|
|
643
|
+
return /* @__PURE__ */ React19.createElement(Select$1.Value, { "data-slot": "select-value", ...props });
|
|
725
644
|
}
|
|
726
645
|
function SelectTrigger({
|
|
727
646
|
className,
|
|
@@ -729,7 +648,7 @@ function SelectTrigger({
|
|
|
729
648
|
children,
|
|
730
649
|
...props
|
|
731
650
|
}) {
|
|
732
|
-
return /* @__PURE__ */
|
|
651
|
+
return /* @__PURE__ */ React19.createElement(
|
|
733
652
|
Select$1.Trigger,
|
|
734
653
|
{
|
|
735
654
|
"data-slot": "select-trigger",
|
|
@@ -759,7 +678,7 @@ function SelectTrigger({
|
|
|
759
678
|
...props
|
|
760
679
|
},
|
|
761
680
|
children,
|
|
762
|
-
/* @__PURE__ */
|
|
681
|
+
/* @__PURE__ */ React19.createElement(Select$1.Icon, { asChild: true }, /* @__PURE__ */ React19.createElement(
|
|
763
682
|
"svg",
|
|
764
683
|
{
|
|
765
684
|
className: "size-4 opacity-50",
|
|
@@ -770,7 +689,7 @@ function SelectTrigger({
|
|
|
770
689
|
strokeLinecap: "round",
|
|
771
690
|
strokeLinejoin: "round"
|
|
772
691
|
},
|
|
773
|
-
/* @__PURE__ */
|
|
692
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "6 9 12 15 18 9" })
|
|
774
693
|
))
|
|
775
694
|
);
|
|
776
695
|
}
|
|
@@ -781,7 +700,7 @@ function SelectContent({
|
|
|
781
700
|
align = "center",
|
|
782
701
|
...props
|
|
783
702
|
}) {
|
|
784
|
-
return /* @__PURE__ */
|
|
703
|
+
return /* @__PURE__ */ React19.createElement(Select$1.Portal, null, /* @__PURE__ */ React19.createElement(
|
|
785
704
|
Select$1.Content,
|
|
786
705
|
{
|
|
787
706
|
"data-slot": "select-content",
|
|
@@ -794,8 +713,8 @@ function SelectContent({
|
|
|
794
713
|
align,
|
|
795
714
|
...props
|
|
796
715
|
},
|
|
797
|
-
/* @__PURE__ */
|
|
798
|
-
/* @__PURE__ */
|
|
716
|
+
/* @__PURE__ */ React19.createElement(SelectScrollUpButton, null),
|
|
717
|
+
/* @__PURE__ */ React19.createElement(
|
|
799
718
|
Select$1.Viewport,
|
|
800
719
|
{
|
|
801
720
|
className: cn(
|
|
@@ -805,14 +724,14 @@ function SelectContent({
|
|
|
805
724
|
},
|
|
806
725
|
children
|
|
807
726
|
),
|
|
808
|
-
/* @__PURE__ */
|
|
727
|
+
/* @__PURE__ */ React19.createElement(SelectScrollDownButton, null)
|
|
809
728
|
));
|
|
810
729
|
}
|
|
811
730
|
function SelectLabel({
|
|
812
731
|
className,
|
|
813
732
|
...props
|
|
814
733
|
}) {
|
|
815
|
-
return /* @__PURE__ */
|
|
734
|
+
return /* @__PURE__ */ React19.createElement(
|
|
816
735
|
Select$1.Label,
|
|
817
736
|
{
|
|
818
737
|
"data-slot": "select-label",
|
|
@@ -826,7 +745,7 @@ function SelectItem({
|
|
|
826
745
|
children,
|
|
827
746
|
...props
|
|
828
747
|
}) {
|
|
829
|
-
return /* @__PURE__ */
|
|
748
|
+
return /* @__PURE__ */ React19.createElement(
|
|
830
749
|
Select$1.Item,
|
|
831
750
|
{
|
|
832
751
|
"data-slot": "select-item",
|
|
@@ -846,13 +765,13 @@ function SelectItem({
|
|
|
846
765
|
),
|
|
847
766
|
...props
|
|
848
767
|
},
|
|
849
|
-
/* @__PURE__ */
|
|
768
|
+
/* @__PURE__ */ React19.createElement(
|
|
850
769
|
"span",
|
|
851
770
|
{
|
|
852
771
|
"data-slot": "select-item-indicator",
|
|
853
772
|
className: "absolute right-2 flex size-3.5 items-center justify-center"
|
|
854
773
|
},
|
|
855
|
-
/* @__PURE__ */
|
|
774
|
+
/* @__PURE__ */ React19.createElement(Select$1.ItemIndicator, null, /* @__PURE__ */ React19.createElement(
|
|
856
775
|
"svg",
|
|
857
776
|
{
|
|
858
777
|
className: "size-4",
|
|
@@ -863,17 +782,17 @@ function SelectItem({
|
|
|
863
782
|
strokeLinecap: "round",
|
|
864
783
|
strokeLinejoin: "round"
|
|
865
784
|
},
|
|
866
|
-
/* @__PURE__ */
|
|
785
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "20 6 9 17 4 12" })
|
|
867
786
|
))
|
|
868
787
|
),
|
|
869
|
-
/* @__PURE__ */
|
|
788
|
+
/* @__PURE__ */ React19.createElement(Select$1.ItemText, null, children)
|
|
870
789
|
);
|
|
871
790
|
}
|
|
872
791
|
function SelectScrollUpButton({
|
|
873
792
|
className,
|
|
874
793
|
...props
|
|
875
794
|
}) {
|
|
876
|
-
return /* @__PURE__ */
|
|
795
|
+
return /* @__PURE__ */ React19.createElement(
|
|
877
796
|
Select$1.ScrollUpButton,
|
|
878
797
|
{
|
|
879
798
|
"data-slot": "select-scroll-up-button",
|
|
@@ -883,7 +802,7 @@ function SelectScrollUpButton({
|
|
|
883
802
|
),
|
|
884
803
|
...props
|
|
885
804
|
},
|
|
886
|
-
/* @__PURE__ */
|
|
805
|
+
/* @__PURE__ */ React19.createElement(
|
|
887
806
|
"svg",
|
|
888
807
|
{
|
|
889
808
|
className: "size-4",
|
|
@@ -894,7 +813,7 @@ function SelectScrollUpButton({
|
|
|
894
813
|
strokeLinecap: "round",
|
|
895
814
|
strokeLinejoin: "round"
|
|
896
815
|
},
|
|
897
|
-
/* @__PURE__ */
|
|
816
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "18 15 12 9 6 15" })
|
|
898
817
|
)
|
|
899
818
|
);
|
|
900
819
|
}
|
|
@@ -902,7 +821,7 @@ function SelectScrollDownButton({
|
|
|
902
821
|
className,
|
|
903
822
|
...props
|
|
904
823
|
}) {
|
|
905
|
-
return /* @__PURE__ */
|
|
824
|
+
return /* @__PURE__ */ React19.createElement(
|
|
906
825
|
Select$1.ScrollDownButton,
|
|
907
826
|
{
|
|
908
827
|
"data-slot": "select-scroll-down-button",
|
|
@@ -912,7 +831,7 @@ function SelectScrollDownButton({
|
|
|
912
831
|
),
|
|
913
832
|
...props
|
|
914
833
|
},
|
|
915
|
-
/* @__PURE__ */
|
|
834
|
+
/* @__PURE__ */ React19.createElement(
|
|
916
835
|
"svg",
|
|
917
836
|
{
|
|
918
837
|
className: "size-4",
|
|
@@ -923,7 +842,7 @@ function SelectScrollDownButton({
|
|
|
923
842
|
strokeLinecap: "round",
|
|
924
843
|
strokeLinejoin: "round"
|
|
925
844
|
},
|
|
926
|
-
/* @__PURE__ */
|
|
845
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "6 9 12 15 18 9" })
|
|
927
846
|
)
|
|
928
847
|
);
|
|
929
848
|
}
|
|
@@ -945,8 +864,8 @@ function Select2({
|
|
|
945
864
|
renderOption,
|
|
946
865
|
...props
|
|
947
866
|
}) {
|
|
948
|
-
const [hasInteracted, setHasInteracted] =
|
|
949
|
-
const allOptions =
|
|
867
|
+
const [hasInteracted, setHasInteracted] = React19.useState(false);
|
|
868
|
+
const allOptions = React19.useMemo(() => {
|
|
950
869
|
if (optionGroups.length > 0) {
|
|
951
870
|
return optionGroups.flatMap((group) => group.options);
|
|
952
871
|
}
|
|
@@ -967,7 +886,7 @@ function Select2({
|
|
|
967
886
|
onBlur?.();
|
|
968
887
|
}
|
|
969
888
|
};
|
|
970
|
-
return /* @__PURE__ */
|
|
889
|
+
return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
|
|
971
890
|
"input",
|
|
972
891
|
{
|
|
973
892
|
type: "hidden",
|
|
@@ -989,7 +908,7 @@ function Select2({
|
|
|
989
908
|
border: "0"
|
|
990
909
|
}
|
|
991
910
|
}
|
|
992
|
-
), /* @__PURE__ */
|
|
911
|
+
), /* @__PURE__ */ React19.createElement(
|
|
993
912
|
Select,
|
|
994
913
|
{
|
|
995
914
|
value: selectValue,
|
|
@@ -997,7 +916,7 @@ function Select2({
|
|
|
997
916
|
onOpenChange: handleOpenChange,
|
|
998
917
|
disabled
|
|
999
918
|
},
|
|
1000
|
-
/* @__PURE__ */
|
|
919
|
+
/* @__PURE__ */ React19.createElement(
|
|
1001
920
|
SelectTrigger,
|
|
1002
921
|
{
|
|
1003
922
|
className: cn(
|
|
@@ -1010,11 +929,11 @@ function Select2({
|
|
|
1010
929
|
"aria-describedby": props["aria-describedby"],
|
|
1011
930
|
"aria-required": required || props["aria-required"]
|
|
1012
931
|
},
|
|
1013
|
-
/* @__PURE__ */
|
|
932
|
+
/* @__PURE__ */ React19.createElement(SelectValue, { placeholder })
|
|
1014
933
|
),
|
|
1015
|
-
/* @__PURE__ */
|
|
934
|
+
/* @__PURE__ */ React19.createElement(SelectContent, null, optionGroups.length > 0 ? (
|
|
1016
935
|
// Render grouped options
|
|
1017
|
-
optionGroups.map((group, groupIndex) => /* @__PURE__ */
|
|
936
|
+
optionGroups.map((group, groupIndex) => /* @__PURE__ */ React19.createElement(SelectGroup, { key: groupIndex }, /* @__PURE__ */ React19.createElement(SelectLabel, null, group.label), group.options.map((option) => /* @__PURE__ */ React19.createElement(
|
|
1018
937
|
SelectItem,
|
|
1019
938
|
{
|
|
1020
939
|
key: option.value,
|
|
@@ -1025,7 +944,7 @@ function Select2({
|
|
|
1025
944
|
))))
|
|
1026
945
|
) : (
|
|
1027
946
|
// Render flat options
|
|
1028
|
-
allOptions.map((option) => /* @__PURE__ */
|
|
947
|
+
allOptions.map((option) => /* @__PURE__ */ React19.createElement(
|
|
1029
948
|
SelectItem,
|
|
1030
949
|
{
|
|
1031
950
|
key: option.value,
|
|
@@ -1041,20 +960,20 @@ Select2.displayName = "Select";
|
|
|
1041
960
|
function Dialog({
|
|
1042
961
|
...props
|
|
1043
962
|
}) {
|
|
1044
|
-
return /* @__PURE__ */
|
|
963
|
+
return /* @__PURE__ */ React19.createElement(Dialog$1.Root, { "data-slot": "dialog", ...props });
|
|
1045
964
|
}
|
|
1046
965
|
function DialogPortal({
|
|
1047
966
|
...props
|
|
1048
967
|
}) {
|
|
1049
|
-
return /* @__PURE__ */
|
|
968
|
+
return /* @__PURE__ */ React19.createElement(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
|
|
1050
969
|
}
|
|
1051
970
|
function DialogClose({
|
|
1052
971
|
...props
|
|
1053
972
|
}) {
|
|
1054
|
-
return /* @__PURE__ */
|
|
973
|
+
return /* @__PURE__ */ React19.createElement(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
|
|
1055
974
|
}
|
|
1056
|
-
var DialogOverlay =
|
|
1057
|
-
return /* @__PURE__ */
|
|
975
|
+
var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => {
|
|
976
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1058
977
|
Dialog$1.Overlay,
|
|
1059
978
|
{
|
|
1060
979
|
ref,
|
|
@@ -1068,8 +987,8 @@ var DialogOverlay = React21.forwardRef(({ className, ...props }, ref) => {
|
|
|
1068
987
|
);
|
|
1069
988
|
});
|
|
1070
989
|
DialogOverlay.displayName = Dialog$1.Overlay.displayName;
|
|
1071
|
-
var DialogContent =
|
|
1072
|
-
return /* @__PURE__ */
|
|
990
|
+
var DialogContent = React19.forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => {
|
|
991
|
+
return /* @__PURE__ */ React19.createElement(DialogPortal, { "data-slot": "dialog-portal" }, /* @__PURE__ */ React19.createElement(DialogOverlay, null), /* @__PURE__ */ React19.createElement(
|
|
1073
992
|
Dialog$1.Content,
|
|
1074
993
|
{
|
|
1075
994
|
ref,
|
|
@@ -1081,13 +1000,13 @@ var DialogContent = React21.forwardRef(({ className, children, showCloseButton =
|
|
|
1081
1000
|
...props
|
|
1082
1001
|
},
|
|
1083
1002
|
children,
|
|
1084
|
-
showCloseButton && /* @__PURE__ */
|
|
1003
|
+
showCloseButton && /* @__PURE__ */ React19.createElement(
|
|
1085
1004
|
Dialog$1.Close,
|
|
1086
1005
|
{
|
|
1087
1006
|
"data-slot": "dialog-close",
|
|
1088
1007
|
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
1089
1008
|
},
|
|
1090
|
-
/* @__PURE__ */
|
|
1009
|
+
/* @__PURE__ */ React19.createElement(
|
|
1091
1010
|
"svg",
|
|
1092
1011
|
{
|
|
1093
1012
|
className: "size-4",
|
|
@@ -1098,16 +1017,16 @@ var DialogContent = React21.forwardRef(({ className, children, showCloseButton =
|
|
|
1098
1017
|
strokeLinecap: "round",
|
|
1099
1018
|
strokeLinejoin: "round"
|
|
1100
1019
|
},
|
|
1101
|
-
/* @__PURE__ */
|
|
1102
|
-
/* @__PURE__ */
|
|
1020
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1021
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1103
1022
|
),
|
|
1104
|
-
/* @__PURE__ */
|
|
1023
|
+
/* @__PURE__ */ React19.createElement("span", { className: "sr-only" }, "Close")
|
|
1105
1024
|
)
|
|
1106
1025
|
));
|
|
1107
1026
|
});
|
|
1108
1027
|
DialogContent.displayName = Dialog$1.Content.displayName;
|
|
1109
1028
|
function DialogHeader({ className, ...props }) {
|
|
1110
|
-
return /* @__PURE__ */
|
|
1029
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1111
1030
|
"div",
|
|
1112
1031
|
{
|
|
1113
1032
|
"data-slot": "dialog-header",
|
|
@@ -1120,7 +1039,7 @@ function DialogTitle({
|
|
|
1120
1039
|
className,
|
|
1121
1040
|
...props
|
|
1122
1041
|
}) {
|
|
1123
|
-
return /* @__PURE__ */
|
|
1042
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1124
1043
|
Dialog$1.Title,
|
|
1125
1044
|
{
|
|
1126
1045
|
"data-slot": "dialog-title",
|
|
@@ -1135,7 +1054,7 @@ function Command({
|
|
|
1135
1054
|
className,
|
|
1136
1055
|
...props
|
|
1137
1056
|
}) {
|
|
1138
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1139
1058
|
Command$1,
|
|
1140
1059
|
{
|
|
1141
1060
|
"data-slot": "command",
|
|
@@ -1151,13 +1070,13 @@ function CommandInput({
|
|
|
1151
1070
|
className,
|
|
1152
1071
|
...props
|
|
1153
1072
|
}) {
|
|
1154
|
-
return /* @__PURE__ */
|
|
1073
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1155
1074
|
"div",
|
|
1156
1075
|
{
|
|
1157
1076
|
"data-slot": "command-input-wrapper",
|
|
1158
1077
|
className: "flex h-9 items-center gap-2 border-b px-3"
|
|
1159
1078
|
},
|
|
1160
|
-
/* @__PURE__ */
|
|
1079
|
+
/* @__PURE__ */ React19.createElement(
|
|
1161
1080
|
"svg",
|
|
1162
1081
|
{
|
|
1163
1082
|
className: "size-4 shrink-0 opacity-50",
|
|
@@ -1168,10 +1087,10 @@ function CommandInput({
|
|
|
1168
1087
|
strokeLinecap: "round",
|
|
1169
1088
|
strokeLinejoin: "round"
|
|
1170
1089
|
},
|
|
1171
|
-
/* @__PURE__ */
|
|
1172
|
-
/* @__PURE__ */
|
|
1090
|
+
/* @__PURE__ */ React19.createElement("circle", { cx: "11", cy: "11", r: "8" }),
|
|
1091
|
+
/* @__PURE__ */ React19.createElement("path", { d: "m21 21-4.3-4.3" })
|
|
1173
1092
|
),
|
|
1174
|
-
/* @__PURE__ */
|
|
1093
|
+
/* @__PURE__ */ React19.createElement(
|
|
1175
1094
|
Command$1.Input,
|
|
1176
1095
|
{
|
|
1177
1096
|
"data-slot": "command-input",
|
|
@@ -1188,7 +1107,7 @@ function CommandList({
|
|
|
1188
1107
|
className,
|
|
1189
1108
|
...props
|
|
1190
1109
|
}) {
|
|
1191
|
-
return /* @__PURE__ */
|
|
1110
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1192
1111
|
Command$1.List,
|
|
1193
1112
|
{
|
|
1194
1113
|
"data-slot": "command-list",
|
|
@@ -1203,7 +1122,7 @@ function CommandList({
|
|
|
1203
1122
|
function CommandEmpty({
|
|
1204
1123
|
...props
|
|
1205
1124
|
}) {
|
|
1206
|
-
return /* @__PURE__ */
|
|
1125
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1207
1126
|
Command$1.Empty,
|
|
1208
1127
|
{
|
|
1209
1128
|
"data-slot": "command-empty",
|
|
@@ -1216,7 +1135,7 @@ function CommandGroup({
|
|
|
1216
1135
|
className,
|
|
1217
1136
|
...props
|
|
1218
1137
|
}) {
|
|
1219
|
-
return /* @__PURE__ */
|
|
1138
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1220
1139
|
Command$1.Group,
|
|
1221
1140
|
{
|
|
1222
1141
|
"data-slot": "command-group",
|
|
@@ -1231,12 +1150,12 @@ function CommandGroup({
|
|
|
1231
1150
|
function Popover({
|
|
1232
1151
|
...props
|
|
1233
1152
|
}) {
|
|
1234
|
-
return /* @__PURE__ */
|
|
1153
|
+
return /* @__PURE__ */ React19.createElement(Popover$1.Root, { "data-slot": "popover", ...props });
|
|
1235
1154
|
}
|
|
1236
1155
|
function PopoverTrigger({
|
|
1237
1156
|
...props
|
|
1238
1157
|
}) {
|
|
1239
|
-
return /* @__PURE__ */
|
|
1158
|
+
return /* @__PURE__ */ React19.createElement(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
1240
1159
|
}
|
|
1241
1160
|
function PopoverContent({
|
|
1242
1161
|
className,
|
|
@@ -1244,7 +1163,7 @@ function PopoverContent({
|
|
|
1244
1163
|
sideOffset = 4,
|
|
1245
1164
|
...props
|
|
1246
1165
|
}) {
|
|
1247
|
-
return /* @__PURE__ */
|
|
1166
|
+
return /* @__PURE__ */ React19.createElement(Popover$1.Portal, null, /* @__PURE__ */ React19.createElement(
|
|
1248
1167
|
Popover$1.Content,
|
|
1249
1168
|
{
|
|
1250
1169
|
"data-slot": "popover-content",
|
|
@@ -1305,21 +1224,21 @@ function MultiSelect({
|
|
|
1305
1224
|
renderValue,
|
|
1306
1225
|
...props
|
|
1307
1226
|
}) {
|
|
1308
|
-
const [isOpen, setIsOpen] =
|
|
1309
|
-
const [searchQuery, setSearchQuery] =
|
|
1310
|
-
const [focusedIndex, setFocusedIndex] =
|
|
1311
|
-
const [hasInteracted, setHasInteracted] =
|
|
1312
|
-
const triggerRef =
|
|
1227
|
+
const [isOpen, setIsOpen] = React19.useState(false);
|
|
1228
|
+
const [searchQuery, setSearchQuery] = React19.useState("");
|
|
1229
|
+
const [focusedIndex, setFocusedIndex] = React19.useState(-1);
|
|
1230
|
+
const [hasInteracted, setHasInteracted] = React19.useState(false);
|
|
1231
|
+
const triggerRef = React19.useRef(null);
|
|
1313
1232
|
const dropdownId = `${name}-dropdown`;
|
|
1314
1233
|
const searchInputId = `${name}-search`;
|
|
1315
1234
|
ensureResizeObserver();
|
|
1316
|
-
const allOptions =
|
|
1235
|
+
const allOptions = React19.useMemo(() => {
|
|
1317
1236
|
if (optionGroups.length > 0) {
|
|
1318
1237
|
return optionGroups.flatMap((group) => group.options);
|
|
1319
1238
|
}
|
|
1320
1239
|
return options;
|
|
1321
1240
|
}, [options, optionGroups]);
|
|
1322
|
-
const filteredOptions =
|
|
1241
|
+
const filteredOptions = React19.useMemo(() => {
|
|
1323
1242
|
if (!searchQuery.trim()) {
|
|
1324
1243
|
return allOptions;
|
|
1325
1244
|
}
|
|
@@ -1328,19 +1247,19 @@ function MultiSelect({
|
|
|
1328
1247
|
(option) => optionLabelText(option).toLowerCase().includes(query)
|
|
1329
1248
|
);
|
|
1330
1249
|
}, [allOptions, searchQuery]);
|
|
1331
|
-
const selectedOptions =
|
|
1250
|
+
const selectedOptions = React19.useMemo(() => {
|
|
1332
1251
|
return allOptions.filter((option) => value.includes(option.value));
|
|
1333
1252
|
}, [allOptions, value]);
|
|
1334
1253
|
const hasValue = value.length > 0;
|
|
1335
|
-
const isMaxReached =
|
|
1254
|
+
const isMaxReached = React19.useMemo(() => {
|
|
1336
1255
|
return maxSelections !== void 0 && value.length >= maxSelections;
|
|
1337
1256
|
}, [maxSelections, value.length]);
|
|
1338
|
-
const getEnabledOptions =
|
|
1257
|
+
const getEnabledOptions = React19.useCallback(() => {
|
|
1339
1258
|
return filteredOptions.filter(
|
|
1340
1259
|
(option) => !option.disabled && (!isMaxReached || value.includes(option.value))
|
|
1341
1260
|
);
|
|
1342
1261
|
}, [filteredOptions, isMaxReached, value]);
|
|
1343
|
-
|
|
1262
|
+
React19.useEffect(() => {
|
|
1344
1263
|
if (!isOpen) return;
|
|
1345
1264
|
if (!searchable) return;
|
|
1346
1265
|
const id = window.setTimeout(() => {
|
|
@@ -1353,7 +1272,7 @@ function MultiSelect({
|
|
|
1353
1272
|
window.clearTimeout(id);
|
|
1354
1273
|
};
|
|
1355
1274
|
}, [isOpen, searchable, searchInputId]);
|
|
1356
|
-
const handleToggleOption =
|
|
1275
|
+
const handleToggleOption = React19.useCallback(
|
|
1357
1276
|
(optionValue) => {
|
|
1358
1277
|
const isSelected = value.includes(optionValue);
|
|
1359
1278
|
if (isSelected) {
|
|
@@ -1365,12 +1284,12 @@ function MultiSelect({
|
|
|
1365
1284
|
},
|
|
1366
1285
|
[isMaxReached, onChange, value]
|
|
1367
1286
|
);
|
|
1368
|
-
const handleSelectAll =
|
|
1287
|
+
const handleSelectAll = React19.useCallback(() => {
|
|
1369
1288
|
const enabledOptions = filteredOptions.filter((option) => !option.disabled);
|
|
1370
1289
|
onChange(enabledOptions.map((option) => option.value));
|
|
1371
1290
|
setSearchQuery("");
|
|
1372
1291
|
}, [filteredOptions, onChange]);
|
|
1373
|
-
const handleClearAll =
|
|
1292
|
+
const handleClearAll = React19.useCallback(
|
|
1374
1293
|
(e) => {
|
|
1375
1294
|
e.stopPropagation();
|
|
1376
1295
|
onChange([]);
|
|
@@ -1379,14 +1298,14 @@ function MultiSelect({
|
|
|
1379
1298
|
},
|
|
1380
1299
|
[onChange]
|
|
1381
1300
|
);
|
|
1382
|
-
const handleRemoveValue =
|
|
1301
|
+
const handleRemoveValue = React19.useCallback(
|
|
1383
1302
|
(optionValue, e) => {
|
|
1384
1303
|
e.stopPropagation();
|
|
1385
1304
|
onChange(value.filter((entry) => entry !== optionValue));
|
|
1386
1305
|
},
|
|
1387
1306
|
[onChange, value]
|
|
1388
1307
|
);
|
|
1389
|
-
const handleOpenChange =
|
|
1308
|
+
const handleOpenChange = React19.useCallback(
|
|
1390
1309
|
(nextOpen) => {
|
|
1391
1310
|
if (disabled) {
|
|
1392
1311
|
setIsOpen(false);
|
|
@@ -1409,12 +1328,12 @@ function MultiSelect({
|
|
|
1409
1328
|
},
|
|
1410
1329
|
[disabled, hasInteracted, isOpen, onBlur, onFocus]
|
|
1411
1330
|
);
|
|
1412
|
-
const handleTriggerBlur =
|
|
1331
|
+
const handleTriggerBlur = React19.useCallback(() => {
|
|
1413
1332
|
if (!isOpen) {
|
|
1414
1333
|
onBlur?.();
|
|
1415
1334
|
}
|
|
1416
1335
|
}, [isOpen, onBlur]);
|
|
1417
|
-
const handleKeyDown =
|
|
1336
|
+
const handleKeyDown = React19.useCallback(
|
|
1418
1337
|
(event) => {
|
|
1419
1338
|
if (disabled) return;
|
|
1420
1339
|
const enabledOptions = getEnabledOptions();
|
|
@@ -1511,7 +1430,7 @@ function MultiSelect({
|
|
|
1511
1430
|
]
|
|
1512
1431
|
);
|
|
1513
1432
|
const combinedClassName = cn("relative w-full", className);
|
|
1514
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ React19.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React19.createElement(
|
|
1515
1434
|
"select",
|
|
1516
1435
|
{
|
|
1517
1436
|
name,
|
|
@@ -1525,9 +1444,9 @@ function MultiSelect({
|
|
|
1525
1444
|
style: { display: "none" },
|
|
1526
1445
|
multiple: true
|
|
1527
1446
|
},
|
|
1528
|
-
/* @__PURE__ */
|
|
1529
|
-
allOptions.map((option) => /* @__PURE__ */
|
|
1530
|
-
), /* @__PURE__ */
|
|
1447
|
+
/* @__PURE__ */ React19.createElement("option", { value: "" }, "Select..."),
|
|
1448
|
+
allOptions.map((option) => /* @__PURE__ */ React19.createElement("option", { key: option.value, value: option.value }, optionLabelText(option)))
|
|
1449
|
+
), /* @__PURE__ */ React19.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React19.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React19.createElement(
|
|
1531
1450
|
"div",
|
|
1532
1451
|
{
|
|
1533
1452
|
ref: triggerRef,
|
|
@@ -1549,13 +1468,13 @@ function MultiSelect({
|
|
|
1549
1468
|
"aria-disabled": disabled,
|
|
1550
1469
|
tabIndex: disabled ? -1 : 0
|
|
1551
1470
|
},
|
|
1552
|
-
/* @__PURE__ */
|
|
1471
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex flex-1 items-center overflow-hidden" }, selectedOptions.length > 0 ? /* @__PURE__ */ React19.createElement("div", { className: "flex flex-wrap gap-1" }, selectedOptions.map((option) => /* @__PURE__ */ React19.createElement(
|
|
1553
1472
|
"span",
|
|
1554
1473
|
{
|
|
1555
1474
|
key: option.value,
|
|
1556
1475
|
className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium"
|
|
1557
1476
|
},
|
|
1558
|
-
renderValue ? renderValue(option) : /* @__PURE__ */
|
|
1477
|
+
renderValue ? renderValue(option) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("span", { className: "max-w-40 overflow-hidden text-ellipsis whitespace-nowrap" }, option.label), !disabled && /* @__PURE__ */ React19.createElement(
|
|
1559
1478
|
"button",
|
|
1560
1479
|
{
|
|
1561
1480
|
type: "button",
|
|
@@ -1566,8 +1485,8 @@ function MultiSelect({
|
|
|
1566
1485
|
},
|
|
1567
1486
|
"\u2715"
|
|
1568
1487
|
))
|
|
1569
|
-
))) : /* @__PURE__ */
|
|
1570
|
-
/* @__PURE__ */
|
|
1488
|
+
))) : /* @__PURE__ */ React19.createElement("span", { className: "relative" }, placeholder)),
|
|
1489
|
+
/* @__PURE__ */ React19.createElement("div", { className: "ml-2 flex items-center gap-1" }, loading && /* @__PURE__ */ React19.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value.length > 0 && !disabled && !loading && /* @__PURE__ */ React19.createElement(
|
|
1571
1490
|
"button",
|
|
1572
1491
|
{
|
|
1573
1492
|
type: "button",
|
|
@@ -1577,8 +1496,8 @@ function MultiSelect({
|
|
|
1577
1496
|
tabIndex: -1
|
|
1578
1497
|
},
|
|
1579
1498
|
"\u2715"
|
|
1580
|
-
), /* @__PURE__ */
|
|
1581
|
-
)), isOpen && /* @__PURE__ */
|
|
1499
|
+
), /* @__PURE__ */ React19.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
|
|
1500
|
+
)), isOpen && /* @__PURE__ */ React19.createElement(
|
|
1582
1501
|
PopoverContent,
|
|
1583
1502
|
{
|
|
1584
1503
|
id: dropdownId,
|
|
@@ -1589,14 +1508,14 @@ function MultiSelect({
|
|
|
1589
1508
|
event.preventDefault();
|
|
1590
1509
|
}
|
|
1591
1510
|
},
|
|
1592
|
-
/* @__PURE__ */
|
|
1511
|
+
/* @__PURE__ */ React19.createElement(
|
|
1593
1512
|
Command,
|
|
1594
1513
|
{
|
|
1595
1514
|
shouldFilter: false,
|
|
1596
1515
|
className: "max-h-80",
|
|
1597
1516
|
onKeyDown: handleKeyDown
|
|
1598
1517
|
},
|
|
1599
|
-
searchable && /* @__PURE__ */
|
|
1518
|
+
searchable && /* @__PURE__ */ React19.createElement(
|
|
1600
1519
|
CommandInput,
|
|
1601
1520
|
{
|
|
1602
1521
|
id: searchInputId,
|
|
@@ -1610,7 +1529,7 @@ function MultiSelect({
|
|
|
1610
1529
|
"aria-label": "Search options"
|
|
1611
1530
|
}
|
|
1612
1531
|
),
|
|
1613
|
-
showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */
|
|
1532
|
+
showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */ React19.createElement("div", { className: "flex gap-2 border-b border-input p-2" }, /* @__PURE__ */ React19.createElement(
|
|
1614
1533
|
"button",
|
|
1615
1534
|
{
|
|
1616
1535
|
type: "button",
|
|
@@ -1619,7 +1538,7 @@ function MultiSelect({
|
|
|
1619
1538
|
disabled
|
|
1620
1539
|
},
|
|
1621
1540
|
"Select All"
|
|
1622
|
-
), value.length > 0 && /* @__PURE__ */
|
|
1541
|
+
), value.length > 0 && /* @__PURE__ */ React19.createElement(
|
|
1623
1542
|
"button",
|
|
1624
1543
|
{
|
|
1625
1544
|
type: "button",
|
|
@@ -1629,13 +1548,13 @@ function MultiSelect({
|
|
|
1629
1548
|
},
|
|
1630
1549
|
"Clear All"
|
|
1631
1550
|
)),
|
|
1632
|
-
isMaxReached && /* @__PURE__ */
|
|
1633
|
-
/* @__PURE__ */
|
|
1551
|
+
isMaxReached && /* @__PURE__ */ React19.createElement("div", { className: "border-b border-destructive bg-destructive/80 px-2 py-1 text-xs font-medium text-destructive-foreground" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
|
|
1552
|
+
/* @__PURE__ */ React19.createElement(CommandList, { role: "listbox", "aria-multiselectable": "true" }, /* @__PURE__ */ React19.createElement(CommandEmpty, null, "No options found"), optionGroups.length > 0 ? optionGroups.map((group, groupIndex) => {
|
|
1634
1553
|
const groupOptions = group.options.filter(
|
|
1635
1554
|
(option) => filteredOptions.includes(option)
|
|
1636
1555
|
);
|
|
1637
1556
|
if (groupOptions.length === 0) return null;
|
|
1638
|
-
return /* @__PURE__ */
|
|
1557
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1639
1558
|
CommandGroup,
|
|
1640
1559
|
{
|
|
1641
1560
|
key: `${group.label}-${groupIndex}`,
|
|
@@ -1646,7 +1565,7 @@ function MultiSelect({
|
|
|
1646
1565
|
const isSelected = value.includes(option.value);
|
|
1647
1566
|
const isFocused = globalIndex === focusedIndex;
|
|
1648
1567
|
const optionDisabled = option.disabled || isMaxReached && !isSelected;
|
|
1649
|
-
return /* @__PURE__ */
|
|
1568
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1650
1569
|
"div",
|
|
1651
1570
|
{
|
|
1652
1571
|
key: option.value,
|
|
@@ -1668,8 +1587,8 @@ function MultiSelect({
|
|
|
1668
1587
|
optionDisabled && "pointer-events-none opacity-50"
|
|
1669
1588
|
)
|
|
1670
1589
|
},
|
|
1671
|
-
/* @__PURE__ */
|
|
1672
|
-
/* @__PURE__ */
|
|
1590
|
+
/* @__PURE__ */ React19.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
|
|
1591
|
+
/* @__PURE__ */ React19.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
|
|
1673
1592
|
);
|
|
1674
1593
|
})
|
|
1675
1594
|
);
|
|
@@ -1677,7 +1596,7 @@ function MultiSelect({
|
|
|
1677
1596
|
const isSelected = value.includes(option.value);
|
|
1678
1597
|
const isFocused = index === focusedIndex;
|
|
1679
1598
|
const optionDisabled = option.disabled || isMaxReached && !isSelected;
|
|
1680
|
-
return /* @__PURE__ */
|
|
1599
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1681
1600
|
"div",
|
|
1682
1601
|
{
|
|
1683
1602
|
key: option.value,
|
|
@@ -1699,26 +1618,26 @@ function MultiSelect({
|
|
|
1699
1618
|
optionDisabled && "pointer-events-none opacity-50"
|
|
1700
1619
|
)
|
|
1701
1620
|
},
|
|
1702
|
-
/* @__PURE__ */
|
|
1703
|
-
/* @__PURE__ */
|
|
1621
|
+
/* @__PURE__ */ React19.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
|
|
1622
|
+
/* @__PURE__ */ React19.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
|
|
1704
1623
|
);
|
|
1705
1624
|
}))
|
|
1706
1625
|
)
|
|
1707
1626
|
)));
|
|
1708
1627
|
}
|
|
1709
1628
|
MultiSelect.displayName = "MultiSelect";
|
|
1710
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1629
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React19.useLayoutEffect : React19.useEffect;
|
|
1711
1630
|
|
|
1712
1631
|
// src/hooks/use-as-ref.ts
|
|
1713
1632
|
function useAsRef(props) {
|
|
1714
|
-
const ref =
|
|
1633
|
+
const ref = React19.useRef(props);
|
|
1715
1634
|
useIsomorphicLayoutEffect(() => {
|
|
1716
1635
|
ref.current = props;
|
|
1717
1636
|
});
|
|
1718
1637
|
return ref;
|
|
1719
1638
|
}
|
|
1720
1639
|
function useLazyRef(fn) {
|
|
1721
|
-
const ref =
|
|
1640
|
+
const ref = React19.useRef(null);
|
|
1722
1641
|
if (ref.current === null) {
|
|
1723
1642
|
ref.current = fn();
|
|
1724
1643
|
}
|
|
@@ -1737,7 +1656,7 @@ function BaseFileIcon({
|
|
|
1737
1656
|
children,
|
|
1738
1657
|
className
|
|
1739
1658
|
}) {
|
|
1740
|
-
return /* @__PURE__ */
|
|
1659
|
+
return /* @__PURE__ */ React19.createElement(
|
|
1741
1660
|
"svg",
|
|
1742
1661
|
{
|
|
1743
1662
|
viewBox: "0 0 24 24",
|
|
@@ -1753,25 +1672,25 @@ function BaseFileIcon({
|
|
|
1753
1672
|
);
|
|
1754
1673
|
}
|
|
1755
1674
|
function FileVideoIcon() {
|
|
1756
|
-
return /* @__PURE__ */
|
|
1675
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React19.createElement("rect", { x: "8", y: "12", width: "6", height: "4", rx: "1" }), /* @__PURE__ */ React19.createElement("path", { d: "m14 13 3-1.5v5L14 15" }));
|
|
1757
1676
|
}
|
|
1758
1677
|
function FileAudioIcon() {
|
|
1759
|
-
return /* @__PURE__ */
|
|
1678
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React19.createElement("path", { d: "M10 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" }), /* @__PURE__ */ React19.createElement("path", { d: "M13 17V11l3-1" }));
|
|
1760
1679
|
}
|
|
1761
1680
|
function FileTextIcon() {
|
|
1762
|
-
return /* @__PURE__ */
|
|
1681
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React19.createElement("line", { x1: "8", y1: "13", x2: "16", y2: "13" }), /* @__PURE__ */ React19.createElement("line", { x1: "8", y1: "17", x2: "14", y2: "17" }));
|
|
1763
1682
|
}
|
|
1764
1683
|
function FileCodeIcon() {
|
|
1765
|
-
return /* @__PURE__ */
|
|
1684
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React19.createElement("polyline", { points: "11 14 9 16 11 18" }), /* @__PURE__ */ React19.createElement("polyline", { points: "13 14 15 16 13 18" }));
|
|
1766
1685
|
}
|
|
1767
1686
|
function FileArchiveIcon() {
|
|
1768
|
-
return /* @__PURE__ */
|
|
1687
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React19.createElement("rect", { x: "9", y: "11", width: "6", height: "2" }), /* @__PURE__ */ React19.createElement("path", { d: "M12 13v5" }));
|
|
1769
1688
|
}
|
|
1770
1689
|
function FileCogIcon() {
|
|
1771
|
-
return /* @__PURE__ */
|
|
1690
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }), /* @__PURE__ */ React19.createElement("circle", { cx: "12", cy: "16", r: "2" }), /* @__PURE__ */ React19.createElement("path", { d: "m12 12 .4.9m2.7 1.1 .9.4m-.9 2.7-.9.4m-2.7 1.1-.4.9m-2.3-.9-.4-.9m-2.7-1.1-.9-.4m.9-2.7.9-.4m2.7-1.1.4-.9" }));
|
|
1772
1691
|
}
|
|
1773
1692
|
function FileIcon() {
|
|
1774
|
-
return /* @__PURE__ */
|
|
1693
|
+
return /* @__PURE__ */ React19.createElement(BaseFileIcon, null, /* @__PURE__ */ React19.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React19.createElement("polyline", { points: "14 2 14 8 20 8" }));
|
|
1775
1694
|
}
|
|
1776
1695
|
function formatBytes(bytes) {
|
|
1777
1696
|
if (bytes === 0) return "0 B";
|
|
@@ -1783,13 +1702,13 @@ function getFileIcon(file) {
|
|
|
1783
1702
|
const type = file.type;
|
|
1784
1703
|
const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
|
|
1785
1704
|
if (type.startsWith("video/")) {
|
|
1786
|
-
return /* @__PURE__ */
|
|
1705
|
+
return /* @__PURE__ */ React19.createElement(FileVideoIcon, null);
|
|
1787
1706
|
}
|
|
1788
1707
|
if (type.startsWith("audio/")) {
|
|
1789
|
-
return /* @__PURE__ */
|
|
1708
|
+
return /* @__PURE__ */ React19.createElement(FileAudioIcon, null);
|
|
1790
1709
|
}
|
|
1791
1710
|
if (type.startsWith("text/") || ["txt", "md", "rtf", "pdf"].includes(extension)) {
|
|
1792
|
-
return /* @__PURE__ */
|
|
1711
|
+
return /* @__PURE__ */ React19.createElement(FileTextIcon, null);
|
|
1793
1712
|
}
|
|
1794
1713
|
if ([
|
|
1795
1714
|
"html",
|
|
@@ -1808,19 +1727,19 @@ function getFileIcon(file) {
|
|
|
1808
1727
|
"cpp",
|
|
1809
1728
|
"cs"
|
|
1810
1729
|
].includes(extension)) {
|
|
1811
|
-
return /* @__PURE__ */
|
|
1730
|
+
return /* @__PURE__ */ React19.createElement(FileCodeIcon, null);
|
|
1812
1731
|
}
|
|
1813
1732
|
if (["zip", "rar", "7z", "tar", "gz", "bz2"].includes(extension)) {
|
|
1814
|
-
return /* @__PURE__ */
|
|
1733
|
+
return /* @__PURE__ */ React19.createElement(FileArchiveIcon, null);
|
|
1815
1734
|
}
|
|
1816
1735
|
if (["exe", "msi", "app", "apk", "deb", "rpm"].includes(extension) || type.startsWith("application/")) {
|
|
1817
|
-
return /* @__PURE__ */
|
|
1736
|
+
return /* @__PURE__ */ React19.createElement(FileCogIcon, null);
|
|
1818
1737
|
}
|
|
1819
|
-
return /* @__PURE__ */
|
|
1738
|
+
return /* @__PURE__ */ React19.createElement(FileIcon, null);
|
|
1820
1739
|
}
|
|
1821
|
-
var StoreContext =
|
|
1740
|
+
var StoreContext = React19.createContext(null);
|
|
1822
1741
|
function useStoreContext(consumerName) {
|
|
1823
|
-
const context =
|
|
1742
|
+
const context = React19.useContext(StoreContext);
|
|
1824
1743
|
if (!context) {
|
|
1825
1744
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1826
1745
|
}
|
|
@@ -1831,7 +1750,7 @@ function useStore(selector) {
|
|
|
1831
1750
|
const lastValueRef = useLazyRef(
|
|
1832
1751
|
() => null
|
|
1833
1752
|
);
|
|
1834
|
-
const getSnapshot =
|
|
1753
|
+
const getSnapshot = React19.useCallback(() => {
|
|
1835
1754
|
const state = store.getState();
|
|
1836
1755
|
const prevValue = lastValueRef.current;
|
|
1837
1756
|
if (prevValue && prevValue.state === state) {
|
|
@@ -1841,13 +1760,13 @@ function useStore(selector) {
|
|
|
1841
1760
|
lastValueRef.current = { value: nextValue, state };
|
|
1842
1761
|
return nextValue;
|
|
1843
1762
|
}, [store, selector, lastValueRef]);
|
|
1844
|
-
return
|
|
1763
|
+
return React19.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
1845
1764
|
}
|
|
1846
|
-
var FileUploadContext =
|
|
1765
|
+
var FileUploadContext = React19.createContext(
|
|
1847
1766
|
null
|
|
1848
1767
|
);
|
|
1849
1768
|
function useFileUploadContext(consumerName) {
|
|
1850
|
-
const context =
|
|
1769
|
+
const context = React19.useContext(FileUploadContext);
|
|
1851
1770
|
if (!context) {
|
|
1852
1771
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1853
1772
|
}
|
|
@@ -1879,15 +1798,15 @@ function FileUpload(props) {
|
|
|
1879
1798
|
className,
|
|
1880
1799
|
...rootProps
|
|
1881
1800
|
} = props;
|
|
1882
|
-
const inputId =
|
|
1883
|
-
const dropzoneId =
|
|
1884
|
-
const listId =
|
|
1885
|
-
const labelId =
|
|
1801
|
+
const inputId = React19.useId();
|
|
1802
|
+
const dropzoneId = React19.useId();
|
|
1803
|
+
const listId = React19.useId();
|
|
1804
|
+
const labelId = React19.useId();
|
|
1886
1805
|
const dir = useDirection(dirProp);
|
|
1887
1806
|
const listeners = useLazyRef(() => /* @__PURE__ */ new Set()).current;
|
|
1888
1807
|
const files = useLazyRef(() => /* @__PURE__ */ new Map()).current;
|
|
1889
1808
|
const urlCache = useLazyRef(() => /* @__PURE__ */ new WeakMap()).current;
|
|
1890
|
-
const inputRef =
|
|
1809
|
+
const inputRef = React19.useRef(null);
|
|
1891
1810
|
const isControlled = value !== void 0;
|
|
1892
1811
|
const propsRef = useAsRef({
|
|
1893
1812
|
onValueChange,
|
|
@@ -1897,7 +1816,7 @@ function FileUpload(props) {
|
|
|
1897
1816
|
onFileValidate,
|
|
1898
1817
|
onUpload
|
|
1899
1818
|
});
|
|
1900
|
-
const store =
|
|
1819
|
+
const store = React19.useMemo(() => {
|
|
1901
1820
|
let state = {
|
|
1902
1821
|
files,
|
|
1903
1822
|
dragOver: false,
|
|
@@ -2026,7 +1945,7 @@ function FileUpload(props) {
|
|
|
2026
1945
|
}
|
|
2027
1946
|
};
|
|
2028
1947
|
}, [listeners, files, invalid, propsRef, urlCache]);
|
|
2029
|
-
const acceptTypes =
|
|
1948
|
+
const acceptTypes = React19.useMemo(
|
|
2030
1949
|
() => accept?.split(",").map((t) => t.trim()) ?? null,
|
|
2031
1950
|
[accept]
|
|
2032
1951
|
);
|
|
@@ -2044,14 +1963,14 @@ function FileUpload(props) {
|
|
|
2044
1963
|
});
|
|
2045
1964
|
};
|
|
2046
1965
|
}).current;
|
|
2047
|
-
|
|
1966
|
+
React19.useEffect(() => {
|
|
2048
1967
|
if (isControlled) {
|
|
2049
1968
|
store.dispatch({ type: "SET_FILES", files: value });
|
|
2050
1969
|
} else if (defaultValue && defaultValue.length > 0 && !store.getState().files.size) {
|
|
2051
1970
|
store.dispatch({ type: "SET_FILES", files: defaultValue });
|
|
2052
1971
|
}
|
|
2053
1972
|
}, [value, defaultValue, isControlled, store]);
|
|
2054
|
-
|
|
1973
|
+
React19.useEffect(() => {
|
|
2055
1974
|
return () => {
|
|
2056
1975
|
for (const file of files.keys()) {
|
|
2057
1976
|
const cachedUrl = urlCache.get(file);
|
|
@@ -2061,7 +1980,7 @@ function FileUpload(props) {
|
|
|
2061
1980
|
}
|
|
2062
1981
|
};
|
|
2063
1982
|
}, [files, urlCache]);
|
|
2064
|
-
const onFilesUpload =
|
|
1983
|
+
const onFilesUpload = React19.useCallback(
|
|
2065
1984
|
async (files2) => {
|
|
2066
1985
|
try {
|
|
2067
1986
|
for (const file of files2) {
|
|
@@ -2099,7 +2018,7 @@ function FileUpload(props) {
|
|
|
2099
2018
|
},
|
|
2100
2019
|
[store, propsRef, onProgress]
|
|
2101
2020
|
);
|
|
2102
|
-
const onFilesChange =
|
|
2021
|
+
const onFilesChange = React19.useCallback(
|
|
2103
2022
|
(originalFiles) => {
|
|
2104
2023
|
if (disabled) return;
|
|
2105
2024
|
let filesToProcess = [...originalFiles];
|
|
@@ -2197,7 +2116,7 @@ function FileUpload(props) {
|
|
|
2197
2116
|
disabled
|
|
2198
2117
|
]
|
|
2199
2118
|
);
|
|
2200
|
-
const onInputChange =
|
|
2119
|
+
const onInputChange = React19.useCallback(
|
|
2201
2120
|
(event) => {
|
|
2202
2121
|
const files2 = Array.from(event.target.files ?? []);
|
|
2203
2122
|
onFilesChange(files2);
|
|
@@ -2205,7 +2124,7 @@ function FileUpload(props) {
|
|
|
2205
2124
|
},
|
|
2206
2125
|
[onFilesChange]
|
|
2207
2126
|
);
|
|
2208
|
-
const contextValue =
|
|
2127
|
+
const contextValue = React19.useMemo(
|
|
2209
2128
|
() => ({
|
|
2210
2129
|
dropzoneId,
|
|
2211
2130
|
inputId,
|
|
@@ -2223,7 +2142,7 @@ function FileUpload(props) {
|
|
|
2223
2142
|
contextValue.dropzoneId,
|
|
2224
2143
|
inputProps?.["aria-describedby"]
|
|
2225
2144
|
].filter(Boolean).join(" ").trim();
|
|
2226
|
-
return /* @__PURE__ */
|
|
2145
|
+
return /* @__PURE__ */ React19.createElement(StoreContext.Provider, { value: store }, /* @__PURE__ */ React19.createElement(FileUploadContext.Provider, { value: contextValue }, /* @__PURE__ */ React19.createElement(
|
|
2227
2146
|
RootPrimitive,
|
|
2228
2147
|
{
|
|
2229
2148
|
"data-disabled": disabled ? "" : void 0,
|
|
@@ -2233,7 +2152,7 @@ function FileUpload(props) {
|
|
|
2233
2152
|
className: cn("relative flex flex-col gap-2", className)
|
|
2234
2153
|
},
|
|
2235
2154
|
children,
|
|
2236
|
-
/* @__PURE__ */
|
|
2155
|
+
/* @__PURE__ */ React19.createElement(
|
|
2237
2156
|
"input",
|
|
2238
2157
|
{
|
|
2239
2158
|
type: "file",
|
|
@@ -2252,7 +2171,7 @@ function FileUpload(props) {
|
|
|
2252
2171
|
...inputProps
|
|
2253
2172
|
}
|
|
2254
2173
|
),
|
|
2255
|
-
/* @__PURE__ */
|
|
2174
|
+
/* @__PURE__ */ React19.createElement("div", { id: labelId, className: "sr-only" }, label ?? "File upload")
|
|
2256
2175
|
)));
|
|
2257
2176
|
}
|
|
2258
2177
|
function FileUploadDropzone(props) {
|
|
@@ -2281,7 +2200,7 @@ function FileUploadDropzone(props) {
|
|
|
2281
2200
|
onPaste: onPasteProp,
|
|
2282
2201
|
onKeyDown: onKeyDownProp
|
|
2283
2202
|
});
|
|
2284
|
-
const onClick =
|
|
2203
|
+
const onClick = React19.useCallback(
|
|
2285
2204
|
(event) => {
|
|
2286
2205
|
propsRef.current.onClick?.(event);
|
|
2287
2206
|
if (event.defaultPrevented) return;
|
|
@@ -2293,7 +2212,7 @@ function FileUploadDropzone(props) {
|
|
|
2293
2212
|
},
|
|
2294
2213
|
[context.inputRef, propsRef]
|
|
2295
2214
|
);
|
|
2296
|
-
const onDragOver =
|
|
2215
|
+
const onDragOver = React19.useCallback(
|
|
2297
2216
|
(event) => {
|
|
2298
2217
|
propsRef.current.onDragOver?.(event);
|
|
2299
2218
|
if (event.defaultPrevented) return;
|
|
@@ -2302,7 +2221,7 @@ function FileUploadDropzone(props) {
|
|
|
2302
2221
|
},
|
|
2303
2222
|
[store, propsRef]
|
|
2304
2223
|
);
|
|
2305
|
-
const onDragEnter =
|
|
2224
|
+
const onDragEnter = React19.useCallback(
|
|
2306
2225
|
(event) => {
|
|
2307
2226
|
propsRef.current.onDragEnter?.(event);
|
|
2308
2227
|
if (event.defaultPrevented) return;
|
|
@@ -2311,7 +2230,7 @@ function FileUploadDropzone(props) {
|
|
|
2311
2230
|
},
|
|
2312
2231
|
[store, propsRef]
|
|
2313
2232
|
);
|
|
2314
|
-
const onDragLeave =
|
|
2233
|
+
const onDragLeave = React19.useCallback(
|
|
2315
2234
|
(event) => {
|
|
2316
2235
|
propsRef.current.onDragLeave?.(event);
|
|
2317
2236
|
if (event.defaultPrevented) return;
|
|
@@ -2324,7 +2243,7 @@ function FileUploadDropzone(props) {
|
|
|
2324
2243
|
},
|
|
2325
2244
|
[store, propsRef]
|
|
2326
2245
|
);
|
|
2327
|
-
const onDrop =
|
|
2246
|
+
const onDrop = React19.useCallback(
|
|
2328
2247
|
(event) => {
|
|
2329
2248
|
propsRef.current.onDrop?.(event);
|
|
2330
2249
|
if (event.defaultPrevented) return;
|
|
@@ -2344,7 +2263,7 @@ function FileUploadDropzone(props) {
|
|
|
2344
2263
|
},
|
|
2345
2264
|
[store, context.inputRef, propsRef]
|
|
2346
2265
|
);
|
|
2347
|
-
const onPaste =
|
|
2266
|
+
const onPaste = React19.useCallback(
|
|
2348
2267
|
(event) => {
|
|
2349
2268
|
propsRef.current.onPaste?.(event);
|
|
2350
2269
|
if (event.defaultPrevented) return;
|
|
@@ -2376,7 +2295,7 @@ function FileUploadDropzone(props) {
|
|
|
2376
2295
|
},
|
|
2377
2296
|
[store, context.inputRef, propsRef]
|
|
2378
2297
|
);
|
|
2379
|
-
const onKeyDown =
|
|
2298
|
+
const onKeyDown = React19.useCallback(
|
|
2380
2299
|
(event) => {
|
|
2381
2300
|
propsRef.current.onKeyDown?.(event);
|
|
2382
2301
|
if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
|
|
@@ -2387,7 +2306,7 @@ function FileUploadDropzone(props) {
|
|
|
2387
2306
|
[context.inputRef, propsRef]
|
|
2388
2307
|
);
|
|
2389
2308
|
const DropzonePrimitive = asChild ? Slot : "div";
|
|
2390
|
-
return /* @__PURE__ */
|
|
2309
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2391
2310
|
DropzonePrimitive,
|
|
2392
2311
|
{
|
|
2393
2312
|
role: "region",
|
|
@@ -2429,7 +2348,7 @@ function FileUploadList(props) {
|
|
|
2429
2348
|
const shouldRender = forceMount || fileCount > 0;
|
|
2430
2349
|
if (!shouldRender) return null;
|
|
2431
2350
|
const ListPrimitive = asChild ? Slot : "div";
|
|
2432
|
-
return /* @__PURE__ */
|
|
2351
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2433
2352
|
ListPrimitive,
|
|
2434
2353
|
{
|
|
2435
2354
|
role: "list",
|
|
@@ -2448,9 +2367,9 @@ function FileUploadList(props) {
|
|
|
2448
2367
|
}
|
|
2449
2368
|
);
|
|
2450
2369
|
}
|
|
2451
|
-
var FileUploadItemContext =
|
|
2370
|
+
var FileUploadItemContext = React19.createContext(null);
|
|
2452
2371
|
function useFileUploadItemContext(consumerName) {
|
|
2453
|
-
const context =
|
|
2372
|
+
const context = React19.useContext(FileUploadItemContext);
|
|
2454
2373
|
if (!context) {
|
|
2455
2374
|
throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
2456
2375
|
}
|
|
@@ -2458,7 +2377,7 @@ function useFileUploadItemContext(consumerName) {
|
|
|
2458
2377
|
}
|
|
2459
2378
|
function FileUploadItem(props) {
|
|
2460
2379
|
const { value, asChild, className, ...itemProps } = props;
|
|
2461
|
-
const id =
|
|
2380
|
+
const id = React19.useId();
|
|
2462
2381
|
const statusId = `${id}-status`;
|
|
2463
2382
|
const nameId = `${id}-name`;
|
|
2464
2383
|
const sizeId = `${id}-size`;
|
|
@@ -2470,7 +2389,7 @@ function FileUploadItem(props) {
|
|
|
2470
2389
|
const files = Array.from(state.files.keys());
|
|
2471
2390
|
return files.indexOf(value) + 1;
|
|
2472
2391
|
});
|
|
2473
|
-
const itemContext =
|
|
2392
|
+
const itemContext = React19.useMemo(
|
|
2474
2393
|
() => ({
|
|
2475
2394
|
id,
|
|
2476
2395
|
fileState,
|
|
@@ -2484,7 +2403,7 @@ function FileUploadItem(props) {
|
|
|
2484
2403
|
if (!fileState) return null;
|
|
2485
2404
|
const statusText = fileState.error ? `Error: ${fileState.error}` : fileState.status === "uploading" ? `Uploading: ${fileState.progress}% complete` : fileState.status === "success" ? "Upload complete" : "Ready to upload";
|
|
2486
2405
|
const ItemPrimitive = asChild ? Slot : "div";
|
|
2487
|
-
return /* @__PURE__ */
|
|
2406
|
+
return /* @__PURE__ */ React19.createElement(FileUploadItemContext.Provider, { value: itemContext }, /* @__PURE__ */ React19.createElement(
|
|
2488
2407
|
ItemPrimitive,
|
|
2489
2408
|
{
|
|
2490
2409
|
role: "listitem",
|
|
@@ -2502,14 +2421,14 @@ function FileUploadItem(props) {
|
|
|
2502
2421
|
)
|
|
2503
2422
|
},
|
|
2504
2423
|
props.children,
|
|
2505
|
-
/* @__PURE__ */
|
|
2424
|
+
/* @__PURE__ */ React19.createElement("span", { id: statusId, className: "sr-only" }, statusText)
|
|
2506
2425
|
));
|
|
2507
2426
|
}
|
|
2508
2427
|
function FileUploadItemPreview(props) {
|
|
2509
2428
|
const { render, asChild, children, className, ...previewProps } = props;
|
|
2510
2429
|
const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
|
|
2511
2430
|
const context = useFileUploadContext(ITEM_PREVIEW_NAME);
|
|
2512
|
-
const getDefaultRender =
|
|
2431
|
+
const getDefaultRender = React19.useCallback(
|
|
2513
2432
|
(file) => {
|
|
2514
2433
|
if (itemContext.fileState?.file.type.startsWith("image/")) {
|
|
2515
2434
|
let url = context.urlCache.get(file);
|
|
@@ -2519,14 +2438,14 @@ function FileUploadItemPreview(props) {
|
|
|
2519
2438
|
}
|
|
2520
2439
|
return (
|
|
2521
2440
|
// biome-ignore lint/performance/noImgElement: dynamic file URLs from user uploads don't work well with Next.js Image optimization
|
|
2522
|
-
/* @__PURE__ */
|
|
2441
|
+
/* @__PURE__ */ React19.createElement("img", { src: url, alt: file.name, className: "size-full object-cover" })
|
|
2523
2442
|
);
|
|
2524
2443
|
}
|
|
2525
2444
|
return getFileIcon(file);
|
|
2526
2445
|
},
|
|
2527
2446
|
[itemContext.fileState?.file.type, context.urlCache]
|
|
2528
2447
|
);
|
|
2529
|
-
const onPreviewRender =
|
|
2448
|
+
const onPreviewRender = React19.useCallback(
|
|
2530
2449
|
(file) => {
|
|
2531
2450
|
if (render) {
|
|
2532
2451
|
return render(file, () => getDefaultRender(file));
|
|
@@ -2537,7 +2456,7 @@ function FileUploadItemPreview(props) {
|
|
|
2537
2456
|
);
|
|
2538
2457
|
if (!itemContext.fileState) return null;
|
|
2539
2458
|
const ItemPreviewPrimitive = asChild ? Slot : "div";
|
|
2540
|
-
return /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2541
2460
|
ItemPreviewPrimitive,
|
|
2542
2461
|
{
|
|
2543
2462
|
"aria-labelledby": itemContext.nameId,
|
|
@@ -2564,7 +2483,7 @@ function FileUploadItemMetadata(props) {
|
|
|
2564
2483
|
const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
|
|
2565
2484
|
if (!itemContext.fileState) return null;
|
|
2566
2485
|
const ItemMetadataPrimitive = asChild ? Slot : "div";
|
|
2567
|
-
return /* @__PURE__ */
|
|
2486
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2568
2487
|
ItemMetadataPrimitive,
|
|
2569
2488
|
{
|
|
2570
2489
|
"data-slot": "file-upload-metadata",
|
|
@@ -2572,7 +2491,7 @@ function FileUploadItemMetadata(props) {
|
|
|
2572
2491
|
...metadataProps,
|
|
2573
2492
|
className: cn("flex min-w-0 flex-1 flex-col", className)
|
|
2574
2493
|
},
|
|
2575
|
-
children ?? /* @__PURE__ */
|
|
2494
|
+
children ?? /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
|
|
2576
2495
|
"span",
|
|
2577
2496
|
{
|
|
2578
2497
|
id: itemContext.nameId,
|
|
@@ -2582,7 +2501,7 @@ function FileUploadItemMetadata(props) {
|
|
|
2582
2501
|
)
|
|
2583
2502
|
},
|
|
2584
2503
|
itemContext.fileState.file.name
|
|
2585
|
-
), /* @__PURE__ */
|
|
2504
|
+
), /* @__PURE__ */ React19.createElement(
|
|
2586
2505
|
"span",
|
|
2587
2506
|
{
|
|
2588
2507
|
id: itemContext.sizeId,
|
|
@@ -2592,7 +2511,7 @@ function FileUploadItemMetadata(props) {
|
|
|
2592
2511
|
)
|
|
2593
2512
|
},
|
|
2594
2513
|
formatBytes(itemContext.fileState.file.size)
|
|
2595
|
-
), itemContext.fileState.error && /* @__PURE__ */
|
|
2514
|
+
), itemContext.fileState.error && /* @__PURE__ */ React19.createElement(
|
|
2596
2515
|
"span",
|
|
2597
2516
|
{
|
|
2598
2517
|
id: itemContext.messageId,
|
|
@@ -2606,7 +2525,7 @@ function FileUploadItemDelete(props) {
|
|
|
2606
2525
|
const { asChild, onClick: onClickProp, ...deleteProps } = props;
|
|
2607
2526
|
const store = useStoreContext(ITEM_DELETE_NAME);
|
|
2608
2527
|
const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
|
|
2609
|
-
const onClick =
|
|
2528
|
+
const onClick = React19.useCallback(
|
|
2610
2529
|
(event) => {
|
|
2611
2530
|
onClickProp?.(event);
|
|
2612
2531
|
if (!itemContext.fileState || event.defaultPrevented) return;
|
|
@@ -2619,7 +2538,7 @@ function FileUploadItemDelete(props) {
|
|
|
2619
2538
|
);
|
|
2620
2539
|
if (!itemContext.fileState) return null;
|
|
2621
2540
|
const ItemDeletePrimitive = asChild ? Slot : "button";
|
|
2622
|
-
return /* @__PURE__ */
|
|
2541
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2623
2542
|
ItemDeletePrimitive,
|
|
2624
2543
|
{
|
|
2625
2544
|
type: "button",
|
|
@@ -2658,16 +2577,16 @@ function FileInput({
|
|
|
2658
2577
|
onFileRemove,
|
|
2659
2578
|
...props
|
|
2660
2579
|
}) {
|
|
2661
|
-
const normalizedValue =
|
|
2580
|
+
const normalizedValue = React19.useMemo(() => {
|
|
2662
2581
|
const safeValue = Array.isArray(value) ? value : [];
|
|
2663
2582
|
return multiple ? safeValue : safeValue.slice(0, 1);
|
|
2664
2583
|
}, [multiple, value]);
|
|
2665
|
-
const [cropperOpen, setCropperOpen] =
|
|
2666
|
-
const [imageToCrop, setImageToCrop] =
|
|
2667
|
-
const [crop, setCrop] =
|
|
2668
|
-
const [zoom, setZoom] =
|
|
2669
|
-
const [croppedAreaPixels, setCroppedAreaPixels] =
|
|
2670
|
-
const validateFile =
|
|
2584
|
+
const [cropperOpen, setCropperOpen] = React19.useState(false);
|
|
2585
|
+
const [imageToCrop, setImageToCrop] = React19.useState(null);
|
|
2586
|
+
const [crop, setCrop] = React19.useState({ x: 0, y: 0 });
|
|
2587
|
+
const [zoom, setZoom] = React19.useState(1);
|
|
2588
|
+
const [croppedAreaPixels, setCroppedAreaPixels] = React19.useState(null);
|
|
2589
|
+
const validateFile = React19.useCallback(
|
|
2671
2590
|
(file) => {
|
|
2672
2591
|
if (accept) {
|
|
2673
2592
|
const acceptedTypes = accept.split(",").map((type) => type.trim());
|
|
@@ -2702,7 +2621,7 @@ function FileInput({
|
|
|
2702
2621
|
},
|
|
2703
2622
|
[accept, maxSize]
|
|
2704
2623
|
);
|
|
2705
|
-
const mapRejectedFileError =
|
|
2624
|
+
const mapRejectedFileError = React19.useCallback(
|
|
2706
2625
|
(file, message) => {
|
|
2707
2626
|
const normalizedMessage = message.toLowerCase();
|
|
2708
2627
|
if (normalizedMessage.includes("maximum") && normalizedMessage.includes("files")) {
|
|
@@ -2721,27 +2640,27 @@ function FileInput({
|
|
|
2721
2640
|
},
|
|
2722
2641
|
[maxSize]
|
|
2723
2642
|
);
|
|
2724
|
-
const handleFileValidate =
|
|
2643
|
+
const handleFileValidate = React19.useCallback(
|
|
2725
2644
|
(file) => {
|
|
2726
2645
|
const validationError = validateFile(file);
|
|
2727
2646
|
return validationError?.message ?? null;
|
|
2728
2647
|
},
|
|
2729
2648
|
[validateFile]
|
|
2730
2649
|
);
|
|
2731
|
-
const handleFileReject =
|
|
2650
|
+
const handleFileReject = React19.useCallback(
|
|
2732
2651
|
(file, message) => {
|
|
2733
2652
|
const validationError = mapRejectedFileError(file, message);
|
|
2734
2653
|
onValidationError?.([validationError]);
|
|
2735
2654
|
},
|
|
2736
2655
|
[mapRejectedFileError, onValidationError]
|
|
2737
2656
|
);
|
|
2738
|
-
const handleBlur =
|
|
2657
|
+
const handleBlur = React19.useCallback(() => {
|
|
2739
2658
|
onBlur?.();
|
|
2740
2659
|
}, [onBlur]);
|
|
2741
|
-
const fileIdentity =
|
|
2660
|
+
const fileIdentity = React19.useCallback((file) => {
|
|
2742
2661
|
return `${file.name}-${file.size}-${file.lastModified}`;
|
|
2743
2662
|
}, []);
|
|
2744
|
-
const handleValueChange =
|
|
2663
|
+
const handleValueChange = React19.useCallback(
|
|
2745
2664
|
(incomingFiles) => {
|
|
2746
2665
|
const nextFiles = multiple ? incomingFiles : incomingFiles.slice(-1);
|
|
2747
2666
|
if (onFileRemove && nextFiles.length < normalizedValue.length) {
|
|
@@ -2777,7 +2696,7 @@ function FileInput({
|
|
|
2777
2696
|
fileIdentity
|
|
2778
2697
|
]
|
|
2779
2698
|
);
|
|
2780
|
-
const createCroppedImage =
|
|
2699
|
+
const createCroppedImage = React19.useCallback(
|
|
2781
2700
|
async (imageUrl, cropArea) => {
|
|
2782
2701
|
return new Promise((resolve, reject) => {
|
|
2783
2702
|
const image = new Image();
|
|
@@ -2821,7 +2740,7 @@ function FileInput({
|
|
|
2821
2740
|
},
|
|
2822
2741
|
[]
|
|
2823
2742
|
);
|
|
2824
|
-
const handleCropSave =
|
|
2743
|
+
const handleCropSave = React19.useCallback(async () => {
|
|
2825
2744
|
if (!imageToCrop || !croppedAreaPixels) return;
|
|
2826
2745
|
try {
|
|
2827
2746
|
const croppedBlob = await createCroppedImage(
|
|
@@ -2869,7 +2788,7 @@ function FileInput({
|
|
|
2869
2788
|
onChange,
|
|
2870
2789
|
onCropComplete
|
|
2871
2790
|
]);
|
|
2872
|
-
const handleCropCancel =
|
|
2791
|
+
const handleCropCancel = React19.useCallback(() => {
|
|
2873
2792
|
if (imageToCrop) {
|
|
2874
2793
|
URL.revokeObjectURL(imageToCrop.url);
|
|
2875
2794
|
}
|
|
@@ -2879,32 +2798,32 @@ function FileInput({
|
|
|
2879
2798
|
setZoom(1);
|
|
2880
2799
|
setCroppedAreaPixels(null);
|
|
2881
2800
|
}, [imageToCrop]);
|
|
2882
|
-
const handleCrop =
|
|
2801
|
+
const handleCrop = React19.useCallback((file) => {
|
|
2883
2802
|
if (!file.type.startsWith("image/")) return;
|
|
2884
2803
|
const previewUrl = URL.createObjectURL(file);
|
|
2885
2804
|
setImageToCrop({ file, url: previewUrl });
|
|
2886
2805
|
setCropperOpen(true);
|
|
2887
2806
|
}, []);
|
|
2888
|
-
const onCropChange =
|
|
2807
|
+
const onCropChange = React19.useCallback((nextCrop) => {
|
|
2889
2808
|
setCrop(nextCrop);
|
|
2890
2809
|
}, []);
|
|
2891
|
-
const onZoomChange =
|
|
2810
|
+
const onZoomChange = React19.useCallback((nextZoom) => {
|
|
2892
2811
|
setZoom(nextZoom);
|
|
2893
2812
|
}, []);
|
|
2894
|
-
const onCropCompleteInternal =
|
|
2813
|
+
const onCropCompleteInternal = React19.useCallback(
|
|
2895
2814
|
(_, nextCroppedAreaPixels) => {
|
|
2896
2815
|
setCroppedAreaPixels(nextCroppedAreaPixels);
|
|
2897
2816
|
},
|
|
2898
2817
|
[]
|
|
2899
2818
|
);
|
|
2900
|
-
const formatFileSize =
|
|
2819
|
+
const formatFileSize = React19.useCallback((bytes) => {
|
|
2901
2820
|
if (bytes === 0) return "0 Bytes";
|
|
2902
2821
|
const unit = 1024;
|
|
2903
2822
|
const units = ["Bytes", "KB", "MB", "GB"];
|
|
2904
2823
|
const index = Math.floor(Math.log(bytes) / Math.log(unit));
|
|
2905
2824
|
return Math.round(bytes / Math.pow(unit, index) * 100) / 100 + " " + units[index];
|
|
2906
2825
|
}, []);
|
|
2907
|
-
|
|
2826
|
+
React19.useEffect(() => {
|
|
2908
2827
|
return () => {
|
|
2909
2828
|
if (imageToCrop) {
|
|
2910
2829
|
URL.revokeObjectURL(imageToCrop.url);
|
|
@@ -2912,7 +2831,7 @@ function FileInput({
|
|
|
2912
2831
|
};
|
|
2913
2832
|
}, [imageToCrop]);
|
|
2914
2833
|
const fileCountLabel = normalizedValue.length > 0 ? `${normalizedValue.length} file(s) selected` : placeholder;
|
|
2915
|
-
return /* @__PURE__ */
|
|
2834
|
+
return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
|
|
2916
2835
|
FileUpload,
|
|
2917
2836
|
{
|
|
2918
2837
|
name,
|
|
@@ -2938,7 +2857,7 @@ function FileInput({
|
|
|
2938
2857
|
"aria-describedby": props["aria-describedby"]
|
|
2939
2858
|
}
|
|
2940
2859
|
},
|
|
2941
|
-
/* @__PURE__ */
|
|
2860
|
+
/* @__PURE__ */ React19.createElement(
|
|
2942
2861
|
FileUploadDropzone,
|
|
2943
2862
|
{
|
|
2944
2863
|
role: "button",
|
|
@@ -2951,7 +2870,7 @@ function FileInput({
|
|
|
2951
2870
|
error && "border-destructive"
|
|
2952
2871
|
)
|
|
2953
2872
|
},
|
|
2954
|
-
/* @__PURE__ */
|
|
2873
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React19.createElement(
|
|
2955
2874
|
"svg",
|
|
2956
2875
|
{
|
|
2957
2876
|
width: "48",
|
|
@@ -2964,23 +2883,23 @@ function FileInput({
|
|
|
2964
2883
|
strokeLinejoin: "round",
|
|
2965
2884
|
"aria-hidden": "true"
|
|
2966
2885
|
},
|
|
2967
|
-
/* @__PURE__ */
|
|
2968
|
-
/* @__PURE__ */
|
|
2969
|
-
/* @__PURE__ */
|
|
2970
|
-
), /* @__PURE__ */
|
|
2886
|
+
/* @__PURE__ */ React19.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
2887
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "17 8 12 3 7 8" }),
|
|
2888
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
|
|
2889
|
+
), /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium" }, fileCountLabel), accept && /* @__PURE__ */ React19.createElement("p", { className: "text-xs" }, "Accepted: ", accept), /* @__PURE__ */ React19.createElement("p", { className: "text-xs" }, "Max size: ", formatFileSize(maxSize)))
|
|
2971
2890
|
),
|
|
2972
|
-
/* @__PURE__ */
|
|
2891
|
+
/* @__PURE__ */ React19.createElement(FileUploadList, { className: "mt-4" }, normalizedValue.map((file, index) => {
|
|
2973
2892
|
const progressValue = uploadProgress[file.name];
|
|
2974
2893
|
const hasProgress = showProgress && typeof progressValue === "number";
|
|
2975
|
-
return /* @__PURE__ */
|
|
2894
|
+
return /* @__PURE__ */ React19.createElement(
|
|
2976
2895
|
FileUploadItem,
|
|
2977
2896
|
{
|
|
2978
2897
|
key: `${file.name}-${index}`,
|
|
2979
2898
|
value: file,
|
|
2980
2899
|
className: "flex items-center gap-3 border-border bg-card text-card-foreground hover:bg-primary/50 transition-colors"
|
|
2981
2900
|
},
|
|
2982
|
-
showPreview ? /* @__PURE__ */
|
|
2983
|
-
/* @__PURE__ */
|
|
2901
|
+
showPreview ? /* @__PURE__ */ React19.createElement(FileUploadItemPreview, { className: "h-12 w-12 rounded [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>svg]:size-6" }) : null,
|
|
2902
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React19.createElement(FileUploadItemMetadata, { className: "min-w-0" }), /* @__PURE__ */ React19.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), hasProgress ? /* @__PURE__ */ React19.createElement("div", { className: "mt-1 flex items-center gap-2" }, /* @__PURE__ */ React19.createElement(
|
|
2984
2903
|
"div",
|
|
2985
2904
|
{
|
|
2986
2905
|
className: "h-1.5 flex-1 overflow-hidden rounded-full bg-accent/40",
|
|
@@ -2990,15 +2909,15 @@ function FileInput({
|
|
|
2990
2909
|
"aria-valuemax": 100,
|
|
2991
2910
|
"aria-label": `Upload progress: ${progressValue}%`
|
|
2992
2911
|
},
|
|
2993
|
-
/* @__PURE__ */
|
|
2912
|
+
/* @__PURE__ */ React19.createElement(
|
|
2994
2913
|
"div",
|
|
2995
2914
|
{
|
|
2996
2915
|
className: "h-full bg-primary transition-all",
|
|
2997
2916
|
style: { width: `${progressValue}%` }
|
|
2998
2917
|
}
|
|
2999
2918
|
)
|
|
3000
|
-
), /* @__PURE__ */
|
|
3001
|
-
enableCropping && file.type.startsWith("image/") ? /* @__PURE__ */
|
|
2919
|
+
), /* @__PURE__ */ React19.createElement("span", { className: "text-xs" }, progressValue, "%")) : null),
|
|
2920
|
+
enableCropping && file.type.startsWith("image/") ? /* @__PURE__ */ React19.createElement(
|
|
3002
2921
|
Button,
|
|
3003
2922
|
{
|
|
3004
2923
|
type: "button",
|
|
@@ -3012,7 +2931,7 @@ function FileInput({
|
|
|
3012
2931
|
className: "h-8 w-8 p-0",
|
|
3013
2932
|
"aria-label": `Crop ${file.name}`
|
|
3014
2933
|
},
|
|
3015
|
-
/* @__PURE__ */
|
|
2934
|
+
/* @__PURE__ */ React19.createElement(
|
|
3016
2935
|
"svg",
|
|
3017
2936
|
{
|
|
3018
2937
|
width: "20",
|
|
@@ -3025,11 +2944,11 @@ function FileInput({
|
|
|
3025
2944
|
strokeLinejoin: "round",
|
|
3026
2945
|
"aria-hidden": "true"
|
|
3027
2946
|
},
|
|
3028
|
-
/* @__PURE__ */
|
|
3029
|
-
/* @__PURE__ */
|
|
2947
|
+
/* @__PURE__ */ React19.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
|
|
2948
|
+
/* @__PURE__ */ React19.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
|
|
3030
2949
|
)
|
|
3031
2950
|
) : null,
|
|
3032
|
-
/* @__PURE__ */
|
|
2951
|
+
/* @__PURE__ */ React19.createElement(FileUploadItemDelete, { asChild: true }, /* @__PURE__ */ React19.createElement(
|
|
3033
2952
|
Button,
|
|
3034
2953
|
{
|
|
3035
2954
|
type: "button",
|
|
@@ -3039,7 +2958,7 @@ function FileInput({
|
|
|
3039
2958
|
className: "h-8 w-8 p-0",
|
|
3040
2959
|
"aria-label": `Remove ${file.name}`
|
|
3041
2960
|
},
|
|
3042
|
-
/* @__PURE__ */
|
|
2961
|
+
/* @__PURE__ */ React19.createElement(
|
|
3043
2962
|
"svg",
|
|
3044
2963
|
{
|
|
3045
2964
|
width: "20",
|
|
@@ -3052,13 +2971,13 @@ function FileInput({
|
|
|
3052
2971
|
strokeLinejoin: "round",
|
|
3053
2972
|
"aria-hidden": "true"
|
|
3054
2973
|
},
|
|
3055
|
-
/* @__PURE__ */
|
|
3056
|
-
/* @__PURE__ */
|
|
2974
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
2975
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
3057
2976
|
)
|
|
3058
2977
|
))
|
|
3059
2978
|
);
|
|
3060
2979
|
}))
|
|
3061
|
-
), /* @__PURE__ */
|
|
2980
|
+
), /* @__PURE__ */ React19.createElement(
|
|
3062
2981
|
Dialog,
|
|
3063
2982
|
{
|
|
3064
2983
|
open: cropperOpen && Boolean(imageToCrop),
|
|
@@ -3068,14 +2987,14 @@ function FileInput({
|
|
|
3068
2987
|
}
|
|
3069
2988
|
}
|
|
3070
2989
|
},
|
|
3071
|
-
imageToCrop ? /* @__PURE__ */
|
|
2990
|
+
imageToCrop ? /* @__PURE__ */ React19.createElement(
|
|
3072
2991
|
DialogContent,
|
|
3073
2992
|
{
|
|
3074
2993
|
showCloseButton: false,
|
|
3075
2994
|
className: "max-w-3xl gap-0 p-0",
|
|
3076
2995
|
"aria-describedby": void 0
|
|
3077
2996
|
},
|
|
3078
|
-
/* @__PURE__ */
|
|
2997
|
+
/* @__PURE__ */ React19.createElement(DialogHeader, { className: "flex-row items-center justify-between border-b border-border px-4 py-3" }, /* @__PURE__ */ React19.createElement(DialogTitle, null, "Crop Image"), /* @__PURE__ */ React19.createElement(DialogClose, { asChild: true }, /* @__PURE__ */ React19.createElement(
|
|
3079
2998
|
Button,
|
|
3080
2999
|
{
|
|
3081
3000
|
type: "button",
|
|
@@ -3084,7 +3003,7 @@ function FileInput({
|
|
|
3084
3003
|
className: "h-8 w-8 p-0",
|
|
3085
3004
|
"aria-label": "Close"
|
|
3086
3005
|
},
|
|
3087
|
-
/* @__PURE__ */
|
|
3006
|
+
/* @__PURE__ */ React19.createElement(
|
|
3088
3007
|
"svg",
|
|
3089
3008
|
{
|
|
3090
3009
|
width: "16",
|
|
@@ -3097,11 +3016,11 @@ function FileInput({
|
|
|
3097
3016
|
strokeLinejoin: "round",
|
|
3098
3017
|
"aria-hidden": "true"
|
|
3099
3018
|
},
|
|
3100
|
-
/* @__PURE__ */
|
|
3101
|
-
/* @__PURE__ */
|
|
3019
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
3020
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
3102
3021
|
)
|
|
3103
3022
|
))),
|
|
3104
|
-
/* @__PURE__ */
|
|
3023
|
+
/* @__PURE__ */ React19.createElement("div", { className: "p-4" }, /* @__PURE__ */ React19.createElement(
|
|
3105
3024
|
"div",
|
|
3106
3025
|
{
|
|
3107
3026
|
className: "relative h-96 w-full overflow-hidden rounded-md bg-accent/40",
|
|
@@ -3123,7 +3042,7 @@ function FileInput({
|
|
|
3123
3042
|
document.addEventListener("mouseup", handleMouseUp);
|
|
3124
3043
|
}
|
|
3125
3044
|
},
|
|
3126
|
-
/* @__PURE__ */
|
|
3045
|
+
/* @__PURE__ */ React19.createElement(
|
|
3127
3046
|
"img",
|
|
3128
3047
|
{
|
|
3129
3048
|
src: imageToCrop.url,
|
|
@@ -3158,7 +3077,7 @@ function FileInput({
|
|
|
3158
3077
|
}
|
|
3159
3078
|
}
|
|
3160
3079
|
),
|
|
3161
|
-
/* @__PURE__ */
|
|
3080
|
+
/* @__PURE__ */ React19.createElement(
|
|
3162
3081
|
"div",
|
|
3163
3082
|
{
|
|
3164
3083
|
className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded border-2 border-primary",
|
|
@@ -3167,9 +3086,9 @@ function FileInput({
|
|
|
3167
3086
|
aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
|
|
3168
3087
|
}
|
|
3169
3088
|
},
|
|
3170
|
-
/* @__PURE__ */
|
|
3089
|
+
/* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React19.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React19.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React19.createElement("div", null))
|
|
3171
3090
|
)
|
|
3172
|
-
), /* @__PURE__ */
|
|
3091
|
+
), /* @__PURE__ */ React19.createElement("div", { className: "mt-4 flex items-center gap-3" }, /* @__PURE__ */ React19.createElement(
|
|
3173
3092
|
"label",
|
|
3174
3093
|
{
|
|
3175
3094
|
htmlFor: "zoom-slider",
|
|
@@ -3178,7 +3097,7 @@ function FileInput({
|
|
|
3178
3097
|
"Zoom: ",
|
|
3179
3098
|
zoom.toFixed(1),
|
|
3180
3099
|
"x"
|
|
3181
|
-
), /* @__PURE__ */
|
|
3100
|
+
), /* @__PURE__ */ React19.createElement(
|
|
3182
3101
|
"input",
|
|
3183
3102
|
{
|
|
3184
3103
|
id: "zoom-slider",
|
|
@@ -3192,7 +3111,7 @@ function FileInput({
|
|
|
3192
3111
|
"aria-label": "Zoom level"
|
|
3193
3112
|
}
|
|
3194
3113
|
))),
|
|
3195
|
-
/* @__PURE__ */
|
|
3114
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-end gap-2 border-t border-border p-4" }, /* @__PURE__ */ React19.createElement(Button, { type: "button", variant: "outline", onClick: handleCropCancel }, "Cancel"), /* @__PURE__ */ React19.createElement(Button, { type: "button", onClick: handleCropSave }, "Save"))
|
|
3196
3115
|
) : null
|
|
3197
3116
|
));
|
|
3198
3117
|
}
|
|
@@ -3208,7 +3127,7 @@ function Calendar({
|
|
|
3208
3127
|
...props
|
|
3209
3128
|
}) {
|
|
3210
3129
|
const defaultClassNames = getDefaultClassNames();
|
|
3211
|
-
return /* @__PURE__ */
|
|
3130
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3212
3131
|
DayPicker,
|
|
3213
3132
|
{
|
|
3214
3133
|
showOutsideDays,
|
|
@@ -3308,7 +3227,7 @@ function Calendar({
|
|
|
3308
3227
|
},
|
|
3309
3228
|
components: {
|
|
3310
3229
|
Root: ({ className: className2, rootRef, ...props2 }) => {
|
|
3311
|
-
return /* @__PURE__ */
|
|
3230
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3312
3231
|
"div",
|
|
3313
3232
|
{
|
|
3314
3233
|
"data-slot": "calendar",
|
|
@@ -3320,7 +3239,7 @@ function Calendar({
|
|
|
3320
3239
|
},
|
|
3321
3240
|
Chevron: ({ className: className2, orientation, ...props2 }) => {
|
|
3322
3241
|
if (orientation === "left") {
|
|
3323
|
-
return /* @__PURE__ */
|
|
3242
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3324
3243
|
"svg",
|
|
3325
3244
|
{
|
|
3326
3245
|
className: cn("size-4", className2),
|
|
@@ -3332,11 +3251,11 @@ function Calendar({
|
|
|
3332
3251
|
strokeLinejoin: "round",
|
|
3333
3252
|
...props2
|
|
3334
3253
|
},
|
|
3335
|
-
/* @__PURE__ */
|
|
3254
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "15 18 9 12 15 6" })
|
|
3336
3255
|
);
|
|
3337
3256
|
}
|
|
3338
3257
|
if (orientation === "right") {
|
|
3339
|
-
return /* @__PURE__ */
|
|
3258
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3340
3259
|
"svg",
|
|
3341
3260
|
{
|
|
3342
3261
|
className: cn("size-4", className2),
|
|
@@ -3348,10 +3267,10 @@ function Calendar({
|
|
|
3348
3267
|
strokeLinejoin: "round",
|
|
3349
3268
|
...props2
|
|
3350
3269
|
},
|
|
3351
|
-
/* @__PURE__ */
|
|
3270
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "9 18 15 12 9 6" })
|
|
3352
3271
|
);
|
|
3353
3272
|
}
|
|
3354
|
-
return /* @__PURE__ */
|
|
3273
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3355
3274
|
"svg",
|
|
3356
3275
|
{
|
|
3357
3276
|
className: cn("size-4", className2),
|
|
@@ -3363,12 +3282,12 @@ function Calendar({
|
|
|
3363
3282
|
strokeLinejoin: "round",
|
|
3364
3283
|
...props2
|
|
3365
3284
|
},
|
|
3366
|
-
/* @__PURE__ */
|
|
3285
|
+
/* @__PURE__ */ React19.createElement("polyline", { points: "6 9 12 15 18 9" })
|
|
3367
3286
|
);
|
|
3368
3287
|
},
|
|
3369
3288
|
DayButton: CalendarDayButton,
|
|
3370
3289
|
WeekNumber: ({ children, ...props2 }) => {
|
|
3371
|
-
return /* @__PURE__ */
|
|
3290
|
+
return /* @__PURE__ */ React19.createElement("td", { ...props2 }, /* @__PURE__ */ React19.createElement("div", { className: "flex size-(--cell-size) items-center justify-center text-center" }, children));
|
|
3372
3291
|
},
|
|
3373
3292
|
...components
|
|
3374
3293
|
},
|
|
@@ -3383,11 +3302,11 @@ function CalendarDayButton({
|
|
|
3383
3302
|
...props
|
|
3384
3303
|
}) {
|
|
3385
3304
|
const defaultClassNames = getDefaultClassNames();
|
|
3386
|
-
const ref =
|
|
3387
|
-
|
|
3305
|
+
const ref = React19.useRef(null);
|
|
3306
|
+
React19.useEffect(() => {
|
|
3388
3307
|
if (modifiers.focused) ref.current?.focus();
|
|
3389
3308
|
}, [modifiers.focused]);
|
|
3390
|
-
return /* @__PURE__ */
|
|
3309
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3391
3310
|
Button,
|
|
3392
3311
|
{
|
|
3393
3312
|
ref,
|
|
@@ -3439,7 +3358,7 @@ function DatePickerDayButton({
|
|
|
3439
3358
|
children,
|
|
3440
3359
|
...props
|
|
3441
3360
|
}) {
|
|
3442
|
-
return /* @__PURE__ */
|
|
3361
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3443
3362
|
"button",
|
|
3444
3363
|
{
|
|
3445
3364
|
type: "button",
|
|
@@ -3475,18 +3394,18 @@ function DatePicker({
|
|
|
3475
3394
|
showIcon = true,
|
|
3476
3395
|
...props
|
|
3477
3396
|
}) {
|
|
3478
|
-
const [isOpen, setIsOpen] =
|
|
3479
|
-
const [hasInteracted, setHasInteracted] =
|
|
3480
|
-
const [selectedMonth, setSelectedMonth] =
|
|
3397
|
+
const [isOpen, setIsOpen] = React19.useState(false);
|
|
3398
|
+
const [hasInteracted, setHasInteracted] = React19.useState(false);
|
|
3399
|
+
const [selectedMonth, setSelectedMonth] = React19.useState(
|
|
3481
3400
|
value || /* @__PURE__ */ new Date()
|
|
3482
3401
|
);
|
|
3483
|
-
const inputRef =
|
|
3484
|
-
|
|
3402
|
+
const inputRef = React19.useRef(null);
|
|
3403
|
+
React19.useEffect(() => {
|
|
3485
3404
|
if (value) {
|
|
3486
3405
|
setSelectedMonth(value);
|
|
3487
3406
|
}
|
|
3488
3407
|
}, [value]);
|
|
3489
|
-
const disabledMatchers =
|
|
3408
|
+
const disabledMatchers = React19.useMemo(() => {
|
|
3490
3409
|
const matchers = [];
|
|
3491
3410
|
if (minDate) {
|
|
3492
3411
|
matchers.push({ before: minDate });
|
|
@@ -3502,7 +3421,7 @@ function DatePicker({
|
|
|
3502
3421
|
}
|
|
3503
3422
|
return matchers;
|
|
3504
3423
|
}, [disabledDates, isDateDisabled, maxDate, minDate]);
|
|
3505
|
-
const handleDateSelect =
|
|
3424
|
+
const handleDateSelect = React19.useCallback(
|
|
3506
3425
|
(date) => {
|
|
3507
3426
|
if (!date) return;
|
|
3508
3427
|
onChange(date);
|
|
@@ -3512,7 +3431,7 @@ function DatePicker({
|
|
|
3512
3431
|
},
|
|
3513
3432
|
[onBlur, onChange]
|
|
3514
3433
|
);
|
|
3515
|
-
const handleClear =
|
|
3434
|
+
const handleClear = React19.useCallback(
|
|
3516
3435
|
(e) => {
|
|
3517
3436
|
e.stopPropagation();
|
|
3518
3437
|
onChange(null);
|
|
@@ -3521,7 +3440,7 @@ function DatePicker({
|
|
|
3521
3440
|
},
|
|
3522
3441
|
[onChange]
|
|
3523
3442
|
);
|
|
3524
|
-
const handleOpenChange =
|
|
3443
|
+
const handleOpenChange = React19.useCallback(
|
|
3525
3444
|
(nextOpen) => {
|
|
3526
3445
|
if (disabled) {
|
|
3527
3446
|
setIsOpen(false);
|
|
@@ -3541,12 +3460,12 @@ function DatePicker({
|
|
|
3541
3460
|
},
|
|
3542
3461
|
[disabled, hasInteracted, isOpen, onBlur]
|
|
3543
3462
|
);
|
|
3544
|
-
const handleInputBlur =
|
|
3463
|
+
const handleInputBlur = React19.useCallback(() => {
|
|
3545
3464
|
if (!isOpen) {
|
|
3546
3465
|
onBlur?.();
|
|
3547
3466
|
}
|
|
3548
3467
|
}, [isOpen, onBlur]);
|
|
3549
|
-
const handleInputClick =
|
|
3468
|
+
const handleInputClick = React19.useCallback(() => {
|
|
3550
3469
|
if (!hasInteracted) {
|
|
3551
3470
|
setHasInteracted(true);
|
|
3552
3471
|
}
|
|
@@ -3554,20 +3473,20 @@ function DatePicker({
|
|
|
3554
3473
|
const hasValue = Boolean(value);
|
|
3555
3474
|
const displayValue = formatDate(value, format);
|
|
3556
3475
|
const combinedClassName = cn("relative", className);
|
|
3557
|
-
return /* @__PURE__ */
|
|
3476
|
+
return /* @__PURE__ */ React19.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React19.createElement(
|
|
3558
3477
|
"input",
|
|
3559
3478
|
{
|
|
3560
3479
|
type: "hidden",
|
|
3561
3480
|
name,
|
|
3562
3481
|
value: value ? value.toISOString() : ""
|
|
3563
3482
|
}
|
|
3564
|
-
), /* @__PURE__ */
|
|
3483
|
+
), /* @__PURE__ */ React19.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React19.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19.createElement(
|
|
3565
3484
|
"span",
|
|
3566
3485
|
{
|
|
3567
3486
|
className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
|
|
3568
3487
|
"aria-hidden": "true"
|
|
3569
3488
|
},
|
|
3570
|
-
/* @__PURE__ */
|
|
3489
|
+
/* @__PURE__ */ React19.createElement(
|
|
3571
3490
|
"svg",
|
|
3572
3491
|
{
|
|
3573
3492
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3580,9 +3499,9 @@ function DatePicker({
|
|
|
3580
3499
|
strokeLinejoin: "round",
|
|
3581
3500
|
strokeWidth: "2"
|
|
3582
3501
|
},
|
|
3583
|
-
/* @__PURE__ */
|
|
3502
|
+
/* @__PURE__ */ React19.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
|
|
3584
3503
|
)
|
|
3585
|
-
), /* @__PURE__ */
|
|
3504
|
+
), /* @__PURE__ */ React19.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React19.createElement(
|
|
3586
3505
|
"input",
|
|
3587
3506
|
{
|
|
3588
3507
|
ref: inputRef,
|
|
@@ -3609,7 +3528,7 @@ function DatePicker({
|
|
|
3609
3528
|
"aria-required": required || props["aria-required"],
|
|
3610
3529
|
readOnly: true
|
|
3611
3530
|
}
|
|
3612
|
-
)), clearable && value && !disabled && /* @__PURE__ */
|
|
3531
|
+
)), clearable && value && !disabled && /* @__PURE__ */ React19.createElement(
|
|
3613
3532
|
"button",
|
|
3614
3533
|
{
|
|
3615
3534
|
type: "button",
|
|
@@ -3619,7 +3538,7 @@ function DatePicker({
|
|
|
3619
3538
|
tabIndex: -1
|
|
3620
3539
|
},
|
|
3621
3540
|
"\u2715"
|
|
3622
|
-
)), !disabled && /* @__PURE__ */
|
|
3541
|
+
)), !disabled && /* @__PURE__ */ React19.createElement(
|
|
3623
3542
|
PopoverContent,
|
|
3624
3543
|
{
|
|
3625
3544
|
align: "start",
|
|
@@ -3629,7 +3548,7 @@ function DatePicker({
|
|
|
3629
3548
|
event.preventDefault();
|
|
3630
3549
|
}
|
|
3631
3550
|
},
|
|
3632
|
-
/* @__PURE__ */
|
|
3551
|
+
/* @__PURE__ */ React19.createElement(
|
|
3633
3552
|
Calendar,
|
|
3634
3553
|
{
|
|
3635
3554
|
mode: "single",
|
|
@@ -3713,11 +3632,11 @@ function TimePicker({
|
|
|
3713
3632
|
showIcon = true,
|
|
3714
3633
|
...props
|
|
3715
3634
|
}) {
|
|
3716
|
-
const inputRef =
|
|
3717
|
-
const [nativeValue, setNativeValue] =
|
|
3635
|
+
const inputRef = React19.useRef(null);
|
|
3636
|
+
const [nativeValue, setNativeValue] = React19.useState(
|
|
3718
3637
|
normalizeToNativeTime(value)
|
|
3719
3638
|
);
|
|
3720
|
-
|
|
3639
|
+
React19.useEffect(() => {
|
|
3721
3640
|
setNativeValue(normalizeToNativeTime(value));
|
|
3722
3641
|
}, [value]);
|
|
3723
3642
|
const handleChange = (e) => {
|
|
@@ -3733,13 +3652,13 @@ function TimePicker({
|
|
|
3733
3652
|
};
|
|
3734
3653
|
const hasValue = Boolean(value);
|
|
3735
3654
|
const stepInSeconds = Math.max(1, minuteStep * 60);
|
|
3736
|
-
return /* @__PURE__ */
|
|
3655
|
+
return /* @__PURE__ */ React19.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React19.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React19.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19.createElement(
|
|
3737
3656
|
"span",
|
|
3738
3657
|
{
|
|
3739
3658
|
className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
|
|
3740
3659
|
"aria-hidden": "true"
|
|
3741
3660
|
},
|
|
3742
|
-
/* @__PURE__ */
|
|
3661
|
+
/* @__PURE__ */ React19.createElement(
|
|
3743
3662
|
"svg",
|
|
3744
3663
|
{
|
|
3745
3664
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3752,10 +3671,10 @@ function TimePicker({
|
|
|
3752
3671
|
strokeLinejoin: "round",
|
|
3753
3672
|
strokeWidth: "2"
|
|
3754
3673
|
},
|
|
3755
|
-
/* @__PURE__ */
|
|
3756
|
-
/* @__PURE__ */
|
|
3674
|
+
/* @__PURE__ */ React19.createElement("circle", { cx: "12", cy: "12", r: "10" }),
|
|
3675
|
+
/* @__PURE__ */ React19.createElement("path", { d: "M12 6v6l4 2" })
|
|
3757
3676
|
)
|
|
3758
|
-
), /* @__PURE__ */
|
|
3677
|
+
), /* @__PURE__ */ React19.createElement(
|
|
3759
3678
|
Input,
|
|
3760
3679
|
{
|
|
3761
3680
|
ref: inputRef,
|
|
@@ -3780,7 +3699,7 @@ function TimePicker({
|
|
|
3780
3699
|
"aria-required": required || props["aria-required"],
|
|
3781
3700
|
...props
|
|
3782
3701
|
}
|
|
3783
|
-
), clearable && value && !disabled && /* @__PURE__ */
|
|
3702
|
+
), clearable && value && !disabled && /* @__PURE__ */ React19.createElement(
|
|
3784
3703
|
Button,
|
|
3785
3704
|
{
|
|
3786
3705
|
type: "button",
|
|
@@ -3791,7 +3710,7 @@ function TimePicker({
|
|
|
3791
3710
|
"aria-label": "Clear time",
|
|
3792
3711
|
tabIndex: -1
|
|
3793
3712
|
},
|
|
3794
|
-
/* @__PURE__ */
|
|
3713
|
+
/* @__PURE__ */ React19.createElement(
|
|
3795
3714
|
"svg",
|
|
3796
3715
|
{
|
|
3797
3716
|
width: "14",
|
|
@@ -3804,8 +3723,8 @@ function TimePicker({
|
|
|
3804
3723
|
strokeLinejoin: "round",
|
|
3805
3724
|
"aria-hidden": "true"
|
|
3806
3725
|
},
|
|
3807
|
-
/* @__PURE__ */
|
|
3808
|
-
/* @__PURE__ */
|
|
3726
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
3727
|
+
/* @__PURE__ */ React19.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
3809
3728
|
)
|
|
3810
3729
|
)));
|
|
3811
3730
|
}
|
|
@@ -3852,23 +3771,23 @@ function DateRangePicker({
|
|
|
3852
3771
|
separator = " - ",
|
|
3853
3772
|
...props
|
|
3854
3773
|
}) {
|
|
3855
|
-
const [isOpen, setIsOpen] =
|
|
3856
|
-
const [hasInteracted, setHasInteracted] =
|
|
3857
|
-
const [selectedMonth, setSelectedMonth] =
|
|
3774
|
+
const [isOpen, setIsOpen] = React19.useState(false);
|
|
3775
|
+
const [hasInteracted, setHasInteracted] = React19.useState(false);
|
|
3776
|
+
const [selectedMonth, setSelectedMonth] = React19.useState(
|
|
3858
3777
|
value.start || /* @__PURE__ */ new Date()
|
|
3859
3778
|
);
|
|
3860
|
-
const [rangeStart, setRangeStart] =
|
|
3861
|
-
const [rangeEnd, setRangeEnd] =
|
|
3862
|
-
const [hoverDate, setHoverDate] =
|
|
3863
|
-
const inputRef =
|
|
3864
|
-
|
|
3779
|
+
const [rangeStart, setRangeStart] = React19.useState(value.start);
|
|
3780
|
+
const [rangeEnd, setRangeEnd] = React19.useState(value.end);
|
|
3781
|
+
const [hoverDate, setHoverDate] = React19.useState(null);
|
|
3782
|
+
const inputRef = React19.useRef(null);
|
|
3783
|
+
React19.useEffect(() => {
|
|
3865
3784
|
setRangeStart(value.start);
|
|
3866
3785
|
setRangeEnd(value.end);
|
|
3867
3786
|
if (value.start) {
|
|
3868
3787
|
setSelectedMonth(value.start);
|
|
3869
3788
|
}
|
|
3870
3789
|
}, [value]);
|
|
3871
|
-
const disabledMatchers =
|
|
3790
|
+
const disabledMatchers = React19.useMemo(() => {
|
|
3872
3791
|
const matchers = [];
|
|
3873
3792
|
if (minDate) {
|
|
3874
3793
|
matchers.push({ before: minDate });
|
|
@@ -3884,7 +3803,7 @@ function DateRangePicker({
|
|
|
3884
3803
|
}
|
|
3885
3804
|
return matchers;
|
|
3886
3805
|
}, [disabledDates, isDateDisabled, maxDate, minDate]);
|
|
3887
|
-
const handleDateSelect =
|
|
3806
|
+
const handleDateSelect = React19.useCallback(
|
|
3888
3807
|
(date) => {
|
|
3889
3808
|
if (!rangeStart || rangeEnd) {
|
|
3890
3809
|
setRangeStart(date);
|
|
@@ -3914,7 +3833,7 @@ function DateRangePicker({
|
|
|
3914
3833
|
},
|
|
3915
3834
|
[onBlur, onChange, rangeEnd, rangeStart]
|
|
3916
3835
|
);
|
|
3917
|
-
const handleClear =
|
|
3836
|
+
const handleClear = React19.useCallback(
|
|
3918
3837
|
(e) => {
|
|
3919
3838
|
e.stopPropagation();
|
|
3920
3839
|
setRangeStart(null);
|
|
@@ -3926,7 +3845,7 @@ function DateRangePicker({
|
|
|
3926
3845
|
},
|
|
3927
3846
|
[onChange]
|
|
3928
3847
|
);
|
|
3929
|
-
const handleOpenChange =
|
|
3848
|
+
const handleOpenChange = React19.useCallback(
|
|
3930
3849
|
(nextOpen) => {
|
|
3931
3850
|
if (disabled) {
|
|
3932
3851
|
setIsOpen(false);
|
|
@@ -3947,17 +3866,17 @@ function DateRangePicker({
|
|
|
3947
3866
|
},
|
|
3948
3867
|
[disabled, hasInteracted, isOpen, onBlur]
|
|
3949
3868
|
);
|
|
3950
|
-
const handleInputBlur =
|
|
3869
|
+
const handleInputBlur = React19.useCallback(() => {
|
|
3951
3870
|
if (!isOpen) {
|
|
3952
3871
|
onBlur?.();
|
|
3953
3872
|
}
|
|
3954
3873
|
}, [isOpen, onBlur]);
|
|
3955
|
-
const handleInputClick =
|
|
3874
|
+
const handleInputClick = React19.useCallback(() => {
|
|
3956
3875
|
if (!hasInteracted) {
|
|
3957
3876
|
setHasInteracted(true);
|
|
3958
3877
|
}
|
|
3959
3878
|
}, [hasInteracted]);
|
|
3960
|
-
const RangeDayButton =
|
|
3879
|
+
const RangeDayButton = React19.useCallback(
|
|
3961
3880
|
({
|
|
3962
3881
|
day,
|
|
3963
3882
|
modifiers,
|
|
@@ -3976,7 +3895,7 @@ function DateRangePicker({
|
|
|
3976
3895
|
const isInHoverRange = !!rangeStart && !rangeEnd && !!hoverDate && isDateInRange(date, rangeStart, hoverDate);
|
|
3977
3896
|
const isRangeHighlight = (isInCommittedRange || isInHoverRange) && !isRangeEndpoint;
|
|
3978
3897
|
const isToday = isSameDay(date, /* @__PURE__ */ new Date());
|
|
3979
|
-
return /* @__PURE__ */
|
|
3898
|
+
return /* @__PURE__ */ React19.createElement(
|
|
3980
3899
|
"button",
|
|
3981
3900
|
{
|
|
3982
3901
|
type: "button",
|
|
@@ -4020,27 +3939,27 @@ function DateRangePicker({
|
|
|
4020
3939
|
} : void 0;
|
|
4021
3940
|
const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
|
|
4022
3941
|
const combinedClassName = cn("relative", className);
|
|
4023
|
-
return /* @__PURE__ */
|
|
3942
|
+
return /* @__PURE__ */ React19.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React19.createElement(
|
|
4024
3943
|
"input",
|
|
4025
3944
|
{
|
|
4026
3945
|
type: "hidden",
|
|
4027
3946
|
name: `${name}[start]`,
|
|
4028
3947
|
value: rangeStart ? rangeStart.toISOString() : ""
|
|
4029
3948
|
}
|
|
4030
|
-
), /* @__PURE__ */
|
|
3949
|
+
), /* @__PURE__ */ React19.createElement(
|
|
4031
3950
|
"input",
|
|
4032
3951
|
{
|
|
4033
3952
|
type: "hidden",
|
|
4034
3953
|
name: `${name}[end]`,
|
|
4035
3954
|
value: rangeEnd ? rangeEnd.toISOString() : ""
|
|
4036
3955
|
}
|
|
4037
|
-
), /* @__PURE__ */
|
|
3956
|
+
), /* @__PURE__ */ React19.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React19.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19.createElement(
|
|
4038
3957
|
"span",
|
|
4039
3958
|
{
|
|
4040
3959
|
className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
|
|
4041
3960
|
"aria-hidden": "true"
|
|
4042
3961
|
},
|
|
4043
|
-
/* @__PURE__ */
|
|
3962
|
+
/* @__PURE__ */ React19.createElement(
|
|
4044
3963
|
"svg",
|
|
4045
3964
|
{
|
|
4046
3965
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -4053,9 +3972,9 @@ function DateRangePicker({
|
|
|
4053
3972
|
strokeLinejoin: "round",
|
|
4054
3973
|
strokeWidth: "2"
|
|
4055
3974
|
},
|
|
4056
|
-
/* @__PURE__ */
|
|
3975
|
+
/* @__PURE__ */ React19.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
|
|
4057
3976
|
)
|
|
4058
|
-
), /* @__PURE__ */
|
|
3977
|
+
), /* @__PURE__ */ React19.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React19.createElement(
|
|
4059
3978
|
"input",
|
|
4060
3979
|
{
|
|
4061
3980
|
ref: inputRef,
|
|
@@ -4082,7 +4001,7 @@ function DateRangePicker({
|
|
|
4082
4001
|
"aria-required": required || props["aria-required"],
|
|
4083
4002
|
readOnly: true
|
|
4084
4003
|
}
|
|
4085
|
-
)), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */
|
|
4004
|
+
)), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React19.createElement(
|
|
4086
4005
|
"button",
|
|
4087
4006
|
{
|
|
4088
4007
|
type: "button",
|
|
@@ -4092,7 +4011,7 @@ function DateRangePicker({
|
|
|
4092
4011
|
tabIndex: -1
|
|
4093
4012
|
},
|
|
4094
4013
|
"\u2715"
|
|
4095
|
-
)), !disabled && /* @__PURE__ */
|
|
4014
|
+
)), !disabled && /* @__PURE__ */ React19.createElement(
|
|
4096
4015
|
PopoverContent,
|
|
4097
4016
|
{
|
|
4098
4017
|
align: "start",
|
|
@@ -4102,7 +4021,7 @@ function DateRangePicker({
|
|
|
4102
4021
|
event.preventDefault();
|
|
4103
4022
|
}
|
|
4104
4023
|
},
|
|
4105
|
-
/* @__PURE__ */
|
|
4024
|
+
/* @__PURE__ */ React19.createElement(
|
|
4106
4025
|
Calendar,
|
|
4107
4026
|
{
|
|
4108
4027
|
mode: "range",
|
|
@@ -4125,11 +4044,11 @@ function DateRangePicker({
|
|
|
4125
4044
|
showOutsideDays: true
|
|
4126
4045
|
}
|
|
4127
4046
|
),
|
|
4128
|
-
rangeStart && !rangeEnd && /* @__PURE__ */
|
|
4047
|
+
rangeStart && !rangeEnd && /* @__PURE__ */ React19.createElement("div", { className: "border-t border-input px-3 py-2 text-center text-xs opacity-70" }, "Select end date")
|
|
4129
4048
|
)));
|
|
4130
4049
|
}
|
|
4131
4050
|
DateRangePicker.displayName = "DateRangePicker";
|
|
4132
4051
|
|
|
4133
|
-
export { Checkbox2 as Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select2 as Select, Switch2 as Switch, TextArea,
|
|
4134
|
-
//# sourceMappingURL=chunk-
|
|
4135
|
-
//# sourceMappingURL=chunk-
|
|
4052
|
+
export { Checkbox2 as Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select2 as Select, Switch2 as Switch, TextArea, TimePicker };
|
|
4053
|
+
//# sourceMappingURL=chunk-4ROWNTY6.js.map
|
|
4054
|
+
//# sourceMappingURL=chunk-4ROWNTY6.js.map
|