@uxf/ui 1.0.0-beta.65 → 1.0.0-beta.67

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.
Files changed (32) hide show
  1. package/css/avatar-file-input.css +4 -6
  2. package/css/button.css +28 -20
  3. package/css/checkbox-button.css +5 -6
  4. package/css/checkbox-input.css +0 -1
  5. package/css/checkbox.css +1 -2
  6. package/css/color-radio-group.css +0 -1
  7. package/css/color-radio.css +1 -1
  8. package/css/combobox.css +38 -9
  9. package/css/component-structure-analyzer.css +26 -26
  10. package/css/date-picker-input.css +0 -2
  11. package/css/date-picker.css +0 -1
  12. package/css/dropdown.css +3 -2
  13. package/css/error-message.css +1 -1
  14. package/css/flash-messages.css +2 -2
  15. package/css/form-control.css +1 -1
  16. package/css/icon.css +0 -1
  17. package/css/input-basic.css +4 -4
  18. package/css/input.css +16 -10
  19. package/css/label.css +1 -0
  20. package/css/list-item.css +1 -1
  21. package/css/radio-group.css +1 -2
  22. package/css/radio.css +0 -1
  23. package/css/raster-image.css +1 -2
  24. package/css/select.css +18 -6
  25. package/css/tabs.css +25 -13
  26. package/css/text-link.css +1 -1
  27. package/css/textarea.css +20 -13
  28. package/css/toggle.css +1 -2
  29. package/package.json +2 -2
  30. package/tabs/tabs.d.ts +1 -0
  31. package/tabs/tabs.js +1 -1
  32. package/tabs/tabs.stories.js +23 -8
package/css/avatar-file-input.css CHANGED
@@ -1,9 +1,7 @@
1
-
2
1
  .uxf-avatar-file-input {
3
2
  @apply overflow-hidden relative mx-auto h-24 w-24 rounded-full bg-gray-300 text-gray-300 transition
4
- before:absolute before:inset-0 before:border before:border-dashed before:border-current before:rounded-full
5
- hover:before:border-2 is-focused:text-gray-800 is-focused:bg-white
6
- is-disabled:opacity-50 is-disabled:pointer-events-none is-readonly:pointer-events-none
7
- is-invalid:text-red-600 is-invalid:is-focused:ring-red-300;
3
+ before:absolute before:inset-0 before:border before:border-dashed before:border-current before:rounded-full
4
+ hover:before:border-2 is-focused:text-gray-800 is-focused:bg-white
5
+ is-disabled:opacity-50 is-disabled:pointer-events-none is-readonly:pointer-events-none
6
+ is-invalid:text-red-600 is-invalid:is-focused:ring-red-300;
8
7
  }
9
-
package/css/button.css CHANGED
@@ -6,7 +6,8 @@
6
6
 
