@nextui-org/theme 2.2.10 → 2.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-XEPPBQPJ.mjs → chunk-22SLLLIZ.mjs} +16 -16
- package/dist/{chunk-WJIRIXV4.mjs → chunk-ARYJFX77.mjs} +22 -31
- package/dist/{chunk-4MIBATA4.mjs → chunk-JYFVXE5E.mjs} +12 -12
- package/dist/{chunk-OUNBTYJ7.mjs → chunk-KUKJUMC3.mjs} +8 -8
- package/dist/{chunk-FE2UYWMQ.mjs → chunk-M3GQ3DWZ.mjs} +32 -42
- package/dist/{chunk-I33PMOA3.mjs → chunk-QWWVIX6M.mjs} +43 -43
- package/dist/{chunk-BOVVTMHS.mjs → chunk-TA7PDZUG.mjs} +4 -4
- package/dist/{chunk-TSTU52NB.mjs → chunk-WGH4WKVU.mjs} +3 -3
- package/dist/components/autocomplete.js +4 -4
- package/dist/components/autocomplete.mjs +1 -1
- package/dist/components/checkbox.js +8 -8
- package/dist/components/checkbox.mjs +1 -1
- package/dist/components/date-input.js +16 -16
- package/dist/components/date-input.mjs +1 -1
- package/dist/components/date-picker.js +3 -3
- package/dist/components/date-picker.mjs +1 -1
- package/dist/components/index.js +140 -159
- package/dist/components/index.mjs +8 -8
- package/dist/components/input.js +43 -43
- package/dist/components/input.mjs +1 -1
- package/dist/components/radio.js +12 -12
- package/dist/components/radio.mjs +1 -1
- package/dist/components/select.js +32 -42
- package/dist/components/select.mjs +1 -1
- package/dist/components/toggle.js +22 -31
- package/dist/components/toggle.mjs +1 -1
- package/dist/index.js +140 -159
- package/dist/index.mjs +8 -8
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
// src/components/input.ts
|
|
10
10
|
var input = tv({
|
|
11
11
|
slots: {
|
|
12
|
-
base: "group
|
|
12
|
+
base: "group flex flex-col data-[hidden=true]:hidden",
|
|
13
13
|
label: [
|
|
14
14
|
"absolute",
|
|
15
15
|
"z-10",
|
|
@@ -49,7 +49,7 @@ var input = tv({
|
|
|
49
49
|
"rounded-full",
|
|
50
50
|
...dataFocusVisibleClasses
|
|
51
51
|
],
|
|
52
|
-
helperWrapper: "hidden group-data-[has-helper=true]
|
|
52
|
+
helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
|
|
53
53
|
description: "text-tiny text-foreground-400",
|
|
54
54
|
errorMessage: "text-tiny text-danger"
|
|
55
55
|
},
|
|
@@ -59,7 +59,7 @@ var input = tv({
|
|
|
59
59
|
inputWrapper: [
|
|
60
60
|
"bg-default-100",
|
|
61
61
|
"data-[hover=true]:bg-default-200",
|
|
62
|
-
"group-data-[focus=true]
|
|
62
|
+
"group-data-[focus=true]:bg-default-100"
|
|
63
63
|
]
|
|
64
64
|
},
|
|
65
65
|
faded: {
|
|
@@ -69,14 +69,14 @@ var input = tv({
|
|
|
69
69
|
"border-default-200",
|
|
70
70
|
"data-[hover=true]:border-default-400"
|
|
71
71
|
],
|
|
72
|
-
value: "group-data-[has-value=true]
|
|
72
|
+
value: "group-data-[has-value=true]:text-default-foreground"
|
|
73
73
|
},
|
|
74
74
|
bordered: {
|
|
75
75
|
inputWrapper: [
|
|
76
76
|
"border-medium",
|
|
77
77
|
"border-default-200",
|
|
78
78
|
"data-[hover=true]:border-default-400",
|
|
79
|
-
"group-data-[focus=true]
|
|
79
|
+
"group-data-[focus=true]:border-default-foreground"
|
|
80
80
|
]
|
|
81
81
|
},
|
|
82
82
|
underlined: {
|
|
@@ -100,10 +100,10 @@ var input = tv({
|
|
|
100
100
|
"after:-translate-x-1/2",
|
|
101
101
|
"after:-bottom-[2px]",
|
|
102
102
|
"after:h-[2px]",
|
|
103
|
-
"group-data-[focus=true]
|
|
103
|
+
"group-data-[focus=true]:after:w-full"
|
|
104
104
|
],
|
|
105
105
|
innerWrapper: "pb-1",
|
|
106
|
-
label: "group-data-[filled-within=true]
|
|
106
|
+
label: "group-data-[filled-within=true]:text-foreground"
|
|
107
107
|
}
|
|
108
108
|
},
|
|
109
109
|
color: {
|
|
@@ -162,7 +162,7 @@ var input = tv({
|
|
|
162
162
|
inside: {
|
|
163
163
|
label: "text-tiny cursor-text",
|
|
164
164
|
inputWrapper: "flex-col items-start justify-center gap-0",
|
|
165
|
-
innerWrapper: "group-data-[has-label=true]
|
|
165
|
+
innerWrapper: "group-data-[has-label=true]:items-end"
|
|
166
166
|
}
|
|
167
167
|
},
|
|
168
168
|
fullWidth: {
|
|
@@ -198,7 +198,7 @@ var input = tv({
|
|
|
198
198
|
true: {
|
|
199
199
|
label: "relative",
|
|
200
200
|
inputWrapper: "!h-auto",
|
|
201
|
-
innerWrapper: "items-start group-data-[has-label=true]
|
|
201
|
+
innerWrapper: "items-start group-data-[has-label=true]:items-start",
|
|
202
202
|
input: "resize-none data-[hide-scroll=true]:scrollbar-hide"
|
|
203
203
|
}
|
|
204
204
|
},
|
|
@@ -235,7 +235,7 @@ var input = tv({
|
|
|
235
235
|
variant: "flat",
|
|
236
236
|
color: "default",
|
|
237
237
|
class: {
|
|
238
|
-
input: "group-data-[has-value=true]
|
|
238
|
+
input: "group-data-[has-value=true]:text-default-foreground"
|
|
239
239
|
}
|
|
240
240
|
},
|
|
241
241
|
{
|
|
@@ -246,7 +246,7 @@ var input = tv({
|
|
|
246
246
|
"bg-primary-50",
|
|
247
247
|
"data-[hover=true]:bg-primary-100",
|
|
248
248
|
"text-primary",
|
|
249
|
-
"group-data-[focus=true]
|
|
249
|
+
"group-data-[focus=true]:bg-primary-50",
|
|
250
250
|
"placeholder:text-primary"
|
|
251
251
|
],
|
|
252
252
|
input: "placeholder:text-primary",
|
|
@@ -261,7 +261,7 @@ var input = tv({
|
|
|
261
261
|
"bg-secondary-50",
|
|
262
262
|
"text-secondary",
|
|
263
263
|
"data-[hover=true]:bg-secondary-100",
|
|
264
|
-
"group-data-[focus=true]
|
|
264
|
+
"group-data-[focus=true]:bg-secondary-50",
|
|
265
265
|
"placeholder:text-secondary"
|
|
266
266
|
],
|
|
267
267
|
input: "placeholder:text-secondary",
|
|
@@ -279,7 +279,7 @@ var input = tv({
|
|
|
279
279
|
"placeholder:text-success-600",
|
|
280
280
|
"dark:placeholder:text-success",
|
|
281
281
|
"data-[hover=true]:bg-success-100",
|
|
282
|
-
"group-data-[focus=true]
|
|
282
|
+
"group-data-[focus=true]:bg-success-50"
|
|
283
283
|
],
|
|
284
284
|
input: "placeholder:text-success-600 dark:placeholder:text-success",
|
|
285
285
|
label: "text-success-600 dark:text-success"
|
|
@@ -296,7 +296,7 @@ var input = tv({
|
|
|
296
296
|
"placeholder:text-warning-600",
|
|
297
297
|
"dark:placeholder:text-warning",
|
|
298
298
|
"data-[hover=true]:bg-warning-100",
|
|
299
|
-
"group-data-[focus=true]
|
|
299
|
+
"group-data-[focus=true]:bg-warning-50"
|
|
300
300
|
],
|
|
301
301
|
input: "placeholder:text-warning-600 dark:placeholder:text-warning",
|
|
302
302
|
label: "text-warning-600 dark:text-warning"
|
|
@@ -313,7 +313,7 @@ var input = tv({
|
|
|
313
313
|
"placeholder:text-danger",
|
|
314
314
|
"dark:placeholder:text-danger-500",
|
|
315
315
|
"data-[hover=true]:bg-danger-100",
|
|
316
|
-
"group-data-[focus=true]
|
|
316
|
+
"group-data-[focus=true]:bg-danger-50"
|
|
317
317
|
],
|
|
318
318
|
input: "placeholder:text-danger dark:placeholder:text-danger-500",
|
|
319
319
|
label: "text-danger dark:text-danger-500"
|
|
@@ -363,7 +363,7 @@ var input = tv({
|
|
|
363
363
|
variant: "underlined",
|
|
364
364
|
color: "default",
|
|
365
365
|
class: {
|
|
366
|
-
input: "group-data-[has-value=true]
|
|
366
|
+
input: "group-data-[has-value=true]:text-foreground"
|
|
367
367
|
}
|
|
368
368
|
},
|
|
369
369
|
{
|
|
@@ -410,7 +410,7 @@ var input = tv({
|
|
|
410
410
|
variant: "bordered",
|
|
411
411
|
color: "primary",
|
|
412
412
|
class: {
|
|
413
|
-
inputWrapper: "group-data-[focus=true]
|
|
413
|
+
inputWrapper: "group-data-[focus=true]:border-primary",
|
|
414
414
|
label: "text-primary"
|
|
415
415
|
}
|
|
416
416
|
},
|
|
@@ -418,7 +418,7 @@ var input = tv({
|
|
|
418
418
|
variant: "bordered",
|
|
419
419
|
color: "secondary",
|
|
420
420
|
class: {
|
|
421
|
-
inputWrapper: "group-data-[focus=true]
|
|
421
|
+
inputWrapper: "group-data-[focus=true]:border-secondary",
|
|
422
422
|
label: "text-secondary"
|
|
423
423
|
}
|
|
424
424
|
},
|
|
@@ -426,7 +426,7 @@ var input = tv({
|
|
|
426
426
|
variant: "bordered",
|
|
427
427
|
color: "success",
|
|
428
428
|
class: {
|
|
429
|
-
inputWrapper: "group-data-[focus=true]
|
|
429
|
+
inputWrapper: "group-data-[focus=true]:border-success",
|
|
430
430
|
label: "text-success"
|
|
431
431
|
}
|
|
432
432
|
},
|
|
@@ -434,7 +434,7 @@ var input = tv({
|
|
|
434
434
|
variant: "bordered",
|
|
435
435
|
color: "warning",
|
|
436
436
|
class: {
|
|
437
|
-
inputWrapper: "group-data-[focus=true]
|
|
437
|
+
inputWrapper: "group-data-[focus=true]:border-warning",
|
|
438
438
|
label: "text-warning"
|
|
439
439
|
}
|
|
440
440
|
},
|
|
@@ -442,7 +442,7 @@ var input = tv({
|
|
|
442
442
|
variant: "bordered",
|
|
443
443
|
color: "danger",
|
|
444
444
|
class: {
|
|
445
|
-
inputWrapper: "group-data-[focus=true]
|
|
445
|
+
inputWrapper: "group-data-[focus=true]:border-danger",
|
|
446
446
|
label: "text-danger"
|
|
447
447
|
}
|
|
448
448
|
},
|
|
@@ -450,14 +450,14 @@ var input = tv({
|
|
|
450
450
|
labelPlacement: "inside",
|
|
451
451
|
color: "default",
|
|
452
452
|
class: {
|
|
453
|
-
label: "group-data-[filled-within=true]
|
|
453
|
+
label: "group-data-[filled-within=true]:text-default-600"
|
|
454
454
|
}
|
|
455
455
|
},
|
|
456
456
|
{
|
|
457
457
|
labelPlacement: "outside",
|
|
458
458
|
color: "default",
|
|
459
459
|
class: {
|
|
460
|
-
label: "group-data-[filled-within=true]
|
|
460
|
+
label: "group-data-[filled-within=true]:text-foreground"
|
|
461
461
|
}
|
|
462
462
|
},
|
|
463
463
|
{
|
|
@@ -510,7 +510,7 @@ var input = tv({
|
|
|
510
510
|
inputWrapper: [
|
|
511
511
|
"!bg-danger-50",
|
|
512
512
|
"data-[hover=true]:!bg-danger-100",
|
|
513
|
-
"group-data-[focus=true]
|
|
513
|
+
"group-data-[focus=true]:!bg-danger-50"
|
|
514
514
|
]
|
|
515
515
|
}
|
|
516
516
|
},
|
|
@@ -518,7 +518,7 @@ var input = tv({
|
|
|
518
518
|
isInvalid: true,
|
|
519
519
|
variant: "bordered",
|
|
520
520
|
class: {
|
|
521
|
-
inputWrapper: "!border-danger group-data-[focus=true]
|
|
521
|
+
inputWrapper: "!border-danger group-data-[focus=true]:!border-danger"
|
|
522
522
|
}
|
|
523
523
|
},
|
|
524
524
|
{
|
|
@@ -561,7 +561,7 @@ var input = tv({
|
|
|
561
561
|
{
|
|
562
562
|
labelPlacement: ["inside", "outside"],
|
|
563
563
|
class: {
|
|
564
|
-
label: ["group-data-[filled-within=true]
|
|
564
|
+
label: ["group-data-[filled-within=true]:pointer-events-auto"]
|
|
565
565
|
}
|
|
566
566
|
},
|
|
567
567
|
{
|
|
@@ -574,14 +574,14 @@ var input = tv({
|
|
|
574
574
|
"z-20",
|
|
575
575
|
"top-1/2",
|
|
576
576
|
"-translate-y-1/2",
|
|
577
|
-
"group-data-[filled-within=true]
|
|
577
|
+
"group-data-[filled-within=true]:start-0"
|
|
578
578
|
]
|
|
579
579
|
}
|
|
580
580
|
},
|
|
581
581
|
{
|
|
582
582
|
labelPlacement: ["inside"],
|
|
583
583
|
class: {
|
|
584
|
-
label: ["group-data-[filled-within=true]
|
|
584
|
+
label: ["group-data-[filled-within=true]:scale-85"]
|
|
585
585
|
}
|
|
586
586
|
},
|
|
587
587
|
{
|
|
@@ -618,7 +618,7 @@ var input = tv({
|
|
|
618
618
|
size: "sm",
|
|
619
619
|
class: {
|
|
620
620
|
label: [
|
|
621
|
-
"group-data-[filled-within=true]
|
|
621
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
|
|
622
622
|
]
|
|
623
623
|
}
|
|
624
624
|
},
|
|
@@ -628,7 +628,7 @@ var input = tv({
|
|
|
628
628
|
size: "md",
|
|
629
629
|
class: {
|
|
630
630
|
label: [
|
|
631
|
-
"group-data-[filled-within=true]
|
|
631
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
|
|
632
632
|
]
|
|
633
633
|
}
|
|
634
634
|
},
|
|
@@ -639,7 +639,7 @@ var input = tv({
|
|
|
639
639
|
class: {
|
|
640
640
|
label: [
|
|
641
641
|
"text-medium",
|
|
642
|
-
"group-data-[filled-within=true]
|
|
642
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
|
|
643
643
|
]
|
|
644
644
|
}
|
|
645
645
|
},
|
|
@@ -650,7 +650,7 @@ var input = tv({
|
|
|
650
650
|
size: "sm",
|
|
651
651
|
class: {
|
|
652
652
|
label: [
|
|
653
|
-
"group-data-[filled-within=true]
|
|
653
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
|
|
654
654
|
]
|
|
655
655
|
}
|
|
656
656
|
},
|
|
@@ -661,7 +661,7 @@ var input = tv({
|
|
|
661
661
|
size: "md",
|
|
662
662
|
class: {
|
|
663
663
|
label: [
|
|
664
|
-
"group-data-[filled-within=true]
|
|
664
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
|
|
665
665
|
]
|
|
666
666
|
}
|
|
667
667
|
},
|
|
@@ -673,7 +673,7 @@ var input = tv({
|
|
|
673
673
|
class: {
|
|
674
674
|
label: [
|
|
675
675
|
"text-medium",
|
|
676
|
-
"group-data-[filled-within=true]
|
|
676
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
|
|
677
677
|
]
|
|
678
678
|
}
|
|
679
679
|
},
|
|
@@ -684,7 +684,7 @@ var input = tv({
|
|
|
684
684
|
size: "sm",
|
|
685
685
|
class: {
|
|
686
686
|
label: [
|
|
687
|
-
"group-data-[filled-within=true]
|
|
687
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
|
|
688
688
|
]
|
|
689
689
|
}
|
|
690
690
|
},
|
|
@@ -695,7 +695,7 @@ var input = tv({
|
|
|
695
695
|
size: "md",
|
|
696
696
|
class: {
|
|
697
697
|
label: [
|
|
698
|
-
"group-data-[filled-within=true]
|
|
698
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
|
|
699
699
|
]
|
|
700
700
|
}
|
|
701
701
|
},
|
|
@@ -707,7 +707,7 @@ var input = tv({
|
|
|
707
707
|
class: {
|
|
708
708
|
label: [
|
|
709
709
|
"text-medium",
|
|
710
|
-
"group-data-[filled-within=true]
|
|
710
|
+
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
|
|
711
711
|
]
|
|
712
712
|
}
|
|
713
713
|
},
|
|
@@ -719,7 +719,7 @@ var input = tv({
|
|
|
719
719
|
label: [
|
|
720
720
|
"start-2",
|
|
721
721
|
"text-tiny",
|
|
722
|
-
"group-data-[filled-within=true]
|
|
722
|
+
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
|
|
723
723
|
],
|
|
724
724
|
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
|
|
725
725
|
}
|
|
@@ -733,7 +733,7 @@ var input = tv({
|
|
|
733
733
|
"start-3",
|
|
734
734
|
"end-auto",
|
|
735
735
|
"text-small",
|
|
736
|
-
"group-data-[filled-within=true]
|
|
736
|
+
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
|
|
737
737
|
],
|
|
738
738
|
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
|
|
739
739
|
}
|
|
@@ -747,7 +747,7 @@ var input = tv({
|
|
|
747
747
|
"start-3",
|
|
748
748
|
"end-auto",
|
|
749
749
|
"text-medium",
|
|
750
|
-
"group-data-[filled-within=true]
|
|
750
|
+
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
|
|
751
751
|
],
|
|
752
752
|
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
|
|
753
753
|
}
|
|
@@ -756,21 +756,21 @@ var input = tv({
|
|
|
756
756
|
labelPlacement: "outside-left",
|
|
757
757
|
size: "sm",
|
|
758
758
|
class: {
|
|
759
|
-
label: "group-data-[has-helper=true]
|
|
759
|
+
label: "group-data-[has-helper=true]:pt-2"
|
|
760
760
|
}
|
|
761
761
|
},
|
|
762
762
|
{
|
|
763
763
|
labelPlacement: "outside-left",
|
|
764
764
|
size: "md",
|
|
765
765
|
class: {
|
|
766
|
-
label: "group-data-[has-helper=true]
|
|
766
|
+
label: "group-data-[has-helper=true]:pt-3"
|
|
767
767
|
}
|
|
768
768
|
},
|
|
769
769
|
{
|
|
770
770
|
labelPlacement: "outside-left",
|
|
771
771
|
size: "lg",
|
|
772
772
|
class: {
|
|
773
|
-
label: "group-data-[has-helper=true]
|
|
773
|
+
label: "group-data-[has-helper=true]:pt-4"
|
|
774
774
|
}
|
|
775
775
|
},
|
|
776
776
|
{
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
// src/components/autocomplete.ts
|
|
6
6
|
var autocomplete = tv({
|
|
7
7
|
slots: {
|
|
8
|
-
base: "group
|
|
8
|
+
base: "group inline-flex flex-column w-full",
|
|
9
9
|
listboxWrapper: "scroll-py-6 max-h-64 w-full",
|
|
10
10
|
listbox: "",
|
|
11
11
|
popoverContent: "w-full p-1 overflow-hidden",
|
|
@@ -17,14 +17,14 @@ var autocomplete = tv({
|
|
|
17
17
|
"opacity-0",
|
|
18
18
|
"pointer-events-none",
|
|
19
19
|
"text-default-500",
|
|
20
|
-
"group-data-[invalid=true]
|
|
20
|
+
"group-data-[invalid=true]:text-danger",
|
|
21
21
|
"data-[visible=true]:opacity-100",
|
|
22
22
|
"data-[visible=true]:pointer-events-auto",
|
|
23
23
|
"data-[visible=true]:cursor-pointer",
|
|
24
24
|
"sm:data-[visible=true]:opacity-0",
|
|
25
25
|
"sm:data-[visible=true]:pointer-events-none",
|
|
26
|
-
"sm:group-data-[hover=true]:data-[visible=true]
|
|
27
|
-
"sm:group-data-[hover=true]:data-[visible=true]
|
|
26
|
+
"sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
|
|
27
|
+
"sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto"
|
|
28
28
|
],
|
|
29
29
|
selectorButton: "text-medium"
|
|
30
30
|
},
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
// src/components/date-picker.ts
|
|
6
6
|
var datePicker = tv({
|
|
7
7
|
slots: {
|
|
8
|
-
base: "group
|
|
8
|
+
base: "group w-full",
|
|
9
9
|
selectorButton: "-mr-2 text-inherit",
|
|
10
10
|
selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
|
|
11
11
|
popoverContent: "p-0 w-full",
|
|
@@ -18,9 +18,9 @@ var datePicker = tv({
|
|
|
18
18
|
var dateRangePicker = tv({
|
|
19
19
|
extend: datePicker,
|
|
20
20
|
slots: {
|
|
21
|
-
calendar: "group
|
|
21
|
+
calendar: "group",
|
|
22
22
|
bottomContent: "flex flex-col gap-y-2",
|
|
23
|
-
timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]
|
|
23
|
+
timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
|
|
24
24
|
separator: "-mx-1 text-inherit"
|
|
25
25
|
}
|
|
26
26
|
});
|
|
@@ -66,7 +66,7 @@ var tv = (options, config) => {
|
|
|
66
66
|
// src/components/autocomplete.ts
|
|
67
67
|
var autocomplete = tv({
|
|
68
68
|
slots: {
|
|
69
|
-
base: "group
|
|
69
|
+
base: "group inline-flex flex-column w-full",
|
|
70
70
|
listboxWrapper: "scroll-py-6 max-h-64 w-full",
|
|
71
71
|
listbox: "",
|
|
72
72
|
popoverContent: "w-full p-1 overflow-hidden",
|
|
@@ -78,14 +78,14 @@ var autocomplete = tv({
|
|
|
78
78
|
"opacity-0",
|
|
79
79
|
"pointer-events-none",
|
|
80
80
|
"text-default-500",
|
|
81
|
-
"group-data-[invalid=true]
|
|
81
|
+
"group-data-[invalid=true]:text-danger",
|
|
82
82
|
"data-[visible=true]:opacity-100",
|
|
83
83
|
"data-[visible=true]:pointer-events-auto",
|
|
84
84
|
"data-[visible=true]:cursor-pointer",
|
|
85
85
|
"sm:data-[visible=true]:opacity-0",
|
|
86
86
|
"sm:data-[visible=true]:pointer-events-none",
|
|
87
|
-
"sm:group-data-[hover=true]:data-[visible=true]
|
|
88
|
-
"sm:group-data-[hover=true]:data-[visible=true]
|
|
87
|
+
"sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
|
|
88
|
+
"sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto"
|
|
89
89
|
],
|
|
90
90
|
selectorButton: "text-medium"
|
|
91
91
|
},
|
|
@@ -77,7 +77,7 @@ var groupDataFocusVisibleClasses = [
|
|
|
77
77
|
// src/components/checkbox.ts
|
|
78
78
|
var checkbox = tv({
|
|
79
79
|
slots: {
|
|
80
|
-
base: "group
|
|
80
|
+
base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
|
|
81
81
|
wrapper: [
|
|
82
82
|
"relative",
|
|
83
83
|
"inline-flex",
|
|
@@ -98,12 +98,12 @@ var checkbox = tv({
|
|
|
98
98
|
"after:scale-50",
|
|
99
99
|
"after:opacity-0",
|
|
100
100
|
"after:origin-center",
|
|
101
|
-
"group-data-[selected=true]
|
|
102
|
-
"group-data-[selected=true]
|
|
103
|
-
"group-data-[hover=true]
|
|
101
|
+
"group-data-[selected=true]:after:scale-100",
|
|
102
|
+
"group-data-[selected=true]:after:opacity-100",
|
|
103
|
+
"group-data-[hover=true]:before:bg-default-100",
|
|
104
104
|
...groupDataFocusVisibleClasses
|
|
105
105
|
],
|
|
106
|
-
icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]
|
|
106
|
+
icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
|
|
107
107
|
label: "relative text-foreground select-none"
|
|
108
108
|
},
|
|
109
109
|
variants: {
|
|
@@ -199,8 +199,8 @@ var checkbox = tv({
|
|
|
199
199
|
"before:bg-foreground",
|
|
200
200
|
"before:w-0",
|
|
201
201
|
"before:h-0.5",
|
|
202
|
-
"group-data-[selected=true]
|
|
203
|
-
"group-data-[selected=true]
|
|
202
|
+
"group-data-[selected=true]:opacity-60",
|
|
203
|
+
"group-data-[selected=true]:before:w-full"
|
|
204
204
|
]
|
|
205
205
|
}
|
|
206
206
|
},
|
|
@@ -224,7 +224,7 @@ var checkbox = tv({
|
|
|
224
224
|
false: {
|
|
225
225
|
wrapper: [
|
|
226
226
|
"before:transition-colors",
|
|
227
|
-
"group-data-[pressed=true]
|
|
227
|
+
"group-data-[pressed=true]:scale-95",
|
|
228
228
|
"transition-transform",
|
|
229
229
|
"after:transition-transform-opacity",
|
|
230
230
|
"after:!ease-linear",
|
|
@@ -66,11 +66,11 @@ var tv = (options, config) => {
|
|
|
66
66
|
// src/components/date-input.ts
|
|
67
67
|
var dateInput = tv({
|
|
68
68
|
slots: {
|
|
69
|
-
base: "group
|
|
69
|
+
base: "group flex flex-col",
|
|
70
70
|
label: [
|
|
71
71
|
"block subpixel-antialiased text-small text-default-600",
|
|
72
|
-
"group-data-[required=true]
|
|
73
|
-
"group-data-[invalid=true]
|
|
72
|
+
"group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
|
|
73
|
+
"group-data-[invalid=true]:text-danger"
|
|
74
74
|
],
|
|
75
75
|
inputWrapper: [
|
|
76
76
|
"relative px-3 gap-3 w-full inline-flex flex-row items-center",
|
|
@@ -79,10 +79,10 @@ var dateInput = tv({
|
|
|
79
79
|
input: "flex h-full gap-x-0.5 w-full font-normal",
|
|
80
80
|
innerWrapper: [
|
|
81
81
|
"flex items-center text-default-400 w-full gap-x-2 h-6",
|
|
82
|
-
"group-data-[invalid=true]
|
|
82
|
+
"group-data-[invalid=true]:text-danger"
|
|
83
83
|
],
|
|
84
84
|
segment: [
|
|
85
|
-
"group
|
|
85
|
+
"group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
|
|
86
86
|
"inline-block outline-none focus:shadow-sm rounded-md",
|
|
87
87
|
"text-foreground-500 data-[editable=true]:text-foreground",
|
|
88
88
|
"data-[editable=true]:data-[placeholder=true]:text-foreground-500",
|
|
@@ -90,7 +90,7 @@ var dateInput = tv({
|
|
|
90
90
|
"data-[invalid=true]:focus:bg-danger-400/50 dark:data-[invalid=true]:focus:bg-danger-400/20",
|
|
91
91
|
"data-[invalid=true]:data-[editable=true]:focus:text-danger"
|
|
92
92
|
],
|
|
93
|
-
helperWrapper: "hidden group-data-[has-helper=true]
|
|
93
|
+
helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
|
|
94
94
|
description: "text-tiny text-foreground-400",
|
|
95
95
|
errorMessage: "text-tiny text-danger"
|
|
96
96
|
},
|
|
@@ -101,9 +101,9 @@ var dateInput = tv({
|
|
|
101
101
|
"bg-default-100",
|
|
102
102
|
"hover:bg-default-200",
|
|
103
103
|
"focus-within:hover:bg-default-100",
|
|
104
|
-
"group-data-[invalid=true]
|
|
105
|
-
"group-data-[invalid=true]
|
|
106
|
-
"group-data-[invalid=true]
|
|
104
|
+
"group-data-[invalid=true]:bg-danger-50",
|
|
105
|
+
"group-data-[invalid=true]:hover:bg-danger-100",
|
|
106
|
+
"group-data-[invalid=true]:focus-within:hover:bg-danger-50"
|
|
107
107
|
]
|
|
108
108
|
},
|
|
109
109
|
faded: {
|
|
@@ -112,9 +112,9 @@ var dateInput = tv({
|
|
|
112
112
|
"border-medium",
|
|
113
113
|
"border-default-200",
|
|
114
114
|
"hover:border-default-400",
|
|
115
|
-
"group-data-[invalid=true]
|
|
116
|
-
"group-data-[invalid=true]
|
|
117
|
-
"group-data-[invalid=true]
|
|
115
|
+
"group-data-[invalid=true]:bg-danger-50",
|
|
116
|
+
"group-data-[invalid=true]:hover:bg-danger-100",
|
|
117
|
+
"group-data-[invalid=true]:focus-within:hover:bg-danger-50"
|
|
118
118
|
]
|
|
119
119
|
},
|
|
120
120
|
bordered: {
|
|
@@ -124,9 +124,9 @@ var dateInput = tv({
|
|
|
124
124
|
"hover:border-default-400",
|
|
125
125
|
"focus-within:border-default-foreground",
|
|
126
126
|
"focus-within:hover:border-default-foreground",
|
|
127
|
-
"group-data-[invalid=true]
|
|
128
|
-
"group-data-[invalid=true]
|
|
129
|
-
"group-data-[invalid=true]
|
|
127
|
+
"group-data-[invalid=true]:border-danger",
|
|
128
|
+
"group-data-[invalid=true]:hover:border-danger",
|
|
129
|
+
"group-data-[invalid=true]:focus-within:hover:border-danger"
|
|
130
130
|
]
|
|
131
131
|
},
|
|
132
132
|
underlined: {
|
|
@@ -151,7 +151,7 @@ var dateInput = tv({
|
|
|
151
151
|
"after:-bottom-[2px]",
|
|
152
152
|
"after:h-[2px]",
|
|
153
153
|
"focus-within:after:w-full",
|
|
154
|
-
"group-data-[invalid=true]
|
|
154
|
+
"group-data-[invalid=true]:after:bg-danger"
|
|
155
155
|
]
|
|
156
156
|
}
|
|
157
157
|
},
|
|
@@ -67,7 +67,7 @@ var tv = (options, config) => {
|
|
|
67
67
|
// src/components/date-picker.ts
|
|
68
68
|
var datePicker = tv({
|
|
69
69
|
slots: {
|
|
70
|
-
base: "group
|
|
70
|
+
base: "group w-full",
|
|
71
71
|
selectorButton: "-mr-2 text-inherit",
|
|
72
72
|
selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
|
|
73
73
|
popoverContent: "p-0 w-full",
|
|
@@ -80,9 +80,9 @@ var datePicker = tv({
|
|
|
80
80
|
var dateRangePicker = tv({
|
|
81
81
|
extend: datePicker,
|
|
82
82
|
slots: {
|
|
83
|
-
calendar: "group
|
|
83
|
+
calendar: "group",
|
|
84
84
|
bottomContent: "flex flex-col gap-y-2",
|
|
85
|
-
timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]
|
|
85
|
+
timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
|
|
86
86
|
separator: "-mx-1 text-inherit"
|
|
87
87
|
}
|
|
88
88
|
});
|