@uxf/ui 10.0.0-beta.33 → 10.0.0-beta.34

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 (7) hide show
  1. package/css/calendar.css +56 -48
  2. package/css/time-picker.css +11 -15
  3. package/package.json +1 -1
  4. package/time-picker/time-picker-hour.js +1 -2
  5. package/time-picker/time-picker-hours.js +1 -1
  6. package/time-picker/time-picker-minute.js +1 -2
  7. package/time-picker/time-picker-minutes.js +1 -1
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,50 +51,33 @@
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
  }
@@ -104,14 +93,15 @@
104
93
  width: 32px;
105
94
 
106
95
  :root .light & {
107
- background-color: theme("backgroundColor.lightHigh");
108
- color: theme("colors.white");
96
+ --bg-color: theme("backgroundColor.lightHigh");
97
+ --color: theme("colors.white");
109
98
  }
110
99
 
111
100
  :root .dark & {
112
- background-color: theme("backgroundColor.transparent");
101
+ --bg-color: theme("backgroundColor.transparent");
102
+ --color: theme("colors.white");
103
+
113
104
  border: 2px solid theme("colors.darkMedium");
114
- color: theme("colors.white");
115
105
  }
116
106
  }
117
107
 
@@ -126,25 +116,29 @@
126
116
 
127
117
  &--not-current-month {
128
118
  :root .light & {
129
- background-color: theme("backgroundColor.gray.100");
130
- color: theme("colors.lightLow");
119
+ --bg-color: theme("backgroundColor.gray.100");
120
+ --color: theme("colors.lightLow");
131
121
  }
132
122
 
133
123
  :root .dark & {
134
- background-color: theme("backgroundColor.gray.800");
135
- color: theme("colors.darkLow");
124
+ --bg-color: theme("backgroundColor.gray.800");
125
+ --color: theme("colors.darkLow");
136
126
  }
137
127
  }
138
128
  }
139
129
 