7
7
  .uxf-button {
8
8
  @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
9
- focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition before:transition;
9
+ focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
10
+ before:transition;
10
11
 
11
12
  &__text {
12
13
  @apply truncate;
@@ -22,23 +23,23 @@
22
23
 
23
24
  &.is-loading {
24
25
  @apply pointer-events-none;
25
- }
26
26
 
27
- &.is-loading:after {
28
- animation: spinner .8s linear infinite;
29
- border-radius: 50%;
30
- border-right: 2px solid transparent;
31
- border-top: 2px solid;
32
- content: '';
33
- height: 20px;
34
- margin-left: 8px;
35
- width: 20px;
27
+ &::after {
28
+ animation: spinner 0.8s linear infinite;
29
+ border-radius: 50%;
30
+ border-right: 2px solid transparent;
31
+ border-top: 2px solid;
32
+ content: "";
33
+ height: 20px;
34
+ margin-left: 8px;
35
+ width: 20px;
36
+ }
36
37
  }
37
38
 
38
39
  &--size-xs {
39
40
  @apply px-2.5 py-1.5 text-xs;
40
41
 
41
- &.is-loading:after {
42
+ &.is-loading::after {
42
43
  height: 14px;
43
44
  width: 14px;
44
45
  }
@@ -51,7 +52,7 @@
51
52
  &--size-sm {
52
53
  @apply px-3 py-2 text-sm leading-4;
53
54
 
54
- &.is-loading:after {
55
+ &.is-loading::after {
55
56
  height: 16px;
56
57
  width: 16px;
57
58
  }
@@ -86,10 +87,12 @@
86
87
  }
87
88
 
88
89
  &--variant-outlined {
89
- @apply before:absolute before:pointer-events-none before:inset-0 before:border hover:before:border-2 bg-transparent;
90
+ @apply before:absolute before:pointer-events-none before:inset-0 before:border hover:before:border-2
91
+ bg-transparent;
90
92
 
91
93
  :root .light & {
92
- @apply before:border-gray-300 hover:bg-primary-100 hover:before:border-primary-400 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
94
+ @apply before:border-gray-300 hover:bg-primary-100 hover:before:border-primary-400
95
+ focus-visible:ring-primary-500 focus-visible:ring-offset-white;
93
96
 
94
97
  &.is-disabled {
95
98
  @apply before:border-gray-100 text-gray-400;
@@ -97,7 +100,8 @@
97
100
  }
98
101
 
99
102
  :root .dark & {
100
- @apply before:border-gray-700 hover:bg-gray-700 hover:before:border-gray-300 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
103
+ @apply before:border-gray-700 hover:bg-gray-700 hover:before:border-gray-300 focus-visible:ring-primary-500
104
+ focus-visible:ring-offset-gray-900;
101
105
 
102
106
  &.is-disabled {
103
107
  @apply before:border-gray-700 text-gray-600;
@@ -118,7 +122,8 @@
118
122
  }
119
123
 
120
124
  :root .dark & {
121
- @apply text-white bg-primary-500 hover:bg-primary-400 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
125
+ @apply text-white bg-primary-500 hover:bg-primary-400 focus-visible:ring-primary-500
126
+ focus-visible:ring-offset-gray-900;
122
127
 
123
128
  &.is-disabled {
124
129
  @apply bg-gray-700 text-gray-400;
@@ -156,7 +161,8 @@
156
161
  }
157
162
 
158
163
  :root .dark & {
159
- @apply text-white bg-success-500 hover:bg-success-400 focus-visible:ring-success-500 focus-visible:ring-offset-gray-900;
164
+ @apply text-white bg-success-500 hover:bg-success-400 focus-visible:ring-success-500
165
+ focus-visible:ring-offset-gray-900;
160
166
 
161
167
  &.is-disabled {
162
168
  @apply bg-gray-700 text-gray-400;
@@ -174,7 +180,8 @@
174
180
  }
175
181
 
176
182
  :root .dark & {
177
- @apply text-white bg-warning-500 hover:bg-warning-400 focus-visible:ring-warning-500 focus-visible:ring-offset-gray-900;
183
+ @apply text-white bg-warning-500 hover:bg-warning-400 focus-visible:ring-warning-500
184
+ focus-visible:ring-offset-gray-900;
178
185
 
179
186
  &.is-disabled {
180
187
  @apply bg-gray-700 text-gray-400;
@@ -192,7 +199,8 @@
192
199
  }
193
200
 
194
201
  :root .dark & {
195
- @apply text-white bg-error-500 hover:bg-error-400 focus-visible:ring-error-500 focus-visible:ring-offset-gray-900;
202
+ @apply text-white bg-error-500 hover:bg-error-400 focus-visible:ring-error-500
203
+ focus-visible:ring-offset-gray-900;
196
204
 
197
205
  &.is-disabled {
198
206
  @apply bg-gray-700 text-gray-400;
package/css/checkbox-button.css CHANGED
@@ -1,9 +1,11 @@
1
1
  .uxf-checkbox-button {
2
- @apply shrink-0 inline-flex items-center justify-between rounded-lg py-3 px-4 space-x-4 transition outline-none relative before:absolute before:inset-0 before:border before:rounded-lg before:border-transparent before:transition
3
- focus-visible:ring-offset-2 focus-visible:ring-2;
2
+ @apply shrink-0 inline-flex items-center justify-between rounded-lg py-3 px-4 space-x-4 transition outline-none
3
+ relative before:absolute before:inset-0 before:border before:rounded-lg before:border-transparent
4
+ before:transition focus-visible:ring-offset-2 focus-visible:ring-2;
4
5
 
5
6
  &__icon {
6
- @apply w-5 h-5 p-0.5 bg-white text-transparent rounded relative before:absolute before:inset-0 before:border before:rounded before:transition;
7
+ @apply w-5 h-5 p-0.5 bg-white text-transparent rounded relative before:absolute before:inset-0 before:border
8
+ before:rounded before:transition;
7
9
  }
8
10
 
9
11
  :root .light & {
@@ -82,9 +84,7 @@
82
84
 
83
85
  &.is-selected {
84
86
  @apply bg-gray-600;
85
- }
86
87
 
87
- &.is-selected {
88
88
  .uxf-checkbox-button__icon {
89
89
  @apply text-gray-800;
90
90
  }
@@ -96,4 +96,3 @@
96
96
  }
97
97
  }
98
98
  }
99
-
package/css/checkbox-input.css CHANGED
@@ -1,4 +1,3 @@
1
1
  .uxf-checkbox-input {
2
2
  @apply bg-red-300;
3
3
  }
4
-
package/css/checkbox.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .uxf-checkbox {
2
2
  @apply shrink-0 inline-flex items-center justify-center rounded h-6 w-6 transition outline-none border
3
- focus-visible:ring-offset-2 focus-visible:ring-2;
3
+ focus-visible:ring-offset-2 focus-visible:ring-2;
4
4
 
5
5
  &__wrapper {
6
6
  @apply flex items-center justify-between space-x-3;
@@ -100,4 +100,3 @@
100
100
  }
101
101
  }
102
102
  }
103
-
package/css/color-radio-group.css CHANGED
@@ -19,4 +19,3 @@
19
19
  @apply flex flex-wrap gap-3.5;
20
20
  }
21
21
  }
22
-
package/css/color-radio.css CHANGED
@@ -18,4 +18,4 @@
18
18
  @apply opacity-100;
19
19
  }
20
20
  }
21
- }
21
+ }
package/css/combobox.css CHANGED
@@ -2,21 +2,22 @@
2
2
  @apply relative;
3
3
 
4
4
  &__button {
5
- @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
5
+ @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
6
+ outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
6
7
 
7
8
  :root .light & {
8
- @apply bg-gray-100 text-gray-900 before:border-gray-200;
9
+ @apply bg-gray-100 text-lightHigh before:border-gray-200;
9
10
 
10
11
  .is-empty {
11
- @apply text-gray-400;
12
+ @apply text-lightLow;
12
13
  }
13
14
  }
14
15
 
15
16
  :root .dark & {
16
- @apply bg-gray-800 text-gray-300 before:border-gray-700;
17
+ @apply bg-gray-800 text-darkHigh before:border-gray-700;
17
18
 
18
19
  .is-empty {
19
- @apply text-gray-400;
20
+ @apply text-darkLow;
20
21
  }
21
22
  }
22
23
 
@@ -25,8 +26,8 @@
25
26
 
26
27
  :root .light & {
27
28
  @apply before:border-none ring-primary-500;
28
-
29
29
  }
30
+
30
31
  :root .dark & {
31
32
  @apply ring-primary-500;
32
33
  }
@@ -42,6 +43,7 @@
42
43
  @apply placeholder:text-error-500;
43
44
  }
44
45
  }
46
+
45
47
  :root .dark & {
46
48
  @apply ring-error-500 text-error-500;
47
49
 
@@ -56,18 +58,45 @@
56
58
  @apply flex-grow bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none;
57
59
 
58
60
  :root .light & {
59
- @apply placeholder:text-gray-400;
61
+ @apply placeholder:text-lightLow;
60
62
  }
63
+
61
64
  :root .dark & {
62
- @apply placeholder:text-gray-400;
65
+ @apply placeholder:text-darkLow;
63
66
  }
64
67
  }
65
68
 
66
69
  &__button-icon {
67
- @apply text-gray-600 transition duration-300;
70
+ @apply transition duration-300;
71
+
72
+ :root .light & {
73
+ @apply text-lightMedium;
74
+ }
75
+
76
+ :root .dark & {
77
+ @apply text-darkMedium;
78
+ }
68
79
 
69
80
  &.is-open {
70
81
  @apply -scale-y-100;
71
82
  }
72
83
  }
84
+
85
+ input:-webkit-autofill {
86
+ &,
87
+ &:hover,
88
+ &:focus {
89
+ margin: 1px 0;
90
+
91
+ :root .dark & {
92
+ -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
93
+ caret-color: white;
94
+ -webkit-text-fill-color: theme("colors.gray.300");
95
+ }
96
+
97
+ :root .light & {
98
+ -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
99
+ }
100
+ }
101
+ }
73
102
  }
package/css/component-structure-analyzer.css CHANGED
@@ -1,31 +1,31 @@
1
1
  .uxf-component-structure-analyzer {
2
- padding-bottom: 32px;
2
+ padding-bottom: 32px;
3
3
 
4
- * {
5
- padding: 32px !important;
6
- border: 2px solid black !important;
7
- position: relative !important;
8
- color: lightgray !important;
9
- background-color: white !important;
10
- border-radius: initial !important;
11
- margin: 4px !important;
12
- font-family: monospace;
13
- font-size: 12px;
14
- min-width: 200px;
15
- height: auto !important;
16
- top: initial !important;
17
- left: initial !important;
18
- right: initial !important;
4
+ * {
5
+ padding: 32px !important;
6
+ border: 2px solid black !important;
7
+ position: relative !important;
8
+ color: lightgray !important;
9
+ background-color: white !important;
10
+ border-radius: initial !important;
11
+ margin: 4px !important;
12
+ font-family: monospace;
13
+ font-size: 12px;
14
+ min-width: 200px;
15
+ height: auto !important;
16
+ top: initial !important;
17
+ left: initial !important;
18
+ right: initial !important;
19
19
 
20
- &::before {
21
- position: absolute;
22
- left: 4px;
23
- top: 2px;
24
- content: attr(class);
25
- font-size: 12px;
26
- line-height: 14px;
27
- color: black;
28
- font-weight: 500;
20
+ &::before {
21
+ position: absolute;
22
+ left: 4px;
23
+ top: 2px;
24
+ content: attr(class);
25
+ font-size: 12px;
26
+ line-height: 14px;
27
+ color: black;
28
+ font-weight: 500;
29
+ }
29
30
  }
30
- }
31
31
  }
package/css/date-picker-input.css CHANGED
@@ -33,7 +33,6 @@
33
33
  }
34
34
  }
35
35
 
36
-
37
36
  &--has-right-addon {
38
37
  .uxf-date-picker-input__wrapper {
39
38
  @apply rounded-r-none;
@@ -120,4 +119,3 @@
120
119
  }
121
120
  }
122
121
  }
123
-
package/css/date-picker.css CHANGED
@@ -31,4 +31,3 @@
31
31
  }
32
32
  }
