@jk-core/components 0.1.11 → 0.1.12

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 (27) hide show
  1. package/README.md +73 -0
  2. package/dist/Calendar/RangeCalendar.d.ts +11 -0
  3. package/dist/Calendar/SingleCalendar.d.ts +15 -0
  4. package/dist/Calendar/components/DateLabel/index.d.ts +13 -0
  5. package/dist/Calendar/components/DayTile/index.d.ts +9 -3
  6. package/dist/Calendar/components/MonthTile/index.d.ts +3 -1
  7. package/dist/Calendar/components/ViewSelector/index.d.ts +7 -0
  8. package/dist/Calendar/components/YearTile/index.d.ts +3 -1
  9. package/dist/Calendar/hooks/useCalendarNav.d.ts +2 -2
  10. package/dist/Calendar/hooks/useDateSelect.d.ts +2 -1
  11. package/dist/Calendar/index.d.ts +5 -4
  12. package/dist/Calendar/type.d.ts +1 -4
  13. package/dist/Calendar/utils/getWeeksInMonth.d.ts +1 -1
  14. package/dist/Calendar/utils/isInRange.d.ts +1 -1
  15. package/dist/index.d.ts +3 -4
  16. package/dist/index.js +921 -592
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.umd.cjs +11 -19
  19. package/dist/index.umd.cjs.map +1 -1
  20. package/package.json +7 -12
  21. package/dist/Button/index.d.ts +0 -1
  22. package/dist/style.css +0 -412
  23. package/dist/style.css.map +0 -1
  24. package/src/Calendar/scss/_calendar.scss +0 -146
  25. package/src/Calendar/scss/_tile.scss +0 -220
  26. package/src/Calendar/scss/_variables.scss +0 -91
  27. package/src/Calendar/scss/main.scss +0 -3
