@uxf/ui 10.0.0-beta.4 → 10.0.0-beta.41

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 (104) hide show
  1. package/_file-input-base/file-input-base.js +9 -1
  2. package/_select-base/_select-base.d.ts +1 -1
  3. package/_select-base/_select-base.js +4 -3
  4. package/calendar/calendar-day-cell.d.ts +3 -0
  5. package/calendar/calendar-day-cell.js +14 -14
  6. package/{date-picker/date-picker-navigation.d.ts → calendar/calendar-navigation.d.ts} +2 -3
  7. package/{date-picker/date-picker-navigation.js → calendar/calendar-navigation.js} +6 -6
  8. package/calendar/calendar-provider.js +1 -1
  9. package/calendar/calendar.d.ts +5 -0
  10. package/calendar/calendar.js +5 -8
  11. package/calendar/index.d.ts +4 -1
  12. package/calendar/index.js +5 -15
  13. package/chip/chip.d.ts +5 -7
  14. package/chip/chip.js +22 -7
  15. package/chip/chip.spec.d.ts +1 -0
  16. package/chip/chip.spec.js +9 -0
  17. package/chip/chip.stories.d.ts +1 -1
  18. package/chip/chip.stories.js +37 -28
  19. package/chip/index.d.ts +3 -1
  20. package/chip/index.js +3 -15
  21. package/chip/theme.d.ts +3 -0
  22. package/css/calendar.css +116 -51
  23. package/css/chip.css +217 -318
  24. package/css/date-picker.css +10 -2
  25. package/css/date-range-picker.css +21 -0
  26. package/css/flash-messages.css +133 -9
  27. package/css/image-gallery.css +13 -9
  28. package/css/textarea.css +66 -74
  29. package/css/time-picker.css +11 -15
  30. package/date-picker/date-picker-decade.js +6 -6
  31. package/date-picker/date-picker-month.js +6 -6
  32. package/date-picker/date-picker-year.js +2 -2
  33. package/date-picker/date-picker.d.ts +1 -0
  34. package/date-picker/date-picker.js +1 -0
  35. package/date-picker-input/date-picker-input.js +3 -1
  36. package/date-range-picker/date-range-picker-content.d.ts +2 -0
  37. package/date-range-picker/date-range-picker-content.js +55 -0
  38. package/date-range-picker/date-range-picker-decade.d.ts +6 -0
  39. package/date-range-picker/date-range-picker-decade.js +72 -0
  40. package/date-range-picker/date-range-picker-month.d.ts +8 -0
  41. package/date-range-picker/date-range-picker-month.js +69 -0
  42. package/date-range-picker/date-range-picker-year.d.ts +7 -0
  43. package/date-range-picker/date-range-picker-year.js +80 -0
  44. package/date-range-picker/date-range-picker.d.ts +9 -0
  45. package/date-range-picker/date-range-picker.js +50 -0
  46. package/date-range-picker/date-range-picker.spec.d.ts +1 -0
  47. package/date-range-picker/date-range-picker.spec.js +9 -0
  48. package/date-range-picker/date-range-picker.stories.d.ts +7 -0
  49. package/date-range-picker/date-range-picker.stories.js +43 -0
  50. package/date-range-picker/index.d.ts +3 -0
  51. package/date-range-picker/index.js +5 -0
  52. package/date-range-picker/types.d.ts +5 -0
  53. package/date-range-picker-input/date-range-picker-input.d.ts +15 -0
  54. package/date-range-picker-input/date-range-picker-input.js +62 -0
  55. package/date-range-picker-input/date-range-picker-input.spec.d.ts +1 -0
  56. package/date-range-picker-input/date-range-picker-input.spec.js +9 -0
  57. package/date-range-picker-input/date-range-picker-input.stories.d.ts +10 -0
  58. package/date-range-picker-input/date-range-picker-input.stories.js +53 -0
  59. package/date-range-picker-input/index.d.ts +2 -0
  60. package/date-range-picker-input/index.js +5 -0
  61. package/datetime-picker/datetime-picker.js +2 -2
  62. package/datetime-picker-input/datetime-picker-input.js +3 -1
  63. package/dropzone/dropzone-input.js +10 -6
  64. package/flash-messages/flash-message.js +1 -1
  65. package/flash-messages/flash-messages.js +44 -10
  66. package/flash-messages/flash-messages.stories.js +12 -0
  67. package/image-gallery/components/close-button.d.ts +2 -1
  68. package/image-gallery/components/close-button.js +2 -3
  69. package/image-gallery/components/gallery.d.ts +6 -3
  70. package/image-gallery/components/gallery.js +15 -7
  71. package/image-gallery/components/next-button.d.ts +7 -0
  72. package/image-gallery/components/next-button.js +14 -0
  73. package/image-gallery/components/prev-button.d.ts +7 -0
  74. package/image-gallery/components/prev-button.js +14 -0
  75. package/image-gallery/image-gallery.d.ts +6 -1
  76. package/image-gallery/image-gallery.js +1 -1
  77. package/image-gallery/image-gallery.stories.js +5 -1
  78. package/multi-combobox/_multi-combobox-base.js +2 -1
  79. package/multi-combobox/types.d.ts +3 -0
  80. package/multi-select/_multi-select-base.js +2 -1
  81. package/multi-select/types.d.ts +3 -2
  82. package/package.json +12 -9
  83. package/radio-group/index.d.ts +1 -1
  84. package/radio-group/radio-group.d.ts +3 -3
  85. package/radio-group/radio-group.js +2 -2
  86. package/radio-group/radio-group.stories.js +4 -4
  87. package/raster-image/raster-image.js +1 -1
  88. package/textarea/textarea.js +5 -5
  89. package/time-picker/time-picker-hour.js +3 -3
  90. package/time-picker/time-picker-hours.js +1 -1
  91. package/time-picker/time-picker-minute.js +3 -3
  92. package/time-picker/time-picker-minutes.js +1 -1
  93. package/time-picker/time-picker.d.ts +1 -0
  94. package/time-picker/time-picker.js +3 -2
  95. package/time-picker-input/time-picker-input.js +3 -1
  96. package/tw-tokens/tw-z-index.d.ts +1 -0
  97. package/tw-tokens/tw-z-index.js +1 -0
  98. package/utils/mocks/uploadFIle.mock.js +1 -1
  99. package/utils/storybook-config.d.ts +1 -1
  100. package/utils/tailwind-config.js +1 -0
  101. package/image-gallery/components/arrow-button.d.ts +0 -7
  102. package/image-gallery/components/arrow-button.js +0 -14
  103. package/select/theme.d.ts +0 -5
  104. /package/{select/theme.js → date-range-picker/types.js} +0 -0