33
33
  }
34
-
package/css/dropdown.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .uxf-dropdown {
2
- @apply absolute z-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
2
+ @apply absolute z-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
3
+ ring-opacity-5 focus:outline-none sm:text-sm;
3
4
 
4
5
  &--bottom {
5
6
  @apply mt-1;
@@ -10,7 +11,7 @@
10
11
  }
11
12
 
12
13
  &__item {
13
- @apply relative cursor-default select-none py-2 px-4;
14
+ @apply relative cursor-default select-none py-3 px-4 text-gray-800;
14
15
 
15
16
  &.is-active {
16
17
  @apply bg-primary-500 text-white;
package/css/error-message.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .uxf-error-message {
2
- @apply block text-error-600 mt-1 text-right
2
+ @apply block text-error-600 mt-1 text-right;
3
3
  }
package/css/flash-messages.css CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  .uxf-flash-message {
10
10
  @apply pointer-events-auto rounded-2xl transition px-3 py-4 text-center shadow backdrop-blur
11
- is-hoverable:cursor-pointer;
11
+ is-hoverable:cursor-pointer;
12
12
 
13
13
  &--success {
14
14
  @apply bg-success-500 is-hoverable:bg-success-700 text-white;
@@ -17,4 +17,4 @@
17
17
  &--error {
18
18
  @apply bg-error-500 is-hoverable:bg-error-700 text-white;
19
19
  }
20
- }
20
+ }
package/css/form-control.css CHANGED
@@ -4,4 +4,4 @@
4
4
  &.is-invalid {
5
5
  @apply text-error-600;
6
6
  }
7
- }
7
+ }
package/css/icon.css CHANGED
@@ -5,4 +5,3 @@
5
5
  @apply pointer-events-none;
6
6
  }
