@creativecodeco/ui 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/hooks/use-safe-button-props.hook.d.ts +1 -1
- package/lib/theme/css/accordion.css +9 -0
- package/lib/theme/css/main.css +1 -0
- package/lib/theme/css/text-box.css +57 -31
- package/lib/theme/main.css +532 -15
- package/lib/types/ui/components/accordion.types.d.ts +12 -0
- package/lib/types/ui/components/accordion.types.js +1 -0
- package/lib/types/ui/components/index.d.ts +1 -0
- package/lib/types/ui/forms/text-box.types.d.ts +2 -1
- package/lib/ui/components/accordion/accordion.component.d.ts +3 -0
- package/lib/ui/components/accordion/accordion.component.js +12 -0
- package/lib/ui/components/accordion/index.d.ts +2 -0
- package/lib/ui/components/accordion/index.js +2 -0
- package/lib/ui/components/index.d.ts +1 -0
- package/lib/ui/components/index.js +1 -0
- package/lib/ui/forms/text-box/text-box.component.js +10 -7
- package/package.json +31 -31
|
@@ -62,7 +62,7 @@ export default function useSafeButtonProps({ onClick, onSubmit, loading, ...prop
|
|
|
62
62
|
itemRef?: string | undefined;
|
|
63
63
|
results?: number | undefined;
|
|
64
64
|
security?: string | undefined;
|
|
65
|
-
unselectable?: "
|
|
65
|
+
unselectable?: "off" | "on" | undefined;
|
|
66
66
|
inputMode?: "search" | "email" | "tel" | "text" | "url" | "none" | "numeric" | "decimal" | undefined;
|
|
67
67
|
is?: string | undefined;
|
|
68
68
|
"aria-activedescendant"?: string | undefined;
|
package/lib/theme/css/main.css
CHANGED
|
@@ -1,48 +1,50 @@
|
|
|
1
|
-
.text-box-size
|
|
2
|
-
|
|
1
|
+
.text-box-size {
|
|
2
|
+
&-xs {
|
|
3
|
+
@apply input-xs;
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
&.text-box-with-left-icon {
|
|
6
|
+
@apply pl-8;
|
|
7
|
+
}
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
&.text-box-with-right-icon {
|
|
10
|
+
@apply pr-8;
|
|
11
|
+
}
|
|
10
12
|
}
|
|
11
|
-
}
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
&-sm {
|
|
15
|
+
@apply input-sm;
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
&.text-box-with-left-icon {
|
|
18
|
+
@apply pl-8;
|
|
19
|
+
}
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
&.text-box-with-right-icon {
|
|
22
|
+
@apply pr-8;
|
|
23
|
+
}
|
|
22
24
|
}
|
|
23
|
-
}
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
&-md {
|
|
27
|
+
@apply input-md;
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
&.text-box-with-left-icon {
|
|
30
|
+
@apply pl-9;
|
|
31
|
+
}
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
&.text-box-with-right-icon {
|
|
34
|
+
@apply pr-9;
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
|
-
}
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
&-lg {
|
|
39
|
+
@apply input-lg;
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
&.text-box-with-left-icon {
|
|
42
|
+
@apply pl-9;
|
|
43
|
+
}
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
&.text-box-with-right-icon {
|
|
46
|
+
@apply pr-9;
|
|
47
|
+
}
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
|
|
@@ -85,3 +87,27 @@
|
|
|
85
87
|
@apply top-6 right-3;
|
|
86
88
|
}
|
|
87
89
|
}
|
|
90
|
+
|
|
91
|
+
.text-box-color {
|
|
92
|
+
&-primary {
|
|
93
|
+
@apply input-primary;
|
|
94
|
+
}
|
|
95
|
+
&-secondary {
|
|
96
|
+
@apply input-secondary;
|
|
97
|
+
}
|
|
98
|
+
&-accent {
|
|
99
|
+
@apply input-accent;
|
|
100
|
+
}
|
|
101
|
+
&-success {
|
|
102
|
+
@apply input-success;
|
|
103
|
+
}
|
|
104
|
+
&-warning {
|
|
105
|
+
@apply input-warning;
|
|
106
|
+
}
|
|
107
|
+
&-info {
|
|
108
|
+
@apply input-info;
|
|
109
|
+
}
|
|
110
|
+
&-error {
|
|
111
|
+
@apply input-error;
|
|
112
|
+
}
|
|
113
|
+
}
|
package/lib/theme/main.css
CHANGED
|
@@ -622,6 +622,35 @@ html {
|
|
|
622
622
|
max-width: 1536px;
|
|
623
623
|
}
|
|
624
624
|
}
|
|
625
|
+
.alert {
|
|
626
|
+
display: grid;
|
|
627
|
+
width: 100%;
|
|
628
|
+
grid-auto-flow: row;
|
|
629
|
+
align-content: flex-start;
|
|
630
|
+
align-items: center;
|
|
631
|
+
justify-items: center;
|
|
632
|
+
gap: 1rem;
|
|
633
|
+
text-align: center;
|
|
634
|
+
border-radius: var(--rounded-box, 1rem);
|
|
635
|
+
border-width: 1px;
|
|
636
|
+
--tw-border-opacity: 1;
|
|
637
|
+
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
|
638
|
+
padding: 1rem;
|
|
639
|
+
--tw-text-opacity: 1;
|
|
640
|
+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
|
641
|
+
--alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
|
|
642
|
+
--alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
|
|
643
|
+
background-color: var(--alert-bg);
|
|
644
|
+
}
|
|
645
|
+
@media (min-width: 640px) {
|
|
646
|
+
|
|
647
|
+
.alert {
|
|
648
|
+
grid-auto-flow: column;
|
|
649
|
+
grid-template-columns: auto minmax(auto,1fr);
|
|
650
|
+
justify-items: start;
|
|
651
|
+
text-align: start;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
625
654
|
.avatar {
|
|
626
655
|
position: relative;
|
|
627
656
|
display: inline-flex;
|
|
@@ -649,8 +678,8 @@ html {
|
|
|
649
678
|
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
|
650
679
|
}
|
|
651
680
|
|
|
652
|
-
.menu li > *:not(ul
|
|
653
|
-
.menu li > *:not(ul
|
|
681
|
+
.menu li > *:not(ul, .menu-title, details, .btn):active,
|
|
682
|
+
.menu li > *:not(ul, .menu-title, details, .btn).active,
|
|
654
683
|
.menu li > details > summary:active {
|
|
655
684
|
--tw-bg-opacity: 1;
|
|
656
685
|
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
|
@@ -684,6 +713,62 @@ html {
|
|
|
684
713
|
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
|
|
685
714
|
--tw-border-opacity: 0.2;
|
|
686
715
|
}
|
|
716
|
+
.collapse:not(td):not(tr):not(colgroup) {
|
|
717
|
+
visibility: visible;
|
|
718
|
+
}
|
|
719
|
+
.collapse {
|
|
720
|
+
position: relative;
|
|
721
|
+
display: grid;
|
|
722
|
+
overflow: hidden;
|
|
723
|
+
grid-template-rows: auto 0fr;
|
|
724
|
+
transition: grid-template-rows 0.2s;
|
|
725
|
+
width: 100%;
|
|
726
|
+
border-radius: var(--rounded-box, 1rem);
|
|
727
|
+
}
|
|
728
|
+
.collapse-title,
|
|
729
|
+
.collapse > input[type="checkbox"],
|
|
730
|
+
.collapse > input[type="radio"],
|
|
731
|
+
.collapse-content {
|
|
732
|
+
grid-column-start: 1;
|
|
733
|
+
grid-row-start: 1;
|
|
734
|
+
}
|
|
735
|
+
.collapse > input[type="checkbox"],
|
|
736
|
+
.collapse > input[type="radio"] {
|
|
737
|
+
-webkit-appearance: none;
|
|
738
|
+
-moz-appearance: none;
|
|
739
|
+
appearance: none;
|
|
740
|
+
opacity: 0;
|
|
741
|
+
}
|
|
742
|
+
.collapse-content {
|
|
743
|
+
visibility: hidden;
|
|
744
|
+
grid-column-start: 1;
|
|
745
|
+
grid-row-start: 2;
|
|
746
|
+
min-height: 0px;
|
|
747
|
+
transition: visibility 0.2s;
|
|
748
|
+
transition: padding 0.2s ease-out,
|
|
749
|
+
background-color 0.2s ease-out;
|
|
750
|
+
padding-left: 1rem;
|
|
751
|
+
padding-right: 1rem;
|
|
752
|
+
cursor: unset;
|
|
753
|
+
}
|
|
754
|
+
.collapse[open],
|
|
755
|
+
.collapse-open,
|
|
756
|
+
.collapse:focus:not(.collapse-close) {
|
|
757
|
+
grid-template-rows: auto 1fr;
|
|
758
|
+
}
|
|
759
|
+
.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
|
|
760
|
+
.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
|
|
761
|
+
grid-template-rows: auto 1fr;
|
|
762
|
+
}
|
|
763
|
+
.collapse[open] > .collapse-content,
|
|
764
|
+
.collapse-open > .collapse-content,
|
|
765
|
+
.collapse:focus:not(.collapse-close) > .collapse-content,
|
|
766
|
+
.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
|
|
767
|
+
.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
|
|
768
|
+
visibility: visible;
|
|
769
|
+
min-height: -moz-fit-content;
|
|
770
|
+
min-height: fit-content;
|
|
771
|
+
}
|
|
687
772
|
.dropdown {
|
|
688
773
|
position: relative;
|
|
689
774
|
display: inline-block;
|
|
@@ -780,7 +865,7 @@ html {
|
|
|
780
865
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
781
866
|
}
|
|
782
867
|
|
|
783
|
-
:where(.menu li:not(.menu-title
|
|
868
|
+
:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
|
|
784
869
|
cursor: pointer;
|
|
785
870
|
outline: 2px solid transparent;
|
|
786
871
|
outline-offset: 2px;
|
|
@@ -788,7 +873,7 @@ html {
|
|
|
788
873
|
|
|
789
874
|
@supports (color: oklch(0 0 0)) {
|
|
790
875
|
|
|
791
|
-
:where(.menu li:not(.menu-title
|
|
876
|
+
:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
|
|
792
877
|
background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
|
|
793
878
|
}
|
|
794
879
|
}
|
|
@@ -829,17 +914,41 @@ html {
|
|
|
829
914
|
--tw-bg-opacity: 1;
|
|
830
915
|
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
|
|
831
916
|
}
|
|
917
|
+
.input[type="number"]::-webkit-inner-spin-button,
|
|
918
|
+
.input-md[type="number"]::-webkit-inner-spin-button {
|
|
919
|
+
margin-top: -1rem;
|
|
920
|
+
margin-bottom: -1rem;
|
|
921
|
+
margin-inline-end: -1rem;
|
|
922
|
+
}
|
|
923
|
+
.\!join {
|
|
924
|
+
display: inline-flex !important;
|
|
925
|
+
align-items: stretch !important;
|
|
926
|
+
border-radius: var(--rounded-btn, 0.5rem) !important;
|
|
927
|
+
}
|
|
832
928
|
.join {
|
|
833
929
|
display: inline-flex;
|
|
834
930
|
align-items: stretch;
|
|
835
931
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
836
932
|
}
|
|
933
|
+
.\!join :where(.join-item) {
|
|
934
|
+
border-start-end-radius: 0 !important;
|
|
935
|
+
border-end-end-radius: 0 !important;
|
|
936
|
+
border-end-start-radius: 0 !important;
|
|
937
|
+
border-start-start-radius: 0 !important;
|
|
938
|
+
}
|
|
837
939
|
.join :where(.join-item) {
|
|
838
940
|
border-start-end-radius: 0;
|
|
839
941
|
border-end-end-radius: 0;
|
|
840
942
|
border-end-start-radius: 0;
|
|
841
943
|
border-start-start-radius: 0;
|
|
842
944
|
}
|
|
945
|
+
.\!join .join-item:not(:first-child):not(:last-child),
|
|
946
|
+
.\!join *:not(:first-child):not(:last-child) .join-item {
|
|
947
|
+
border-start-end-radius: 0 !important;
|
|
948
|
+
border-end-end-radius: 0 !important;
|
|
949
|
+
border-end-start-radius: 0 !important;
|
|
950
|
+
border-start-start-radius: 0 !important;
|
|
951
|
+
}
|
|
843
952
|
.join .join-item:not(:first-child):not(:last-child),
|
|
844
953
|
.join *:not(:first-child):not(:last-child) .join-item {
|
|
845
954
|
border-start-end-radius: 0;
|
|
@@ -847,39 +956,104 @@ html {
|
|
|
847
956
|
border-end-start-radius: 0;
|
|
848
957
|
border-start-start-radius: 0;
|
|
849
958
|
}
|
|
959
|
+
.\!join .join-item:not(:first-child):not(:last-child),
|
|
960
|
+
.\!join *:not(:first-child):not(:last-child) .join-item {
|
|
961
|
+
border-start-end-radius: 0 !important;
|
|
962
|
+
border-end-end-radius: 0 !important;
|
|
963
|
+
border-end-start-radius: 0 !important;
|
|
964
|
+
border-start-start-radius: 0 !important;
|
|
965
|
+
}
|
|
966
|
+
.\!join .join-item:first-child:not(:last-child),
|
|
967
|
+
.\!join *:first-child:not(:last-child) .join-item {
|
|
968
|
+
border-start-end-radius: 0 !important;
|
|
969
|
+
border-end-end-radius: 0 !important;
|
|
970
|
+
}
|
|
850
971
|
.join .join-item:first-child:not(:last-child),
|
|
851
972
|
.join *:first-child:not(:last-child) .join-item {
|
|
852
973
|
border-start-end-radius: 0;
|
|
853
974
|
border-end-end-radius: 0;
|
|
854
975
|
}
|
|
976
|
+
.\!join .join-item:first-child:not(:last-child),
|
|
977
|
+
.\!join *:first-child:not(:last-child) .join-item {
|
|
978
|
+
border-start-end-radius: 0 !important;
|
|
979
|
+
border-end-end-radius: 0 !important;
|
|
980
|
+
}
|
|
981
|
+
.\!join .dropdown .join-item:first-child:not(:last-child),
|
|
982
|
+
.\!join *:first-child:not(:last-child) .dropdown .join-item {
|
|
983
|
+
border-start-end-radius: inherit !important;
|
|
984
|
+
border-end-end-radius: inherit !important;
|
|
985
|
+
}
|
|
855
986
|
.join .dropdown .join-item:first-child:not(:last-child),
|
|
856
987
|
.join *:first-child:not(:last-child) .dropdown .join-item {
|
|
857
988
|
border-start-end-radius: inherit;
|
|
858
989
|
border-end-end-radius: inherit;
|
|
859
990
|
}
|
|
991
|
+
.\!join .dropdown .join-item:first-child:not(:last-child),
|
|
992
|
+
.\!join *:first-child:not(:last-child) .dropdown .join-item {
|
|
993
|
+
border-start-end-radius: inherit !important;
|
|
994
|
+
border-end-end-radius: inherit !important;
|
|
995
|
+
}
|
|
996
|
+
.\!join :where(.join-item:first-child:not(:last-child)),
|
|
997
|
+
.\!join :where(*:first-child:not(:last-child) .join-item) {
|
|
998
|
+
border-end-start-radius: inherit !important;
|
|
999
|
+
border-start-start-radius: inherit !important;
|
|
1000
|
+
}
|
|
860
1001
|
.join :where(.join-item:first-child:not(:last-child)),
|
|
861
1002
|
.join :where(*:first-child:not(:last-child) .join-item) {
|
|
862
1003
|
border-end-start-radius: inherit;
|
|
863
1004
|
border-start-start-radius: inherit;
|
|
864
1005
|
}
|
|
1006
|
+
.\!join :where(.join-item:first-child:not(:last-child)),
|
|
1007
|
+
.\!join :where(*:first-child:not(:last-child) .join-item) {
|
|
1008
|
+
border-end-start-radius: inherit !important;
|
|
1009
|
+
border-start-start-radius: inherit !important;
|
|
1010
|
+
}
|
|
1011
|
+
.\!join .join-item:last-child:not(:first-child),
|
|
1012
|
+
.\!join *:last-child:not(:first-child) .join-item {
|
|
1013
|
+
border-end-start-radius: 0 !important;
|
|
1014
|
+
border-start-start-radius: 0 !important;
|
|
1015
|
+
}
|
|
865
1016
|
.join .join-item:last-child:not(:first-child),
|
|
866
1017
|
.join *:last-child:not(:first-child) .join-item {
|
|
867
1018
|
border-end-start-radius: 0;
|
|
868
1019
|
border-start-start-radius: 0;
|
|
869
1020
|
}
|
|
1021
|
+
.\!join .join-item:last-child:not(:first-child),
|
|
1022
|
+
.\!join *:last-child:not(:first-child) .join-item {
|
|
1023
|
+
border-end-start-radius: 0 !important;
|
|
1024
|
+
border-start-start-radius: 0 !important;
|
|
1025
|
+
}
|
|
1026
|
+
.\!join :where(.join-item:last-child:not(:first-child)),
|
|
1027
|
+
.\!join :where(*:last-child:not(:first-child) .join-item) {
|
|
1028
|
+
border-start-end-radius: inherit !important;
|
|
1029
|
+
border-end-end-radius: inherit !important;
|
|
1030
|
+
}
|
|
870
1031
|
.join :where(.join-item:last-child:not(:first-child)),
|
|
871
1032
|
.join :where(*:last-child:not(:first-child) .join-item) {
|
|
872
1033
|
border-start-end-radius: inherit;
|
|
873
1034
|
border-end-end-radius: inherit;
|
|
874
1035
|
}
|
|
1036
|
+
.\!join :where(.join-item:last-child:not(:first-child)),
|
|
1037
|
+
.\!join :where(*:last-child:not(:first-child) .join-item) {
|
|
1038
|
+
border-start-end-radius: inherit !important;
|
|
1039
|
+
border-end-end-radius: inherit !important;
|
|
1040
|
+
}
|
|
875
1041
|
@supports not selector(:has(*)) {
|
|
876
1042
|
|
|
1043
|
+
:where(.\!join *) {
|
|
1044
|
+
border-radius: inherit !important;
|
|
1045
|
+
}
|
|
1046
|
+
|
|
877
1047
|
:where(.join *) {
|
|
878
1048
|
border-radius: inherit;
|
|
879
1049
|
}
|
|
880
1050
|
}
|
|
881
1051
|
@supports selector(:has(*)) {
|
|
882
1052
|
|
|
1053
|
+
:where(.\!join *:has(.join-item)) {
|
|
1054
|
+
border-radius: inherit !important;
|
|
1055
|
+
}
|
|
1056
|
+
|
|
883
1057
|
:where(.join *:has(.join-item)) {
|
|
884
1058
|
border-radius: inherit;
|
|
885
1059
|
}
|
|
@@ -898,8 +1072,7 @@ html {
|
|
|
898
1072
|
margin-inline-start: 1rem;
|
|
899
1073
|
padding-inline-start: 0.5rem;
|
|
900
1074
|
}
|
|
901
|
-
.menu :where(li:not(.menu-title) > *:not(ul):not(details
|
|
902
|
-
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
1075
|
+
.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
903
1076
|
display: grid;
|
|
904
1077
|
grid-auto-flow: column;
|
|
905
1078
|
align-content: flex-start;
|
|
@@ -1112,6 +1285,115 @@ html {
|
|
|
1112
1285
|
background-position-y: 0;
|
|
1113
1286
|
}
|
|
1114
1287
|
}
|
|
1288
|
+
details.collapse {
|
|
1289
|
+
width: 100%;
|
|
1290
|
+
}
|
|
1291
|
+
details.collapse summary {
|
|
1292
|
+
position: relative;
|
|
1293
|
+
display: block;
|
|
1294
|
+
outline: 2px solid transparent;
|
|
1295
|
+
outline-offset: 2px;
|
|
1296
|
+
}
|
|
1297
|
+
details.collapse summary::-webkit-details-marker {
|
|
1298
|
+
display: none;
|
|
1299
|
+
}
|
|
1300
|
+
.collapse:focus-visible {
|
|
1301
|
+
outline-style: solid;
|
|
1302
|
+
outline-width: 2px;
|
|
1303
|
+
outline-offset: 2px;
|
|
1304
|
+
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
|
|
1305
|
+
}
|
|
1306
|
+
.collapse:has(.collapse-title:focus-visible),
|
|
1307
|
+
.collapse:has(> input[type="checkbox"]:focus-visible),
|
|
1308
|
+
.collapse:has(> input[type="radio"]:focus-visible) {
|
|
1309
|
+
outline-style: solid;
|
|
1310
|
+
outline-width: 2px;
|
|
1311
|
+
outline-offset: 2px;
|
|
1312
|
+
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
|
|
1313
|
+
}
|
|
1314
|
+
.collapse-arrow > .collapse-title:after {
|
|
1315
|
+
position: absolute;
|
|
1316
|
+
display: block;
|
|
1317
|
+
height: 0.5rem;
|
|
1318
|
+
width: 0.5rem;
|
|
1319
|
+
--tw-translate-y: -100%;
|
|
1320
|
+
--tw-rotate: 45deg;
|
|
1321
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1322
|
+
transition-property: all;
|
|
1323
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1324
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
1325
|
+
transition-duration: 150ms;
|
|
1326
|
+
transition-duration: 0.2s;
|
|
1327
|
+
top: 1.9rem;
|
|
1328
|
+
inset-inline-end: 1.4rem;
|
|
1329
|
+
content: "";
|
|
1330
|
+
transform-origin: 75% 75%;
|
|
1331
|
+
box-shadow: 2px 2px;
|
|
1332
|
+
pointer-events: none;
|
|
1333
|
+
}
|
|
1334
|
+
.collapse-plus > .collapse-title:after {
|
|
1335
|
+
position: absolute;
|
|
1336
|
+
display: block;
|
|
1337
|
+
height: 0.5rem;
|
|
1338
|
+
width: 0.5rem;
|
|
1339
|
+
transition-property: all;
|
|
1340
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1341
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
1342
|
+
transition-duration: 300ms;
|
|
1343
|
+
top: 0.9rem;
|
|
1344
|
+
inset-inline-end: 1.4rem;
|
|
1345
|
+
content: "+";
|
|
1346
|
+
pointer-events: none;
|
|
1347
|
+
}
|
|
1348
|
+
.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
|
|
1349
|
+
.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
|
|
1350
|
+
.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title {
|
|
1351
|
+
cursor: pointer;
|
|
1352
|
+
}
|
|
1353
|
+
.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title {
|
|
1354
|
+
cursor: unset;
|
|
1355
|
+
}
|
|
1356
|
+
.collapse-title {
|
|
1357
|
+
position: relative;
|
|
1358
|
+
}
|
|
1359
|
+
:where(.collapse > input[type="checkbox"]),
|
|
1360
|
+
:where(.collapse > input[type="radio"]) {
|
|
1361
|
+
z-index: 1;
|
|
1362
|
+
}
|
|
1363
|
+
.collapse-title,
|
|
1364
|
+
:where(.collapse > input[type="checkbox"]),
|
|
1365
|
+
:where(.collapse > input[type="radio"]) {
|
|
1366
|
+
width: 100%;
|
|
1367
|
+
padding: 1rem;
|
|
1368
|
+
padding-inline-end: 3rem;
|
|
1369
|
+
min-height: 3.75rem;
|
|
1370
|
+
transition: background-color 0.2s ease-out;
|
|
1371
|
+
}
|
|
1372
|
+
.collapse[open] > :where(.collapse-content),
|
|
1373
|
+
.collapse-open > :where(.collapse-content),
|
|
1374
|
+
.collapse:focus:not(.collapse-close) > :where(.collapse-content),
|
|
1375
|
+
.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
|
|
1376
|
+
.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
|
|
1377
|
+
padding-bottom: 1rem;
|
|
1378
|
+
transition: padding 0.2s ease-out,
|
|
1379
|
+
background-color 0.2s ease-out;
|
|
1380
|
+
}
|
|
1381
|
+
.collapse[open].collapse-arrow > .collapse-title:after,
|
|
1382
|
+
.collapse-open.collapse-arrow > .collapse-title:after,
|
|
1383
|
+
.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
|
|
1384
|
+
.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
|
|
1385
|
+
.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
|
|
1386
|
+
--tw-translate-y: -50%;
|
|
1387
|
+
--tw-rotate: 225deg;
|
|
1388
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1389
|
+
}
|
|
1390
|
+
.collapse[open].collapse-plus > .collapse-title:after,
|
|
1391
|
+
.collapse-open.collapse-plus > .collapse-title:after,
|
|
1392
|
+
.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
|
|
1393
|
+
.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
|
|
1394
|
+
.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
|
|
1395
|
+
content: "−";
|
|
1396
|
+
}
|
|
1115
1397
|
.dropdown.dropdown-open .dropdown-content,
|
|
1116
1398
|
.dropdown:focus .dropdown-content,
|
|
1117
1399
|
.dropdown:focus-within .dropdown-content {
|
|
@@ -1125,6 +1407,11 @@ html {
|
|
|
1125
1407
|
--tw-text-opacity: 1;
|
|
1126
1408
|
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
|
1127
1409
|
}
|
|
1410
|
+
.input input {
|
|
1411
|
+
--tw-bg-opacity: 1;
|
|
1412
|
+
background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
|
|
1413
|
+
background-color: transparent;
|
|
1414
|
+
}
|
|
1128
1415
|
.input input:focus {
|
|
1129
1416
|
outline: 2px solid transparent;
|
|
1130
1417
|
outline-offset: 2px;
|
|
@@ -1177,11 +1464,19 @@ html {
|
|
|
1177
1464
|
.input::-webkit-date-and-time-value {
|
|
1178
1465
|
text-align: inherit;
|
|
1179
1466
|
}
|
|
1467
|
+
.\!join > :where(*:not(:first-child)) {
|
|
1468
|
+
margin-top: 0px !important;
|
|
1469
|
+
margin-bottom: 0px !important;
|
|
1470
|
+
margin-inline-start: -1px !important;
|
|
1471
|
+
}
|
|
1180
1472
|
.join > :where(*:not(:first-child)) {
|
|
1181
1473
|
margin-top: 0px;
|
|
1182
1474
|
margin-bottom: 0px;
|
|
1183
1475
|
margin-inline-start: -1px;
|
|
1184
1476
|
}
|
|
1477
|
+
.join-item:focus {
|
|
1478
|
+
isolation: isolate;
|
|
1479
|
+
}
|
|
1185
1480
|
.\!loading {
|
|
1186
1481
|
pointer-events: none !important;
|
|
1187
1482
|
display: inline-block !important;
|
|
@@ -1230,7 +1525,7 @@ html {
|
|
|
1230
1525
|
opacity: 0.1;
|
|
1231
1526
|
content: "";
|
|
1232
1527
|
}
|
|
1233
|
-
.menu :where(li:not(.menu-title) > *:not(ul
|
|
1528
|
+
.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
|
|
1234
1529
|
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
|
|
1235
1530
|
border-radius: var(--rounded-btn, 0.5rem);
|
|
1236
1531
|
padding-left: 1rem;
|
|
@@ -1246,12 +1541,7 @@ html {
|
|
|
1246
1541
|
transition-duration: 200ms;
|
|
1247
1542
|
text-wrap: balance;
|
|
1248
1543
|
}
|
|
1249
|
-
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus
|
|
1250
|
-
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
|
|
1251
|
-
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
|
|
1252
|
-
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
|
|
1253
|
-
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
|
|
1254
|
-
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
|
|
1544
|
+
:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
|
|
1255
1545
|
cursor: pointer;
|
|
1256
1546
|
background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
|
|
1257
1547
|
--tw-text-opacity: 1;
|
|
@@ -1259,8 +1549,8 @@ html {
|
|
|
1259
1549
|
outline: 2px solid transparent;
|
|
1260
1550
|
outline-offset: 2px;
|
|
1261
1551
|
}
|
|
1262
|
-
.menu li > *:not(ul
|
|
1263
|
-
.menu li > *:not(ul
|
|
1552
|
+
.menu li > *:not(ul, .menu-title, details, .btn):active,
|
|
1553
|
+
.menu li > *:not(ul, .menu-title, details, .btn).active,
|
|
1264
1554
|
.menu li > details > summary:active {
|
|
1265
1555
|
--tw-bg-opacity: 1;
|
|
1266
1556
|
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
|
@@ -1432,6 +1722,7 @@ html {
|
|
|
1432
1722
|
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
|
1433
1723
|
--tw-bg-opacity: 1;
|
|
1434
1724
|
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
|
|
1725
|
+
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
|
1435
1726
|
--tw-text-opacity: 0.2;
|
|
1436
1727
|
}
|
|
1437
1728
|
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
|
|
@@ -1505,9 +1796,19 @@ html {
|
|
|
1505
1796
|
opacity: 1;
|
|
1506
1797
|
}
|
|
1507
1798
|
}
|
|
1799
|
+
.\!join.join-vertical {
|
|
1800
|
+
flex-direction: column !important;
|
|
1801
|
+
}
|
|
1508
1802
|
.join.join-vertical {
|
|
1509
1803
|
flex-direction: column;
|
|
1510
1804
|
}
|
|
1805
|
+
.\!join.join-vertical .join-item:first-child:not(:last-child),
|
|
1806
|
+
.\!join.join-vertical *:first-child:not(:last-child) .join-item {
|
|
1807
|
+
border-end-start-radius: 0 !important;
|
|
1808
|
+
border-end-end-radius: 0 !important;
|
|
1809
|
+
border-start-start-radius: inherit !important;
|
|
1810
|
+
border-start-end-radius: inherit !important;
|
|
1811
|
+
}
|
|
1511
1812
|
.join.join-vertical .join-item:first-child:not(:last-child),
|
|
1512
1813
|
.join.join-vertical *:first-child:not(:last-child) .join-item {
|
|
1513
1814
|
border-end-start-radius: 0;
|
|
@@ -1515,6 +1816,20 @@ html {
|
|
|
1515
1816
|
border-start-start-radius: inherit;
|
|
1516
1817
|
border-start-end-radius: inherit;
|
|
1517
1818
|
}
|
|
1819
|
+
.\!join.join-vertical .join-item:first-child:not(:last-child),
|
|
1820
|
+
.\!join.join-vertical *:first-child:not(:last-child) .join-item {
|
|
1821
|
+
border-end-start-radius: 0 !important;
|
|
1822
|
+
border-end-end-radius: 0 !important;
|
|
1823
|
+
border-start-start-radius: inherit !important;
|
|
1824
|
+
border-start-end-radius: inherit !important;
|
|
1825
|
+
}
|
|
1826
|
+
.\!join.join-vertical .join-item:last-child:not(:first-child),
|
|
1827
|
+
.\!join.join-vertical *:last-child:not(:first-child) .join-item {
|
|
1828
|
+
border-start-start-radius: 0 !important;
|
|
1829
|
+
border-start-end-radius: 0 !important;
|
|
1830
|
+
border-end-start-radius: inherit !important;
|
|
1831
|
+
border-end-end-radius: inherit !important;
|
|
1832
|
+
}
|
|
1518
1833
|
.join.join-vertical .join-item:last-child:not(:first-child),
|
|
1519
1834
|
.join.join-vertical *:last-child:not(:first-child) .join-item {
|
|
1520
1835
|
border-start-start-radius: 0;
|
|
@@ -1522,9 +1837,26 @@ html {
|
|
|
1522
1837
|
border-end-start-radius: inherit;
|
|
1523
1838
|
border-end-end-radius: inherit;
|
|
1524
1839
|
}
|
|
1840
|
+
.\!join.join-vertical .join-item:last-child:not(:first-child),
|
|
1841
|
+
.\!join.join-vertical *:last-child:not(:first-child) .join-item {
|
|
1842
|
+
border-start-start-radius: 0 !important;
|
|
1843
|
+
border-start-end-radius: 0 !important;
|
|
1844
|
+
border-end-start-radius: inherit !important;
|
|
1845
|
+
border-end-end-radius: inherit !important;
|
|
1846
|
+
}
|
|
1847
|
+
.\!join.join-horizontal {
|
|
1848
|
+
flex-direction: row !important;
|
|
1849
|
+
}
|
|
1525
1850
|
.join.join-horizontal {
|
|
1526
1851
|
flex-direction: row;
|
|
1527
1852
|
}
|
|
1853
|
+
.\!join.join-horizontal .join-item:first-child:not(:last-child),
|
|
1854
|
+
.\!join.join-horizontal *:first-child:not(:last-child) .join-item {
|
|
1855
|
+
border-end-end-radius: 0 !important;
|
|
1856
|
+
border-start-end-radius: 0 !important;
|
|
1857
|
+
border-end-start-radius: inherit !important;
|
|
1858
|
+
border-start-start-radius: inherit !important;
|
|
1859
|
+
}
|
|
1528
1860
|
.join.join-horizontal .join-item:first-child:not(:last-child),
|
|
1529
1861
|
.join.join-horizontal *:first-child:not(:last-child) .join-item {
|
|
1530
1862
|
border-end-end-radius: 0;
|
|
@@ -1532,6 +1864,20 @@ html {
|
|
|
1532
1864
|
border-end-start-radius: inherit;
|
|
1533
1865
|
border-start-start-radius: inherit;
|
|
1534
1866
|
}
|
|
1867
|
+
.\!join.join-horizontal .join-item:first-child:not(:last-child),
|
|
1868
|
+
.\!join.join-horizontal *:first-child:not(:last-child) .join-item {
|
|
1869
|
+
border-end-end-radius: 0 !important;
|
|
1870
|
+
border-start-end-radius: 0 !important;
|
|
1871
|
+
border-end-start-radius: inherit !important;
|
|
1872
|
+
border-start-start-radius: inherit !important;
|
|
1873
|
+
}
|
|
1874
|
+
.\!join.join-horizontal .join-item:last-child:not(:first-child),
|
|
1875
|
+
.\!join.join-horizontal *:last-child:not(:first-child) .join-item {
|
|
1876
|
+
border-end-start-radius: 0 !important;
|
|
1877
|
+
border-start-start-radius: 0 !important;
|
|
1878
|
+
border-end-end-radius: inherit !important;
|
|
1879
|
+
border-start-end-radius: inherit !important;
|
|
1880
|
+
}
|
|
1535
1881
|
.join.join-horizontal .join-item:last-child:not(:first-child),
|
|
1536
1882
|
.join.join-horizontal *:last-child:not(:first-child) .join-item {
|
|
1537
1883
|
border-end-start-radius: 0;
|
|
@@ -1539,6 +1885,13 @@ html {
|
|
|
1539
1885
|
border-end-end-radius: inherit;
|
|
1540
1886
|
border-start-end-radius: inherit;
|
|
1541
1887
|
}
|
|
1888
|
+
.\!join.join-horizontal .join-item:last-child:not(:first-child),
|
|
1889
|
+
.\!join.join-horizontal *:last-child:not(:first-child) .join-item {
|
|
1890
|
+
border-end-start-radius: 0 !important;
|
|
1891
|
+
border-start-start-radius: 0 !important;
|
|
1892
|
+
border-end-end-radius: inherit !important;
|
|
1893
|
+
border-start-end-radius: inherit !important;
|
|
1894
|
+
}
|
|
1542
1895
|
.avatar.online:before {
|
|
1543
1896
|
content: "";
|
|
1544
1897
|
position: absolute;
|
|
@@ -1571,16 +1924,29 @@ html {
|
|
|
1571
1924
|
top: 7%;
|
|
1572
1925
|
right: 7%;
|
|
1573
1926
|
}
|
|
1927
|
+
.\!join.join-vertical > :where(*:not(:first-child)) {
|
|
1928
|
+
margin-left: 0px !important;
|
|
1929
|
+
margin-right: 0px !important;
|
|
1930
|
+
margin-top: -1px !important;
|
|
1931
|
+
}
|
|
1574
1932
|
.join.join-vertical > :where(*:not(:first-child)) {
|
|
1575
1933
|
margin-left: 0px;
|
|
1576
1934
|
margin-right: 0px;
|
|
1577
1935
|
margin-top: -1px;
|
|
1578
1936
|
}
|
|
1937
|
+
.\!join.join-horizontal > :where(*:not(:first-child)) {
|
|
1938
|
+
margin-top: 0px !important;
|
|
1939
|
+
margin-bottom: 0px !important;
|
|
1940
|
+
margin-inline-start: -1px !important;
|
|
1941
|
+
}
|
|
1579
1942
|
.join.join-horizontal > :where(*:not(:first-child)) {
|
|
1580
1943
|
margin-top: 0px;
|
|
1581
1944
|
margin-bottom: 0px;
|
|
1582
1945
|
margin-inline-start: -1px;
|
|
1583
1946
|
}
|
|
1947
|
+
.collapse {
|
|
1948
|
+
visibility: collapse;
|
|
1949
|
+
}
|
|
1584
1950
|
.relative {
|
|
1585
1951
|
position: relative;
|
|
1586
1952
|
}
|
|
@@ -1605,9 +1971,15 @@ html {
|
|
|
1605
1971
|
.cursor-pointer {
|
|
1606
1972
|
cursor: pointer;
|
|
1607
1973
|
}
|
|
1974
|
+
.flex-wrap {
|
|
1975
|
+
flex-wrap: wrap;
|
|
1976
|
+
}
|
|
1608
1977
|
.justify-start {
|
|
1609
1978
|
justify-content: flex-start;
|
|
1610
1979
|
}
|
|
1980
|
+
.gap-2 {
|
|
1981
|
+
gap: 0.5rem;
|
|
1982
|
+
}
|
|
1611
1983
|
.gap-3 {
|
|
1612
1984
|
gap: 0.75rem;
|
|
1613
1985
|
}
|
|
@@ -1620,14 +1992,32 @@ html {
|
|
|
1620
1992
|
.rounded-full {
|
|
1621
1993
|
border-radius: 9999px;
|
|
1622
1994
|
}
|
|
1995
|
+
.border {
|
|
1996
|
+
border-width: 1px;
|
|
1997
|
+
}
|
|
1998
|
+
.border-base-300 {
|
|
1999
|
+
--tw-border-opacity: 1;
|
|
2000
|
+
border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
|
|
2001
|
+
}
|
|
1623
2002
|
.bg-base-100 {
|
|
1624
2003
|
--tw-bg-opacity: 1;
|
|
1625
2004
|
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
|
|
1626
2005
|
}
|
|
2006
|
+
.bg-base-200 {
|
|
2007
|
+
--tw-bg-opacity: 1;
|
|
2008
|
+
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
|
|
2009
|
+
}
|
|
1627
2010
|
.bg-neutral {
|
|
1628
2011
|
--tw-bg-opacity: 1;
|
|
1629
2012
|
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
|
1630
2013
|
}
|
|
2014
|
+
.text-xl {
|
|
2015
|
+
font-size: 1.25rem;
|
|
2016
|
+
line-height: 1.75rem;
|
|
2017
|
+
}
|
|
2018
|
+
.font-medium {
|
|
2019
|
+
font-weight: 500;
|
|
2020
|
+
}
|
|
1631
2021
|
.text-neutral-content {
|
|
1632
2022
|
--tw-text-opacity: 1;
|
|
1633
2023
|
color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
|
|
@@ -1647,6 +2037,50 @@ html {
|
|
|
1647
2037
|
.filter {
|
|
1648
2038
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1649
2039
|
}
|
|
2040
|
+
.accordion-type-arrow > .collapse-title:after {
|
|
2041
|
+
position: absolute;
|
|
2042
|
+
display: block;
|
|
2043
|
+
height: 0.5rem;
|
|
2044
|
+
width: 0.5rem;
|
|
2045
|
+
--tw-translate-y: -100%;
|
|
2046
|
+
--tw-rotate: 45deg;
|
|
2047
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2048
|
+
transition-property: all;
|
|
2049
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2050
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2051
|
+
transition-duration: 150ms;
|
|
2052
|
+
transition-duration: 0.2s;
|
|
2053
|
+
top: 1.9rem;
|
|
2054
|
+
inset-inline-end: 1.4rem;
|
|
2055
|
+
content: "";
|
|
2056
|
+
transform-origin: 75% 75%;
|
|
2057
|
+
box-shadow: 2px 2px;
|
|
2058
|
+
pointer-events: none;
|
|
2059
|
+
}
|
|
2060
|
+
.collapse[open].accordion-type-arrow > .collapse-title:after,
|
|
2061
|
+
.collapse-open.accordion-type-arrow > .collapse-title:after,.accordion-type-arrow:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
|
|
2062
|
+
--tw-translate-y: -50%;
|
|
2063
|
+
--tw-rotate: 225deg;
|
|
2064
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2065
|
+
}
|
|
2066
|
+
.accordion-type-plus > .collapse-title:after {
|
|
2067
|
+
position: absolute;
|
|
2068
|
+
display: block;
|
|
2069
|
+
height: 0.5rem;
|
|
2070
|
+
width: 0.5rem;
|
|
2071
|
+
transition-property: all;
|
|
2072
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2073
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2074
|
+
transition-duration: 300ms;
|
|
2075
|
+
top: 0.9rem;
|
|
2076
|
+
inset-inline-end: 1.4rem;
|
|
2077
|
+
content: "+";
|
|
2078
|
+
pointer-events: none;
|
|
2079
|
+
}
|
|
2080
|
+
.collapse[open].accordion-type-plus > .collapse-title:after,
|
|
2081
|
+
.collapse-open.accordion-type-plus > .collapse-title:after,.accordion-type-plus:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
|
|
2082
|
+
content: "−";
|
|
2083
|
+
}
|
|
1650
2084
|
.avatar-size-xs {
|
|
1651
2085
|
width: 2rem;
|
|
1652
2086
|
}
|
|
@@ -3279,6 +3713,11 @@ html {
|
|
|
3279
3713
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
3280
3714
|
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
3281
3715
|
}
|
|
3716
|
+
.text-box-size-xs[type="number"]::-webkit-inner-spin-button {
|
|
3717
|
+
margin-top: -0.25rem;
|
|
3718
|
+
margin-bottom: -0.25rem;
|
|
3719
|
+
margin-inline-end: -0px;
|
|
3720
|
+
}
|
|
3282
3721
|
.text-box-size-xs {
|
|
3283
3722
|
height: 1.5rem;
|
|
3284
3723
|
padding-left: 0.5rem;
|
|
@@ -3293,6 +3732,11 @@ html {
|
|
|
3293
3732
|
.text-box-size-xs.text-box-with-right-icon {
|
|
3294
3733
|
padding-right: 2rem;
|
|
3295
3734
|
}
|
|
3735
|
+
.text-box-size-sm[type="number"]::-webkit-inner-spin-button {
|
|
3736
|
+
margin-top: 0px;
|
|
3737
|
+
margin-bottom: 0px;
|
|
3738
|
+
margin-inline-end: -0px;
|
|
3739
|
+
}
|
|
3296
3740
|
.text-box-size-sm {
|
|
3297
3741
|
height: 2rem;
|
|
3298
3742
|
padding-left: 0.75rem;
|
|
@@ -3306,6 +3750,11 @@ html {
|
|
|
3306
3750
|
.text-box-size-sm.text-box-with-right-icon {
|
|
3307
3751
|
padding-right: 2rem;
|
|
3308
3752
|
}
|
|
3753
|
+
.text-box-size-md[type="number"]::-webkit-inner-spin-button {
|
|
3754
|
+
margin-top: -1rem;
|
|
3755
|
+
margin-bottom: -1rem;
|
|
3756
|
+
margin-inline-end: -1rem;
|
|
3757
|
+
}
|
|
3309
3758
|
.text-box-size-md {
|
|
3310
3759
|
height: 3rem;
|
|
3311
3760
|
padding-left: 1rem;
|
|
@@ -3320,6 +3769,11 @@ html {
|
|
|
3320
3769
|
.text-box-size-md.text-box-with-right-icon {
|
|
3321
3770
|
padding-right: 2.25rem;
|
|
3322
3771
|
}
|
|
3772
|
+
.text-box-size-lg[type="number"]::-webkit-inner-spin-button {
|
|
3773
|
+
margin-top: -1.5rem;
|
|
3774
|
+
margin-bottom: -1.5rem;
|
|
3775
|
+
margin-inline-end: -1.5rem;
|
|
3776
|
+
}
|
|
3323
3777
|
.text-box-size-lg {
|
|
3324
3778
|
height: 4rem;
|
|
3325
3779
|
padding-left: 1.5rem;
|
|
@@ -3372,3 +3826,66 @@ html {
|
|
|
3372
3826
|
top: 1.5rem;
|
|
3373
3827
|
right: 0.75rem;
|
|
3374
3828
|
}
|
|
3829
|
+
.text-box-color-primary {
|
|
3830
|
+
--tw-border-opacity: 1;
|
|
3831
|
+
border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
|
|
3832
|
+
}
|
|
3833
|
+
.text-box-color-primary:focus,.text-box-color-primary:focus-within {
|
|
3834
|
+
--tw-border-opacity: 1;
|
|
3835
|
+
border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));
|
|
3836
|
+
outline-color: var(--fallback-p,oklch(var(--p)/1));
|
|
3837
|
+
}
|
|
3838
|
+
.text-box-color-secondary {
|
|
3839
|
+
--tw-border-opacity: 1;
|
|
3840
|
+
border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
|
|
3841
|
+
}
|
|
3842
|
+
.text-box-color-secondary:focus,.text-box-color-secondary:focus-within {
|
|
3843
|
+
--tw-border-opacity: 1;
|
|
3844
|
+
border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
|
|
3845
|
+
outline-color: var(--fallback-s,oklch(var(--s)/1));
|
|
3846
|
+
}
|
|
3847
|
+
.text-box-color-accent {
|
|
3848
|
+
--tw-border-opacity: 1;
|
|
3849
|
+
border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
|
|
3850
|
+
}
|
|
3851
|
+
.text-box-color-accent:focus,.text-box-color-accent:focus-within {
|
|
3852
|
+
--tw-border-opacity: 1;
|
|
3853
|
+
border-color: var(--fallback-a,oklch(var(--a)/var(--tw-border-opacity)));
|
|
3854
|
+
outline-color: var(--fallback-a,oklch(var(--a)/1));
|
|
3855
|
+
}
|
|
3856
|
+
.text-box-color-success {
|
|
3857
|
+
--tw-border-opacity: 1;
|
|
3858
|
+
border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
|
|
3859
|
+
}
|
|
3860
|
+
.text-box-color-success:focus,.text-box-color-success:focus-within {
|
|
3861
|
+
--tw-border-opacity: 1;
|
|
3862
|
+
border-color: var(--fallback-su,oklch(var(--su)/var(--tw-border-opacity)));
|
|
3863
|
+
outline-color: var(--fallback-su,oklch(var(--su)/1));
|
|
3864
|
+
}
|
|
3865
|
+
.text-box-color-warning {
|
|
3866
|
+
--tw-border-opacity: 1;
|
|
3867
|
+
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
|
|
3868
|
+
}
|
|
3869
|
+
.text-box-color-warning:focus,.text-box-color-warning:focus-within {
|
|
3870
|
+
--tw-border-opacity: 1;
|
|
3871
|
+
border-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-border-opacity)));
|
|
3872
|
+
outline-color: var(--fallback-wa,oklch(var(--wa)/1));
|
|
3873
|
+
}
|
|
3874
|
+
.text-box-color-info {
|
|
3875
|
+
--tw-border-opacity: 1;
|
|
3876
|
+
border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
|
|
3877
|
+
}
|
|
3878
|
+
.text-box-color-info:focus,.text-box-color-info:focus-within {
|
|
3879
|
+
--tw-border-opacity: 1;
|
|
3880
|
+
border-color: var(--fallback-in,oklch(var(--in)/var(--tw-border-opacity)));
|
|
3881
|
+
outline-color: var(--fallback-in,oklch(var(--in)/1));
|
|
3882
|
+
}
|
|
3883
|
+
.text-box-color-error {
|
|
3884
|
+
--tw-border-opacity: 1;
|
|
3885
|
+
border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
|
|
3886
|
+
}
|
|
3887
|
+
.text-box-color-error:focus,.text-box-color-error:focus-within {
|
|
3888
|
+
--tw-border-opacity: 1;
|
|
3889
|
+
border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
|
|
3890
|
+
outline-color: var(--fallback-er,oklch(var(--er)/1));
|
|
3891
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface AccordionType {
|
|
3
|
+
name: string;
|
|
4
|
+
iconType?: 'arrow' | 'plus';
|
|
5
|
+
join?: boolean;
|
|
6
|
+
multiple?: boolean;
|
|
7
|
+
options: AccordionOption[];
|
|
8
|
+
}
|
|
9
|
+
export interface AccordionOption {
|
|
10
|
+
header: React.ReactElement;
|
|
11
|
+
body: React.ReactElement;
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { IconType } from 'react-icons';
|
|
3
|
-
import type { ErrorType, SizeType } from '../../../types';
|
|
3
|
+
import type { ColorType, ErrorType, SizeType } from '../../../types';
|
|
4
4
|
export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, ErrorType {
|
|
5
5
|
name: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
size?: SizeType;
|
|
9
|
+
color?: ColorType;
|
|
9
10
|
leftIcon?: IconType;
|
|
10
11
|
rightIcon?: IconType;
|
|
11
12
|
rightButton?: boolean;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import cls from 'classnames';
|
|
3
|
+
const Accordion = ({ name, join, options, iconType = 'arrow', multiple }) => {
|
|
4
|
+
return (_jsx("div", { className: cls('flex flex-wrap', {
|
|
5
|
+
'join join-vertical w-full': join,
|
|
6
|
+
'gap-2': !join
|
|
7
|
+
}), children: options.map(({ header, body }, index) => (_jsxs("div", { className: cls('collapse bg-base-200', {
|
|
8
|
+
[`accordion-type-${iconType}`]: iconType,
|
|
9
|
+
'join-item border border-base-300': join
|
|
10
|
+
}), children: [_jsx("input", { type: multiple ? 'checkbox' : 'radio', name: name }), _jsx("div", { className: 'collapse-title text-xl font-medium', children: header }), _jsx("div", { className: 'collapse-content', children: body })] }, index))) }));
|
|
11
|
+
};
|
|
12
|
+
export default Accordion;
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
3
3
|
import cls from 'classnames';
|
|
4
|
-
const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
|
|
4
|
+
const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', color, leftIcon: LeftIcon, rightIcon: RightIcon, rightButton, onClick, ...otherProps }, ref) => {
|
|
5
5
|
const inputRef = useRef(null);
|
|
6
6
|
useImperativeHandle(ref, () => inputRef.current);
|
|
7
|
-
return (_jsxs("
|
|
8
|
-
[`text-box-left-icon-size-${size}`]: size
|
|
9
|
-
|
|
7
|
+
return (_jsxs("label", { htmlFor: name, className: 'form-control w-full flex', children: [label && _jsx("span", { className: 'label-text', children: label }), _jsxs("div", { className: 'relative', children: [LeftIcon && (_jsx(LeftIcon, { className: cls('text-box-left-icon', {
|
|
8
|
+
[`text-box-left-icon-size-${size}`]: size,
|
|
9
|
+
'cursor-not-allowed': disabled
|
|
10
|
+
}) })), _jsx("input", { ref: inputRef, id: name, name: name, "data-testid": name, ...otherProps, onClick: (e) => !disabled && onClick?.(e), className: cls('input input-bordered w-full', `text-box-size-${size}`, {
|
|
10
11
|
'input-error': isError,
|
|
11
12
|
'text-box-with-left-icon': LeftIcon,
|
|
12
|
-
'text-box-with-right-icon': RightIcon
|
|
13
|
+
'text-box-with-right-icon': RightIcon,
|
|
14
|
+
[`text-box-color-${color}`]: !isError && color
|
|
13
15
|
}), disabled: disabled }), RightIcon && (_jsx(RightIcon, { className: cls('text-box-right-icon', {
|
|
14
16
|
[`text-box-right-icon-size-${size}`]: size,
|
|
15
|
-
'cursor-pointer': rightButton
|
|
16
|
-
|
|
17
|
+
'cursor-pointer': !disabled && rightButton,
|
|
18
|
+
'cursor-not-allowed': disabled
|
|
19
|
+
}), onClick: () => rightButton && !disabled && inputRef.current?.click() }))] }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
|
|
17
20
|
});
|
|
18
21
|
export default TextBox;
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"framework design",
|
|
11
11
|
"design system"
|
|
12
12
|
],
|
|
13
|
-
"version": "0.
|
|
13
|
+
"version": "0.5.0",
|
|
14
14
|
"homepage": "https://github.com/creativecodeco/ui",
|
|
15
15
|
"author": {
|
|
16
16
|
"name": "John Toro",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"main": "lib/index.js",
|
|
21
21
|
"source": "src/index.ts",
|
|
22
22
|
"scripts": {
|
|
23
|
-
"dev": "npm run storybook",
|
|
23
|
+
"dev": "npm run build; npm run storybook",
|
|
24
24
|
"dev:css": "postcss src/theme/main.css -o lib/theme/main.css --watch",
|
|
25
25
|
"build": "rm -rf lib; tsc -p tsconfig.build.json; npm run build:alias; npm run build:css",
|
|
26
26
|
"build:alias": "tsc-alias -p tsconfig.build.json",
|
|
@@ -48,42 +48,42 @@
|
|
|
48
48
|
"usehooks-ts": "2.9.1"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"postcss": "8.4.
|
|
52
|
-
"postcss-import": "16.0.
|
|
51
|
+
"postcss": "8.4.35",
|
|
52
|
+
"postcss-import": "16.0.1",
|
|
53
53
|
"react": "18.2.0",
|
|
54
|
-
"react-hook-form": "7.
|
|
54
|
+
"react-hook-form": "7.50.1",
|
|
55
55
|
"tailwindcss": "3.4.1",
|
|
56
|
-
"usehooks-ts": "2.
|
|
56
|
+
"usehooks-ts": "2.15.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@babel/core": "7.
|
|
60
|
-
"@babel/preset-env": "7.
|
|
59
|
+
"@babel/core": "7.24.0",
|
|
60
|
+
"@babel/preset-env": "7.24.0",
|
|
61
61
|
"@babel/preset-react": "7.23.3",
|
|
62
62
|
"@babel/preset-typescript": "7.23.3",
|
|
63
63
|
"@jest/globals": "29.7.0",
|
|
64
|
-
"@storybook/addon-essentials": "7.6.
|
|
65
|
-
"@storybook/addon-interactions": "7.6.
|
|
66
|
-
"@storybook/addon-links": "7.6.
|
|
67
|
-
"@storybook/addon-mdx-gfm": "7.6.
|
|
68
|
-
"@storybook/blocks": "7.6.
|
|
69
|
-
"@storybook/react": "7.6.
|
|
70
|
-
"@storybook/react-webpack5": "7.6.
|
|
71
|
-
"@storybook/test": "7.6.
|
|
64
|
+
"@storybook/addon-essentials": "7.6.17",
|
|
65
|
+
"@storybook/addon-interactions": "7.6.17",
|
|
66
|
+
"@storybook/addon-links": "7.6.17",
|
|
67
|
+
"@storybook/addon-mdx-gfm": "7.6.17",
|
|
68
|
+
"@storybook/blocks": "7.6.17",
|
|
69
|
+
"@storybook/react": "7.6.17",
|
|
70
|
+
"@storybook/react-webpack5": "7.6.17",
|
|
71
|
+
"@storybook/test": "7.6.17",
|
|
72
72
|
"@testing-library/dom": "9.3.4",
|
|
73
|
-
"@testing-library/jest-dom": "6.2
|
|
74
|
-
"@testing-library/react": "14.1
|
|
73
|
+
"@testing-library/jest-dom": "6.4.2",
|
|
74
|
+
"@testing-library/react": "14.2.1",
|
|
75
75
|
"@testing-library/user-event": "14.5.2",
|
|
76
|
-
"@types/jest": "29.5.
|
|
77
|
-
"@types/node": "20.11.
|
|
78
|
-
"@types/react": "18.2.
|
|
79
|
-
"@types/react-dom": "18.2.
|
|
80
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
76
|
+
"@types/jest": "29.5.12",
|
|
77
|
+
"@types/node": "20.11.21",
|
|
78
|
+
"@types/react": "18.2.60",
|
|
79
|
+
"@types/react-dom": "18.2.19",
|
|
80
|
+
"@typescript-eslint/eslint-plugin": "6.21.0",
|
|
81
81
|
"autoprefixer": "10.4.17",
|
|
82
|
-
"chromatic": "
|
|
82
|
+
"chromatic": "11.0.0",
|
|
83
83
|
"classnames": "2.5.1",
|
|
84
84
|
"cpx2": "7.0.1",
|
|
85
|
-
"daisyui": "4.
|
|
86
|
-
"eslint": "8.
|
|
85
|
+
"daisyui": "4.7.2",
|
|
86
|
+
"eslint": "8.57.0",
|
|
87
87
|
"eslint-config-prettier": "9.1.0",
|
|
88
88
|
"eslint-config-standard": "17.1.0",
|
|
89
89
|
"eslint-config-standard-react": "13.0.0",
|
|
@@ -96,19 +96,19 @@
|
|
|
96
96
|
"eslint-plugin-promise": "6.1.1",
|
|
97
97
|
"eslint-plugin-react": "7.33.2",
|
|
98
98
|
"eslint-plugin-standard": "5.0.0",
|
|
99
|
-
"eslint-plugin-storybook": "0.
|
|
100
|
-
"eslint-plugin-unused-imports": "3.
|
|
101
|
-
"husky": "
|
|
99
|
+
"eslint-plugin-storybook": "0.8.0",
|
|
100
|
+
"eslint-plugin-unused-imports": "3.1.0",
|
|
101
|
+
"husky": "9.0.11",
|
|
102
102
|
"jest": "29.7.0",
|
|
103
103
|
"jest-environment-jsdom": "29.7.0",
|
|
104
104
|
"jest-junit": "16.0.0",
|
|
105
105
|
"jest-transform-css": "6.0.1",
|
|
106
106
|
"postcss-cli": "11.0.0",
|
|
107
|
-
"prettier": "3.2.
|
|
107
|
+
"prettier": "3.2.5",
|
|
108
108
|
"prop-types": "15.8.1",
|
|
109
109
|
"react-dom": "18.2.0",
|
|
110
110
|
"react-icons": "5.0.1",
|
|
111
|
-
"storybook": "7.6.
|
|
111
|
+
"storybook": "7.6.17",
|
|
112
112
|
"storybook-addon-themes": "6.1.0",
|
|
113
113
|
"string-width": "7.1.0",
|
|
114
114
|
"ts-jest": "29.1.2",
|