package/css/calendar.css CHANGED
@@ -1,6 +1,12 @@
1
1
  .uxf-calendar {
2
- &__cell-day {
2
+ &__cell {
3
+ --bg-color: unset;
4
+ --color: unset;
5
+ --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
6
+
3
7
  align-items: center;
8
+ background-color: var(--bg-color);
9
+ color: var(--color);
4
10
  display: flex;
5
11
  font-size: 14px;
6
12
  font-weight: theme("fontWeight.medium");
@@ -12,29 +18,29 @@
12
18
  text-align: center;
13
19
 
14
20
  :root .light & {
15
- background-color: theme("backgroundColor.white");
16
- color: theme("colors.lightMedium");
21
+ --bg-color: theme("backgroundColor.white");
22
+ --color: theme("colors.lightMedium");
17
23
  }
18
24
 
19
25
  :root .dark & {
20
- background-color: theme("backgroundColor.gray.900");
21
- color: theme("colors.darkMedium");
26
+ --bg-color: theme("backgroundColor.gray.900");
27
+ --color: theme("colors.darkMedium");
22
28
  }
23
29
 
24
30
  &:hover {
25
31
  :root .light & {
26
- background-color: theme("backgroundColor.gray.50");
32
+ --bg-color: theme("backgroundColor.gray.50");
27
33
  }
28
34
 
29
35
  :root .dark & {
30
- background-color: theme("backgroundColor.gray.950");
36
+ --bg-color: theme("backgroundColor.gray.950");
31
37
  }
32
38
  }
33
39
 
34
40
  &:focus-visible {
35
41
  &::before {
36
- border: 2px solid theme("colors.primary.500");
37
42
  border-radius: 2px;
43
+ border: 2px solid theme("colors.primary.500");
38
44
  content: "";
39
45
  inset: 0;
40
46
  position: absolute;
@@ -45,56 +51,59 @@
45
51
  cursor: auto;
46
52
 
47
53
  :root .light & {
48
- background-color: theme("backgroundColor.gray.100");
54
+ --bg-color: theme("backgroundColor.gray.100");
49
55
  }
50
56
 
51
57
  :root .dark & {
52
- background-color: theme("backgroundColor.gray.800");
58
+ --bg-color: theme("backgroundColor.gray.800");
53
59
  }
54
60
  }
55
61
 
56
- --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
57
-
58
62
  &:first-child {
59
63
  border-top-left-radius: var(--compensated-radii);
60
64
  }
61
65
 
62
- &:nth-child(7) {
63
- border-top-right-radius: var(--compensated-radii);
64
- }
65
-
66
- &:nth-last-child(7) {
67
- border-bottom-left-radius: var(--compensated-radii);
68
- }
69
-
70
66
  &:last-child {
71
67
  border-bottom-right-radius: var(--compensated-radii);
72
68
  }
73
69
 
74
70
  &--selected {
75
- :root .light & {
76
- background-color: theme("backgroundColor.primary.500");
77
- color: theme("colors.white");
78
- }
79
-
71
+ :root .light &,
80
72
  :root .dark & {
81
- background-color: theme("backgroundColor.primary.500");
82
- color: theme("colors.white");
73
+ --bg-color: theme("backgroundColor.primary.500");
74
+ --color: theme("colors.white");
83
75
  }
84
76
 
85
77
  &:hover {
86
- :root .light & {
87
- background-color: theme("backgroundColor.primary.500");
88
- }
89
-
78
+ :root .light &,
90
79
  :root .dark & {
91
- background-color: theme("backgroundColor.primary.500");
80
+ --bg-color: theme("backgroundColor.primary.500");
92
81
  }
93
82
  }
94
83
  }
95
84
 
85
+ &--inside-range {
86
+ background-color: theme("backgroundColor.primary.100");
87
+ color: theme("colors.lightMedium");
88
+
89
+ :root .dark & {
90
+ background-color: theme("backgroundColor.primary.900");
91
+ color: theme("colors.darkMedium");
92
+ }
93
+ }
94
+
95
+ &--is-hovered {
96
+ background-color: theme("backgroundColor.primary.100");
97
+ color: theme("colors.lightMedium");
98
+
99
+ :root .dark & {
100
+ background-color: theme("backgroundColor.primary.900");
101
+ color: theme("colors.darkMedium");
102
+ }
103
+ }
104
+
96
105
  &--today {
97
- .uxf-calendar__cell-day__inner {
106
+ .uxf-calendar__cell__inner {
98
107
  align-items: center;
99
108
  border-radius: 999px;
100
109
  display: inline-flex;
@@ -104,47 +113,67 @@
104
113
  width: 32px;
105
114
 
106
115
  :root .light & {
107
- background-color: theme("backgroundColor.lightHigh");
108
- color: theme("colors.white");
116
+ --bg-color: theme("backgroundColor.lightHigh");
117
+ --color: theme("colors.white");
109
118
  }
110
119
 
111
120
  :root .dark & {
112
- background-color: theme("backgroundColor.transparent");
121
+ --bg-color: theme("backgroundColor.transparent");
122
+ --color: theme("colors.white");
123
+
113
124
  border: 2px solid theme("colors.darkMedium");
114
- color: theme("colors.white");
115
125
  }
116
126
  }
117
127
 
118
- &.uxf-calendar__cell-day--selected {
119
- .uxf-calendar__cell-day__inner {
128
+ &.uxf-calendar__cell--selected {
129
+ .uxf-calendar__cell__inner {
120
130
  background-color: theme("backgroundColor.transparent");
121
131
  color: theme("colors.white");
122
132
  border: 2px solid theme("colors.darkMedium");
123
133
  }
124
134
  }
135
+
136
+ &.uxf-calendar__cell--inside-range {
137
+ .uxf-calendar__cell__inner {
138
+ background-color: theme("backgroundColor.lightHigh");
139
+ border: 2px solid theme("colors.lightHigh");
140
+ border-radius: 999px;
141
+ color: theme("colors.white");
142
+
143
+ :root .dark & {
144
+ background-color: theme("backgroundColor.transparent");
145
+ border: 2px solid theme("colors.darkMedium");
146
+ color: theme("colors.white");
147
+ }
148
+ }
149
+ }
125
150
  }
126
151
 
127
152
  &--not-current-month {
128
153
  :root .light & {
129
- background-color: theme("backgroundColor.gray.100");
130
- color: theme("colors.lightLow");
154
+ --bg-color: theme("backgroundColor.gray.100");
155
+ --color: theme("colors.lightLow");
131
156
  }
132
157
 
133
158
  :root .dark & {
134
- background-color: theme("backgroundColor.gray.800");
135
- color: theme("colors.darkLow");
159
+ --bg-color: theme("backgroundColor.gray.800");
160
+ --color: theme("colors.darkLow");
136
161
  }
137
162
  }
138
163
  }
139
164
 
140
- &__cell-month,
141
- &__cell-year {
142
- --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
165
+ &__cell-day {
166
+ &:nth-child(7) {
167
+ border-top-right-radius: var(--compensated-radii);
168
+ }
143
169
 
144
- &:first-child {
145
- border-top-left-radius: var(--compensated-radii);
170
+ &:nth-last-child(7) {
171
+ border-bottom-left-radius: var(--compensated-radii);
146
172
  }
173
+ }
147
174
 
175
+ &__cell-month,
176
+ &__cell-year {
148
177
  &:nth-child(3) {
149
178
  border-top-right-radius: var(--compensated-radii);
150
179
  }
@@ -152,9 +181,16 @@
152
181
  &:nth-last-child(3) {
153
182
  border-bottom-left-radius: var(--compensated-radii);
154
183
  }
184
+ }
155
185
 
156
- &:last-child {
157
- border-bottom-right-radius: var(--compensated-radii);
186
+ &__cell-hour,
187
+ &__cell-minute {
188
+ &:nth-child(6) {
189
+ border-top-right-radius: var(--compensated-radii);
190
+ }
191
+
192
+ &:nth-last-child(6) {
193
+ border-bottom-left-radius: var(--compensated-radii);
158
194
  }
159
195
  }
160
196
 
@@ -188,7 +224,9 @@
188
224
 
189
225
  &__days,
190
226
  &__year,
191
- &__decade {
227
+ &__decade,
228
+ &__hours,
229
+ &__minutes {
192
230
  border-radius: 6px;
193
231
  display: grid;
194
232
  gap: 1px;
@@ -212,4 +250,31 @@
212
250
  &__decade {
213
251
  grid-template-columns: repeat(3, minmax(0, 1fr));
214
252
  }
253
+
254
+ &__hours,
255
+ &__minutes {
256
+ grid-template-columns: repeat(6, minmax(0, 1fr));
257
+ }
258
+ }
259
+
260
+ .uxf-calendar-navigation {
261
+ align-items: center;
262
+ display: flex;
263
+ justify-content: space-between;
264
+ margin-bottom: theme("spacing.4");
265
+
266
+ &__title {
267
+ font-size: 14px;
268
+ font-weight: theme("fontWeight.medium");
269
+ text-align: center;
270
+
271
+ :root .light & {
272
+ @apply text-lightMedium is-hoverable:text-lightHigh;
273
+ }
274
+
275
+ :root .dark & {
276
+ @apply text-darkMedium is-hoverable:text-darkHigh;
277
+ }
278
+
279
+ }
215
280
  }