7
7
  }
8
-
package/css/input-basic.css CHANGED
@@ -1,18 +1,18 @@
1
1
  .uxf-input {
2
- @apply flex flex-row;
2
+ @apply flex flex-row;
3
3
  }
4
4
 
5
5
  .uxf-input__wrapper {
6
- @apply flex w-full flex-row;
6
+ @apply flex w-full flex-row;
7
7
  }
8
8
 
9
9
  .uxf-input__element {
10
- @apply w-full;
10
+ @apply w-full;
11
11
  }
12
12
 
13
13
  .uxf-input__left-element,
14
14
  .uxf-input__right-element,
15
15
  .uxf-input__left-addon,
16
16
  .uxf-input__right-addon {
17
- @apply flex flex-row items-center whitespace-nowrap;
17
+ @apply flex flex-row items-center whitespace-nowrap;
18
18
  }
package/css/input.css CHANGED
@@ -10,6 +10,8 @@
10
10
  }
11
11
 
12
12
  &__element {
13
+ @apply bg-transparent outline-none;
14
+
13
15
  :root .light & {
14
16
  @apply placeholder:text-gray-400;
15
17
  }
@@ -60,10 +62,6 @@
60
62
  }
61
63
  }
62
64
 
63
- &__element {
64
- @apply bg-transparent outline-none;
65
- }
66
-
67
65
  &--has-right-addon {
68
66
  .uxf-input__wrapper {
69
67
  @apply rounded-r-none;
@@ -123,6 +121,7 @@
123
121
  :root .light & {
124
122
  @apply border-gray-300;
125
123
  }
124
+
126
125
  :root .dark & {
127
126
  @apply border-gray-500;
128
127
  }
@@ -135,6 +134,7 @@
135
134
  :root .light & {
136
135
  @apply ring-error-500 border-error-500;
137
136
  }
137
+
138
138
  :root .dark & {
139
139
  @apply ring-error-500 border-error-500;
140
140
  }
@@ -153,6 +153,7 @@
153
153
  :root .light & {
154
154
  @apply border-gray-300 text-error-500;
155
155
  }
156
+
156
157
  :root .dark & {
157
158
  @apply border-gray-500 text-error-500;
158
159
  }
@@ -160,16 +161,21 @@
160
161
  }
161
162
  }