package/dist/style.css DELETED
@@ -1,412 +0,0 @@
1
- :root {
2
- --white: #ffffff;
3
- --black: #000000;
4
- --P-5: #eff5ff;
5
- --P-10: #d3e1fb;
6
- --P-20: #a7c4f7;
7
- --P-30: #7ca6f3;
8
- --P-40: #5089ef;
9
- --P-50: #246beb;
10
- --P-60: #1d56bc;
11
- --P-70: #16408d;
12
- --P-90: #07152f;
13
- --P-100: #000000;
14
- --S-5: #edf1f5;
15
- --S-10: #cdd7e4;
16
- --S-20: #b4c4d6;
17
- --S-30: #99b0cb;
18
- --S-40: #2a5c96;
19
- --S-50: #003675;
20
- --S-60: #002b5e;
21
- --S-70: #002036;
22
- --S-80: #00162f;
23
- --S-90: #000b17;
24
- --G-5: #f8f8f8;
25
- --G-10: #f0f0f0;
26
- --G-20: #e4e4e4;
27
- --G-30: #d8d8d8;
28
- --G-40: #c6c6c6;
29
- --G-50: #8e8e8e;
30
- --G-60: #717171;
31
- --G-70: #555555;
32
- --G-80: #2d2d2d;
33
- --G-90: #1d1d1d;
34
- --Point-5: #fdf2f3;
35
- --Point-10: #f8d6d8;
36
- --Point-20: #f5a3a8;
37
- --Point-30: #f1747c;
38
- --Point-40: #ec4651;
39
- --Point-50: #e71825;
40
- --Point-60: #b9131e;
41
- --Point-70: #8b0e16;
42
- --Point-80: #5c0a0f;
43
- --Point-90: #2e0507;
44
- --Warning-5: #fff8e9;
45
- --Warning-10: #ffeac1;
46
- --Warning-20: #ffe2a7;
47
- --Warning-30: #ffd47c;
48
- --Warning-40: #ffc550;
49
- --Warning-50: #ffb724;
50
- --Warning-60: #98690a;
51
- --Warning-70: #66490e;
52
- --Warning-80: #4d370b;
53
- --Warning-90: #332507;
54
- --Success-5: #eef7f0;
55
- --Success-10: #cee9d4;
56
- --Success-20: #b2dcbb;
57
- --Success-30: #8cca99;
58
- --Success-40: #33a14b;
59
- --Success-50: #008a1e;
60
- --Success-60: #006e18;
61
- --Success-70: #005312;
62
- --Success-80: #00370c;
63
- --Success-90: #002207;
64
- --Info-5: #e9f0ff;
65
- --Info-10: #d4e1ff;
66
- --Info-20: #a9c3ff;
67
- --Info-30: #7da4ff;
68
- --Info-40: #5286ff;
69
- --Info-50: #2768ff;
70
- --Info-60: #1f53cc;
71
- --Info-70: #173e99;
72
- --Info-80: #0c1f4d;
73
- --Info-90: #040a1a;
74
- --Red: #e40000;
75
- --Red2: #ffe4e4;
76
- --Green: #2fb400;
77
- --Green-2: #d7ffe0;
78
- --Orange: #ff8800;
79
- --Orange-5: #ffead1;
80
- --Orange-10: #ffdacc;
81
- --Orange-30: #ff8f66;
82
- --Orange-40: #ff6a33;
83
- --Orange-50: #ff4500;
84
- --Orange-60: #d53209;
85
- --Orange-70: #992900;
86
- --Orange-80: #661c00;
87
- --Orange-90: #330e00;
88
- --Modal-Shadow: #0000005a;
89
- --Modal-Background: #6666663a;
90
- --Calendar-Background: #ffffff;
91
- }
92
-
93
- button {
94
- border: none;
95
- background-color: transparent;
96
- user-select: none;
97
- -webkit-user-select: none;
98
- -moz-user-select: none;
99
- cursor: pointer;
100
- }
101
-
102
- .calendar {
103
- width: 100%;
104
- min-width: 300px;
105
- border: 1px solid var(--G-30);
106
- border-radius: 10px;
107
- overflow: hidden;
108
- color: var(--G-80);
109
- background-color: var(--white);
110
- }
111
- .calendar__close {
112
- display: flex;
113
- justify-content: flex-end;
114
- align-items: center;
115
- padding: 7px 10px 7px 0;
116
- }
117
- .calendar__close svg {
118
- width: 18px;
119
- height: 18px;
120
- cursor: pointer;
121
- }
122
-
123
- .view {
124
- position: relative;
125
- margin: 0 auto;
126
- width: 90%;
127
- display: flex;
128
- justify-content: space-between;
129
- align-items: center;
130
- background-color: #f3f4f8;
131
- border-radius: 10px;
132
- }
133
- .view__block {
134
- position: absolute;
135
- background-color: #fff;
136
- left: 0;
137
- height: 100%;
138
- border: 2px solid var(--G-30);
139
- width: 33.3%;
140
- border-radius: 10px;
141
- transition: 0.3s;
142
- }
143
- .view__block--second {
144
- left: 33%;
145
- }
146
- .view__block--last {
147
- left: 66.6%;
148
- }
149
- .view__selector {
150
- position: relative;
151
- height: 40px;
152
- flex: 1 0;
153
- display: flex;
154
- align-items: center;
155
- justify-content: center;
156
- color: var(--G-60);
157
- font-size: 1em;
158
- font-weight: 400;
159
- }
160
- .view__selector--selected {
161
- color: var(--G-80);
162
- font-size: 1em;
163
- font-weight: 600;
164
- }
165
-
166
- .nav {
167
- height: 60px;
168
- display: flex;
169
- justify-content: space-between;
170
- align-items: center;
171
- padding: 0 5px;
172
- border-bottom: 1px solid var(--G-30);
173
- font-size: 1.3em;
174
- font-weight: 400;
175
- }
176
- .nav__button {
177
- display: flex;
178
- align-items: center;
179
- justify-content: center;
180
- width: 40px;
181
- height: 40px;
182
- padding: 10px;
183
- border-radius: 100%;
184
- }
185
- @media (min-width: 1396px) {
186
- .nav__button:hover {
187
- background-color: var(--G-10);
188
- }
189
- }
190
- .nav__button:active {
191
- background-color: var(--G-30);
192
- }
193
- .nav__button:disabled {
194
- cursor: not-allowed;
195
- fill: var(--G-40);
196
- background-color: transparent;
197
- }
198
- .nav__label {
199
- flex: 1 0;
200
- display: flex;
201
- align-items: center;
202
- justify-content: space-around;
203
- font-size: 1.1em;
204
- font-weight: 400;
205
- }
206
- .nav__label--date {
207
- display: flex;
208
- align-items: center;
209
- justify-content: center;
210
- border-radius: 5px;
211
- padding: 5px 10px;
212
- font-weight: 400;
213
- font-size: 1em;
214
- }
215
- .nav__label--date svg {
216
- width: 15px;
217
- height: 15px;
218
- }
219
- .nav__label--date-selected {
220
- background-color: var(--S-10);
221
- }
222
-
223
- .day-tile {
224
- min-height: 310px;
225
- padding: 5px;
226
- background-color: var(--white);
227
- }
228
- .day-tile__tile {
229
- display: flex;
230
- flex-direction: column;
231
- justify-content: space-between;
232
- gap: 5px;
233
- }
234
- .day-tile__weeks {
235
- display: flex;
236
- justify-content: space-between;
237
- font-weight: 400;
238
- font-size: 1em;
239
- }
240
- .day-tile__weeks--date {
241
- flex: 1 0;
242
- display: flex;
243
- justify-content: center;
244
- align-items: center;
245
- min-width: 40px;
246
- padding: 5px 0;
247
- }
248
- .day-tile__week {
249
- display: flex;
250
- justify-content: space-between;
251
- }
252
- .day-tile__day {
253
- display: flex;
254
- justify-content: center;
255
- align-items: center;
256
- flex-direction: column;
257
- width: 100%;
258
- min-width: 40px;
259
- min-height: 40px;
260
- border-radius: 40px;
261
- padding: 5px;
262
- border: none;
263
- font-weight: 400;
264
- font-size: 1em;
265
- }
266
- @media (min-width: 1396px) {
267
- .day-tile__day:hover {
268
- background-color: var(--G-5);
269
- }
270
- }
271
- .day-tile__day:disabled {
272
- color: var(--G-40) !important;
273
- background-color: transparent !important;
274
- cursor: default;
275
- }
276
- .day-tile__day:active {
277
- background-color: var(--G-10);
278
- }
279
- .day-tile__day--today {
280
- color: var(--P-50);
281
- font-weight: 600;
282
- }
283
- .day-tile__day--selected {
284
- background-color: var(--P-50) !important;
285
- color: var(--white) !important;
286
- font-weight: 600;
287
- }
288
- .day-tile__day--before {
289
- color: var(--G-40);
290
- }
291
- .day-tile__day--tile {
292
- border-radius: 10px;
293
- gap: 5px;
294
- }
295
-
296
- .month-tile {
297
- min-height: 310px;
298
- padding: 5px;
299
- background-color: var(--white);
300
- display: grid;
301
- grid-template-columns: repeat(3, 1fr);
302
- grid-template-rows: repeat(4, 1fr);
303
- gap: 5px;
304
- }
305
- .month-tile__month {
306
- display: flex;
307
- flex-direction: column;
308
- justify-content: center;
309
- align-items: center;
310
- padding: 5px;
311
- border-radius: 10px;
312
- }
313
- .month-tile__month svg {
314
- width: 15px;
315
- height: 15px;
316
- cursor: pointer;
317
- }
318
- @media (min-width: 1396px) {
319
- .month-tile__month:hover {
320
- background-color: var(--G-5);
321
- }
322
- }
323
- .month-tile__month:active {
324
- background-color: var(--G-10);
325
- }
326
- .month-tile__month--selected {
327
- background-color: var(--P-50) !important;
328
- color: var(--white) !important;
329
- }
330
- .month-tile__month--today {
331
- color: var(--P-50);
332
- font-weight: 600;
333
- }
334
- .month-tile__month--tile {
335
- justify-content: flex-start;
336
- gap: 5px;
337
- }
338
-
339
- .year-tile {
340
- min-height: 310px;
341
- padding: 5px;
342
- background-color: var(--white);
343
- position: relative;
344
- height: 310px;
345
- display: flex;
346
- flex-direction: column;
347
- align-items: center;
348
- overflow: auto;
349
- gap: 10px;
350
- }
351
- .year-tile::-webkit-scrollbar {
352
- display: none;
353
- }
354
- .year-tile__blank {
355
- height: calc(50% - 40px);
356
- flex-shrink: 0;
357
- }
358
- .year-tile__blank:last-child {
359
- height: 50%;
360
- }
361
- .year-tile__year {
362
- min-width: 50%;
363
- display: flex;
364
- flex-direction: column;
365
- align-items: center;
366
- justify-content: center;
367
- min-height: 40px;
368
- border-radius: 6px;
369
- flex-shrink: 0;
370
- overflow: hidden;
371
- font-weight: 400;
372
- font-size: 1.2em;
373
- }
374
- @media (min-width: 1396px) {
375
- .year-tile__year:hover {
376
- background-color: var(--P-5);
377
- }
378
- }
379
- .year-tile__year:active {
380
- background-color: var(--P-10);
381
- }
382
- .year-tile__year--border {
383
- border: 1px solid var(--G-30);
384
- background-color: var(--P-5);
385
- }
386
- @media (min-width: 1396px) {
387
- .year-tile__year--border:hover {
388
- background-color: var(--P-10);
389
- }
390
- }
391
- .year-tile__year--year {
392
- height: 40px;
393
- display: flex;
394
- align-items: center;
395
- justify-content: center;
396
- }
397
- .year-tile__year--selected {
398
- color: var(--white);
399
- background-color: var(--P-50) !important;
400
- }
401
- .year-tile__year--tile {
402
- display: flex;
403
- align-items: center;
404
- justify-content: center;
405
- min-height: 40px;
406
- color: var(--G-80);
407
- width: 100%;
408
- background-color: var(--white);
409
- border-top: var(--P-50);
410
- }
411
-
412
- /*# sourceMappingURL=style.css.map */
package/dist/style.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/Calendar/scss/_variables.scss","../src/Calendar/scss/_calendar.scss","../src/styles/mediaQuery.scss","../src/Calendar/scss/_tile.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvFF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AC7FF;ED+FE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;;;AE5IN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADzCF;EC2CE;IAEI;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;ADrGJ;ECwGE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADvKF;ECyKE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;;ADrLJ;ECuLI;IAEI;;;AAKN;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
package/src/Calendar/scss/_calendar.scss DELETED
@@ -1,146 +0,0 @@
1
- @use "../../styles/mediaQuery.scss" as media;
2
-
3
- button {
4
- border: none;
5
- background-color: transparent;
6
- user-select: none;
7
- -webkit-user-select: none;
8
- -moz-user-select: none;
9
- cursor: pointer;
10
- }
11
-
12
- .calendar {
13
- width: 100%;
14
- min-width: 300px;
15
- border: 1px solid var(--G-30);
16
- border-radius: 10px;
17
- overflow: hidden;
18
- color: var(--G-80);
19
- background-color: var(--white);
20
-
21
- &__close {
22
- display: flex;
23
- justify-content: flex-end;
24
- align-items: center;
25
- padding: 7px 10px 7px 0;
26
-
27
- svg {
28
- width: 18px;
29
- height: 18px;
30
- cursor: pointer;
31
- }
32
- }
33
- }
34
-
35
- .view {
36
- position: relative;
37
- margin: 0 auto;
38
- width: 90%;
39
- display: flex;
40
- justify-content: space-between;
41
- align-items: center;
42
- background-color: #f3f4f8;
43
- border-radius: 10px;
44
-
45
- &__block {
46
- position: absolute;
47
- background-color: #fff;
48
- left: 0;
49
- height: 100%;
50
- border: 2px solid var(--G-30);
51
- width: 33.3%;
52
- border-radius: 10px;
53
- transition: 0.3s;
54
-
55
- &--second {
56
- left: 33%;
57
- }
58
-
59
- &--last {
60
- left: 66.6%;
61
- }
62
- }
63
-
64
- &__selector {
65
- position: relative;
66
- height: 40px;
67
- flex: 1 0;
68
- display: flex;
69
- align-items: center;
70
- justify-content: center;
71
- color: var(--G-60);
72
- font-size: 1em;
73
- font-weight: 400;
74
-
75
- &--selected {
76
- color: var(--G-80);
77
- font-size: 1em;
78
- font-weight: 600;
79
- }
80
- }
81
- }
82
-
83
- .nav {
84
- height: 60px;
85
- display: flex;
86
- justify-content: space-between;
87
- align-items: center;
88
- padding: 0 5px;
89
- border-bottom: 1px solid var(--G-30);
90
- font-size: 1.3em;
91
- font-weight: 400;
92
-
93
- &__button {
94
- display: flex;
95
- align-items: center;
96
- justify-content: center;
97
- width: 40px;
98
- height: 40px;
99
- padding: 10px;
100
- border-radius: 100%;
101
-
102
- &:hover {
103
- @include media.pc {
104
- background-color: var(--G-10);
105
- }
106
- }
107
-
108
- &:active {
109
- background-color: var(--G-30);
110
- }
111
-
112
- &:disabled {
113
- cursor: not-allowed;
114
- fill: var(--G-40);
115
- background-color: transparent;
116
- }
117
- }
118
-
119
- &__label {
120
- flex: 1 0;
121
- display: flex;
122
- align-items: center;
123
- justify-content: space-around;
124
- font-size: 1.1em;
125
- font-weight: 400;
126
-
127
- &--date {
128
- display: flex;
129
- align-items: center;
130
- justify-content: center;
131
- border-radius: 5px;
132
- padding: 5px 10px;
133
- font-weight: 400;
134
- font-size: 1em;
135
-
136
- svg {
137
- width: 15px;
138
- height: 15px;
139
- }
140
- }
141
-
142
- &--date-selected {
143
- background-color: var(--S-10);
144
- }
145
- }
146
- }