140
- &__cell-month,
141
- &__cell-year {
142
- --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
130
+ &__cell-day {
131
+ &:nth-child(7) {
132
+ border-top-right-radius: var(--compensated-radii);
133
+ }
143
134
 
144
- &:first-child {
145
- border-top-left-radius: var(--compensated-radii);
135
+ &:nth-last-child(7) {
136
+ border-bottom-left-radius: var(--compensated-radii);
146
137
  }
138
+ }
147
139
 
140
+ &__cell-month,
141
+ &__cell-year {
148
142
  &:nth-child(3) {
149
143
  border-top-right-radius: var(--compensated-radii);
150
144
  }
@@ -152,9 +146,16 @@
152
146
  &:nth-last-child(3) {
153
147
  border-bottom-left-radius: var(--compensated-radii);
154
148
  }
149
+ }
155
150
 
156
- &:last-child {
157
- border-bottom-right-radius: var(--compensated-radii);
151
+ &__cell-hour,
152
+ &__cell-minute {
153
+ &:nth-child(6) {
154
+ border-top-right-radius: var(--compensated-radii);
155
+ }
156
+
157
+ &:nth-last-child(6) {
158
+ border-bottom-left-radius: var(--compensated-radii);
158
159
  }
159
160
  }
160
161
 
@@ -188,7 +189,9 @@
188
189
 
189
190
  &__days,
190
191
  &__year,
191
- &__decade {
192
+ &__decade,
193
+ &__hours,
194
+ &__minutes {
192
195
  border-radius: 6px;
193
196
  display: grid;
194
197
  gap: 1px;
@@ -212,4 +215,9 @@
212
215
  &__decade {
213
216
  grid-template-columns: repeat(3, minmax(0, 1fr));
214
217
  }
218
+
219
+ &__hours,
220
+ &__minutes {
221
+ grid-template-columns: repeat(6, minmax(0, 1fr));
222
+ }
215
223
  }
package/css/time-picker.css CHANGED
@@ -1,10 +1,17 @@
1
1
  .uxf-time-picker {
2
2
  &__global {
3
- @apply flex items-center justify-between px-4 w-[180px] mx-auto;
3
+ align-items: center;
4
+ display: flex;
5
+ justify-content: space-between;
6
+ margin: 0 auto;
7
+ padding: 0 theme("spacing.4");
8
+ width: 180px;
4
9
 
5
10
  &__column {
6
- @apply flex flex-col items-center shrink-0;
7
-
11
+ align-items: center;
12
+ display: flex;
13
+ flex-direction: column;
14
+ flex-shrink: 0;
8
15
  width: 48px;
9
16
 
10
17
  & > :nth-child(1),
@@ -16,17 +23,6 @@
16
23
 
17
24
  &__hours,
18
25
  &__minutes {
19
- @apply grid grid-cols-4 place-items-center gap-1 mx-auto;
20
-
21
- text-align: center;
22
- width: 200px;
23
- }
24
-
25
- :root .light & {
26
- @apply text-gray-900;
27
- }
28
-
29
- :root .dark & {
30
- @apply bg-gray-900 text-white;
26
+ width: 288px;
31
27
  }
32
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "10.0.0-beta.33",
3
+ "version": "10.0.0-beta.34",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/time-picker/time-picker-hour.js CHANGED
@@ -29,7 +29,6 @@ const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-cont
29
29
  const use_hour_1 = require("@uxf/datepicker/hooks/use-hour");
30
30
  const cx_1 = require("@uxf/core/utils/cx");
31
31
  const classes_1 = require("@uxf/core/constants/classes");
32
- const button_1 = require("../button");
33
32
  const TimePickerHour = (props) => {
34
33
  const hourRef = (0, react_1.useRef)(null);
35
34
  // eslint-disable-next-line react/destructuring-assignment
@@ -43,7 +42,7 @@ const TimePickerHour = (props) => {
43
42
  onHourSelect,
44
43
  onHourFocus,
45
44
  });
46
- return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__hour", isSelected && classes_1.CLASSES.IS_SELECTED), ref: hourRef }, props.label));
45
+ return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-hour", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: hourRef, tabIndex: tabIndex }, props.label));
47
46
  };
48
47
  exports.TimePickerHour = TimePickerHour;
49
48
  exports.TimePickerHour.displayName = "UxfUiTimePickerHour";
package/time-picker/time-picker-hours.js CHANGED
@@ -9,7 +9,7 @@ const time_picker_hour_1 = require("./time-picker-hour");
9
9
  const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
10
10
  const TimePickerHours = () => {
11
11
  const { hours } = (0, use_hours_1.useHours)({});
12
- return (react_1.default.createElement("div", { className: "uxf-time-picker__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
12
+ return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
13
13
  };
14
14
  exports.TimePickerHours = TimePickerHours;
15
15
  exports.TimePickerHours.displayName = "UxfUiTimePickerHours";
package/time-picker/time-picker-minute.js CHANGED
@@ -29,7 +29,6 @@ const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-cont
29
29
  const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
30
30
  const cx_1 = require("@uxf/core/utils/cx");
31
31
  const classes_1 = require("@uxf/core/constants/classes");
32
- const button_1 = require("../button");
33
32
  const TimePickerMinute = (props) => {
34
33
  const minuteRef = (0, react_1.useRef)(null);
35
34
  // eslint-disable-next-line react/destructuring-assignment
@@ -43,7 +42,7 @@ const TimePickerMinute = (props) => {
43
42
  onMinuteFocus,
44
43
  onMinuteSelect,
45
44
  });
46
- return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__minute", isSelected && classes_1.CLASSES.IS_SELECTED), ref: minuteRef }, props.label));
45
+ return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-minute", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: minuteRef, tabIndex: tabIndex }, props.label));
47
46
  };
48
47
  exports.TimePickerMinute = TimePickerMinute;
49
48
  exports.TimePickerMinute.displayName = "UxfUiTimePickerMinute";
package/time-picker/time-picker-minutes.js CHANGED
@@ -9,7 +9,7 @@ const time_picker_minute_1 = require("./time-picker-minute");
9
9
  const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
10
10
  const TimePickerMinutes = () => {
11
11
  const { minutes } = (0, use_minutes_1.useMinutes)({});
12
- return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
12
+ return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
13
13
  };
14
14
  exports.TimePickerMinutes = TimePickerMinutes;
15
15
  exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";