162
163
 
163
- :root .dark & {
164
- input:-webkit-autofill {
165
- &,
166
- &:hover,
167
- &:focus {
164
+ input:-webkit-autofill {
165
+ &,
166
+ &:hover,
167
+ &:focus {
168
+ margin: 1px 0;
169
+
170
+ :root .dark & {
168
171
  -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
169
172
  caret-color: white;
170
- margin: 1px 0;
171
173
  -webkit-text-fill-color: theme("colors.gray.300");
172
174
  }
175
+
176
+ :root .light & {
177
+ -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
178
+ }
173
179
  }
174
180
  }
175
181
  }
package/css/label.css CHANGED
@@ -4,6 +4,7 @@
4
4
  :root .light & {
5
5
  @apply text-gray-900;
6
6
  }
7
+
7
8
  :root .dark & {
8
9
  @apply text-white;
9
10
  }
package/css/list-item.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .uxf-list-item {
2
2
  @apply flex justify-between grow py-4 px-5 min-h-[64px] transition-opacity hover:opacity-75
3
- outline-none relative before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
3
+ outline-none relative before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
4
4
 
5
5
  .uxf-list-item__end-icon {
6
6
  @apply shrink-0 pl-3;
package/css/radio-group.css CHANGED
@@ -97,7 +97,7 @@
97
97
 
98
98
  .uxf-radio-group__option__wrapper {
99
99
  @apply flex-col-reverse min-w-[112px] p-3 relative
100
- before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
100
+ before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
101
101
 
102
102
  &.is-selected {
103
103
  @apply before:border-2;
@@ -136,4 +136,3 @@
136
136
  }
137
137
  }
138
138
  }
139
-
package/css/radio.css CHANGED
@@ -87,4 +87,3 @@
87
87
  }
88
88
  }
89
89
  }
90
-
package/css/raster-image.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .uxf-raster-image {
2
- @apply block w-full;
2
+ @apply block w-full;
3
3
 
4
4
  &__img {
5
5
  @apply block w-full h-auto;
@@ -13,4 +13,3 @@
13
13
  }
14
14
  }
15
15
  }
16
-
package/css/select.css CHANGED
@@ -2,21 +2,24 @@
2
2
  @apply relative;
3
3
 
4
4
  &__button {
5
- @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
5
+ @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
6
+ outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
7
+ before:rounded-lg;
6
8
 
7
9
  :root .light & {
8
- @apply bg-gray-100 text-gray-900 before:border-gray-200 focus-visible:before:border-none focus-visible:ring-primary-500;
10
+ @apply bg-gray-100 text-lightHigh before:border-gray-200 focus-visible:before:border-none
11
+ focus-visible:ring-primary-500;
9
12
 
10
13
  .is-empty {
11
- @apply text-gray-400;
14
+ @apply text-lightLow;
12
15
  }
13
16
  }
14
17
 
15
18
  :root .dark & {
16
- @apply bg-gray-800 text-gray-300 before:border-gray-700 focus-visible:ring-primary-500;
19
+ @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
17
20
 
18
21
  .is-empty {
19
- @apply text-gray-400;
22
+ @apply text-darkLow;
20
23
  }
21
24
  }
22
25
 
@@ -30,6 +33,7 @@
30
33
  @apply text-error-500;
31
34
  }
32
35
  }
36
+
33
37
  :root .dark & {
34
38
  @apply ring-error-500 text-error-500;
35
39
 
@@ -45,7 +49,15 @@
45
49
  }
46
50
 
47
51
  &__button-icon {
48
- @apply text-gray-600 transition duration-300;
52
+ @apply transition duration-300;
53
+
54
+ :root .light & {
55
+ @apply text-lightMedium;
56
+ }
57
+
58
+ :root .dark & {
59
+ @apply text-darkMedium;
60
+ }
49
61
 
50
62
  &.is-open {
51
63
  @apply -scale-y-100;
package/css/tabs.css CHANGED
@@ -1,10 +1,17 @@
1
- .test-focus {
2
- @apply ring-red-400 ring-2;
3
- }
4
-
5
1
  .uxf-tabs {
6
2
  @apply w-full;
7
3
 
4
+ &--grow {
5
+ .uxf-tabs__tab-list__wrapper,
6
+ .uxf-tabs__tab-list {
7
+ @apply w-full;
8
+ }
9
+
10
+ .uxf-tabs__tab {
11
+ @apply grow;
12
+ }
13
+ }
14
+
8
15
  &__tab-list__wrapper {
9
16
  @apply w-fit mb-6;
10
17
 
@@ -14,6 +21,7 @@
14
21
  :root .light & {
15
22
  @apply before:border-b-gray-100;
16
23
  }
24
+
17
25
  :root .dark & {
18
26
  @apply before:border-b-gray-800;
19
27
  }
@@ -25,6 +33,7 @@
25
33
  :root .light & {
26
34
  @apply bg-gray-100;
27
35
  }
36
+
28
37
  :root .dark & {
29
38
  @apply bg-gray-700;
30
39
  }
@@ -50,28 +59,30 @@
50
59
  }
51
60
 
52
61
  &__tab {
53
- @apply inline-flex text-center items-center justify-center px-2 py-2 whitespace-nowrap
54
- transition-colors outline-none cursor-pointer is-disabled:pointer-events-none
55
- focus-visible:ring-2 focus-visible:ring-offset-1 overflow-visible;
62
+ @apply inline-flex text-center items-center justify-center px-2 py-2 whitespace-nowrap transition-colors
63
+ outline-none cursor-pointer is-disabled:pointer-events-none
64
+ focus-visible:ring-2 focus-visible:ring-offset-1 overflow-visible;
56
65
 
57
66
  &--default {
58
67
  @apply relative rounded-lg before:absolute before:bottom-[-6px] before:w-full before:border-b-2
59
- before:opacity-0 before:transition;
68
+ before:opacity-0 before:transition;
60
69
 
61
70
  :root .light & {
62
71
  @apply text-gray-600 hover:bg-gray-100 focus-visible:ring-primary-500;
63
72
  }
73
+
64
74
  :root .dark & {
65
75
  @apply text-gray-200 hover:bg-gray-800 focus-visible:ring-primary-500
66
- focus-visible:ring-offset-gray-900;
76
+ focus-visible:ring-offset-gray-900;
67
77
  }
68
78
 
69
79
  &.is-active {
70
- @apply before:opacity-100;
80
+ @apply before:opacity-100 ;
71
81
 
72
82
  :root .light & {
73
83
  @apply text-gray-900 before:border-b-primary-500 hover:bg-transparent;
74
84
  }
85
+
75
86
  :root .dark & {
76
87
  @apply text-white before:border-b-primary-500 hover:bg-transparent;
77
88
  }
@@ -83,17 +94,19 @@
83
94
 
84
95
  :root .light & {
85
96
  @apply text-gray-600 bg-gray-100 hover:text-primary-600 hover:bg-primary-100
86
- focus-visible:ring-primary-500 focus-visible:ring-offset-gray-100;
97
+ focus-visible:ring-primary-500 focus-visible:ring-offset-gray-100;
87
98
  }
99
+
88
100
  :root .dark & {
89
101
  @apply text-gray-200 bg-gray-700 hover:bg-gray-800 focus-visible:ring-primary-500
90
- focus-visible:ring-offset-gray-700;
102
+ focus-visible:ring-offset-gray-700;
91
103
  }
92
104
 
93
105
  &.is-active {
94
106
  :root .light & {
95
107
  @apply text-white bg-primary-500;
96
108
  }
109
+
97
110
  :root .dark & {
98
111
  @apply text-white bg-primary-500;
99
112
  }
@@ -101,4 +114,3 @@
101
114
  }
102
115
  }
103
116
  }
104
-
package/css/text-link.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .uxf-text-link {
2
2
  @apply underline transition outline-none relative before:absolute before:-inset-1
3
- focus-visible:before:border-2 focus-visible:before:rounded-lg;
3
+ focus-visible:before:border-2 focus-visible:before:rounded-lg;
4
4
 
5
5
  :root .light & {
6
6
  @apply text-primary-500 hover:text-primary-400 focus-visible:before:border-primary-500;
package/css/textarea.css CHANGED
@@ -1,11 +1,12 @@
1
1
  .uxf-textarea {
2
2
  &__wrapper {
3
3
  @apply rounded-md text-base
4
- border p-2;
4
+ border p-2;
5
5
 
6
6
  :root .light & {
7
7
  @apply bg-gray-100 text-gray-900 border-gray-200;
8
8
  }
9
+
9
10
  :root .dark & {
10
11
  @apply bg-gray-800 text-gray-300 border-gray-700;
11
12
  }
@@ -17,6 +18,7 @@
17
18
  :root .light & {
18
19
  @apply placeholder:text-gray-400;
19
20
  }
21
+
20
22
  :root .dark & {
21
23
  @apply placeholder:text-gray-400;
22
24
  }
@@ -29,6 +31,7 @@
29
31
  :root .light & {
30
32
  @apply ring-primary-500;
31
33
  }
34
+
32
35
  :root .dark & {
33
36
  @apply ring-primary-500;
34
37
  }
@@ -37,10 +40,12 @@
37
40
 
38
41
  &.is-disabled {
39
42
  @apply cursor-not-allowed;
43
+
40
44
  .uxf-textarea__wrapper {
41
45
  :root .light & {
42
46
  @apply bg-gray-300;
43
47
  }
48
+
44
49
  :root .dark & {
45
50
  @apply bg-gray-600;
46
51
  }
@@ -55,7 +60,7 @@
55
60
  @apply cursor-text;
56
61
 
57
62
  .uxf-textarea__element {
58
- @apply cursor-text;
63
+ @apply cursor-not-allowed pointer-events-none;
59
64
  }
60
65
 
61
66
  .uxf-textarea__wrapper {
@@ -64,14 +69,11 @@
64
69
  :root .light & {
65
70
  @apply border-gray-300;
66
71
  }
72
+
67
73
  :root .dark & {
68
74
  @apply border-gray-500;
69
75
  }
70
76
  }
71
-
72
- .uxf-textarea__element {
73
- @apply cursor-not-allowed pointer-events-none;
74
- }
75
77
  }
76
78
 
77
79
  &.is-invalid {
@@ -88,6 +90,7 @@
88
90
  :root .light & {
89
91
  @apply text-error-500;
90
92
  }
93
+
91
94
  :root .dark & {
92
95
  @apply text-error-500;
93
96
  }
@@ -95,17 +98,21 @@
95
98
  }
96
99
  }
97
100
 
98
- :root .dark & {
99
- input:-webkit-autofill {
100
- &,
101
- &:hover,
102
- &:focus {
101
+ input:-webkit-autofill {
102
+ &,
103
+ &:hover,
104
+ &:focus {
105
+ margin: 1px 0;
106
+
107
+ :root .dark & {
103
108
  -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
104
109
  caret-color: white;
105
- margin: 1px 0;
106
110
  -webkit-text-fill-color: theme("colors.gray.300");
107
111
  }
112
+
113
+ :root .light & {
114
+ -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
115
+ }
108
116
  }
109
117
  }
110
118
  }
111
-
package/css/toggle.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .uxf-toggle {
2
2
  @apply relative inline-flex shrink-0 h-6 w-12 items-center rounded-full p-0.5 outline-none ring-offset-2
3
- focus-visible:ring-2 [&>*]:active:w-[30px];
3
+ focus-visible:ring-2 [&>*]:active:w-[30px];
4
4
 
5
5
  &__wrapper {
6
6
  @apply flex items-center justify-between space-x-4 p-4;
@@ -70,4 +70,3 @@
70
70
  }
71
71
  }
72
72
  }
73
-
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.65",
3
+ "version": "1.0.0-beta.67",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -15,9 +15,9 @@
15
15
  "dependencies": {
16
16
  "@floating-ui/react-dom": "^1.0.0",
17
17
  "@headlessui/react": "^1.7.2",
18
- "dayjs": "^1.11.6",
19
18
  "@uxf/core": "^3.1.0",
20
19
  "@uxf/styles": "^2.0.1",
20
+ "dayjs": "^1.11.6",
21
21
  "jump.js": "^1.0.2"
22
22
  },
23
23
  "devDependencies": {
package/tabs/tabs.d.ts CHANGED
@@ -3,5 +3,6 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
3
3
  defaultIndex?: number;
4
4
  onChange?: (index: number) => void;
5
5
  variant?: "default" | "segmented";
6
+ grow?: boolean;
6
7
  }
7
8
  export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
package/tabs/tabs.js CHANGED
@@ -32,7 +32,7 @@ const classes_1 = require("@uxf/core/constants/classes");
32
32
  const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
33
33
  exports.Tabs = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
34
34
  var _a, _b;
35
- const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.className);
35
+ const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
36
36
  const containerRef = (0, react_2.useRef)(null);
37
37
  const dragStyle = (0, useMouseDragToScroll_1.useMouseDragToScroll)(containerRef);
38
38
  const [hasOverflow, setHasOverflow] = (0, react_2.useState)();
package/tabs/tabs.stories.js CHANGED
@@ -12,22 +12,37 @@ exports.default = {
12
12
  };
13
13
  function Default() {
14
14
  const testTabs = (react_1.default.createElement(react_1.default.Fragment, null,
15
- react_1.default.createElement("div", null,
16
- react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
17
- react_1.default.createElement(tabs_1.Tabs, null,
15
+ react_1.default.createElement("div", { className: "flex items-center gap-6" },
16
+ react_1.default.createElement("div", null,
17
+ react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
18
+ react_1.default.createElement(tabs_1.Tabs, null,
19
+ react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
20
+ react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
21
+ react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
22
+ react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
23
+ react_1.default.createElement("div", null,
24
+ react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
25
+ react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
26
+ react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
27
+ react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
28
+ react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
29
+ react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
30
+ react_1.default.createElement("div", { className: "w-[600px]" },
31
+ react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
32
+ react_1.default.createElement(tabs_1.Tabs, { grow: true },
18
33
  react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
19
34
  react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
20
35
  react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
21
36
  react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
22
- react_1.default.createElement("div", null,
23
- react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
24
- react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
37
+ react_1.default.createElement("div", { className: "w-[600px]" },
38
+ react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
39
+ react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
25
40
  react_1.default.createElement("div", { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
26
41
  react_1.default.createElement("div", { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
27
42
  react_1.default.createElement("div", { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
28
43
  react_1.default.createElement("div", { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
29
44
  return (react_1.default.createElement(react_1.default.Fragment, null,
30
- react_1.default.createElement("div", { className: "light flex items-center gap-6 rounded bg-white p-8" }, testTabs),
31
- react_1.default.createElement("div", { className: "dark flex items-center gap-6 rounded bg-gray-900 p-8 text-white" }, testTabs)));
45
+ react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
46
+ react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));
32
47
  }
33
48
  exports.Default = Default;