@jk-core/components 0.0.63 → 0.0.65

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 (33) hide show
  1. package/dist/index.js +399 -471
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.umd.cjs +19 -10
  4. package/dist/index.umd.cjs.map +1 -1
  5. package/dist/main.d.ts +1 -0
  6. package/dist/style.css +402 -1
  7. package/dist/style.css.map +1 -0
  8. package/package.json +10 -5
  9. package/src/Calendar/{Calendar.module.scss → scss/_calendar.scss} +9 -0
  10. package/src/Calendar/scss/_tile.scss +214 -0
  11. package/src/Calendar/scss/main.scss +3 -0
  12. package/src/Calendar/components/DayTile/DayTile.module.scss +0 -79
  13. package/src/Calendar/components/DayTile/index.tsx +0 -52
  14. package/src/Calendar/components/MonthTile/MonthTile.module.scss +0 -44
  15. package/src/Calendar/components/MonthTile/index.tsx +0 -38
  16. package/src/Calendar/components/YearTile/YearTile.module.scss +0 -85
  17. package/src/Calendar/components/YearTile/index.tsx +0 -60
  18. package/src/Calendar/components/mixin.module.scss +0 -5
  19. package/src/Calendar/hooks/useCalendarNav.ts +0 -80
  20. package/src/Calendar/hooks/useDateSelect.ts +0 -47
  21. package/src/Calendar/index.tsx +0 -167
  22. package/src/Calendar/style.css +0 -4
  23. package/src/Calendar/type.ts +0 -6
  24. package/src/Calendar/utils/getWeeksInMonth.ts +0 -45
  25. package/src/Calendar/utils/isInRange.ts +0 -8
  26. package/src/Calendar/utils/isSameDay.ts +0 -21
  27. package/src/assets/close.svg +0 -16
  28. package/src/assets/drop-arrow.svg +0 -3
  29. package/src/index.tsx +0 -3
  30. package/src/styles/mediaQuery.scss +0 -22
  31. package/src/svg.d.ts +0 -6
  32. package/src/vite-env.d.ts +0 -1
  33. /package/src/{styles/color.scss → Calendar/scss/_variables.scss} +0 -0
package/dist/style.css CHANGED
@@ -1 +1,402 @@
1
- .Calendar-module__calendar___SH8Oi{width:100%;min-width:300px;border:1px solid var(--G-30);border-radius:10px;overflow:hidden;color:var(--G-80);background-color:var(--white)}.Calendar-module__calendar__close___JvLIp{display:flex;justify-content:flex-end;align-items:center;padding:5px 5px 0 0}.Calendar-module__calendar__close___JvLIp svg{width:15px;height:15px;cursor:pointer}.Calendar-module__view___7exi2{position:relative;margin:0 auto;width:90%;display:flex;justify-content:space-between;align-items:center;background-color:#f3f4f8;border-radius:10px}.Calendar-module__view__block___WoTRz{position:absolute;background-color:#fff;left:0;height:100%;border:2px solid var(--G-30);width:33.3%;border-radius:10px;transition:.3s}.Calendar-module__view__block--second___g9PBT{left:33%}.Calendar-module__view__block--last___lTIPU{left:66.6%}.Calendar-module__view__selector___2scy1{position:relative;height:40px;flex:1 0;display:flex;align-items:center;justify-content:center;color:var(--G-60);font-size:1em;font-weight:400}.Calendar-module__view__selector--selected___-RTyq{color:var(--G-80);font-size:1em;font-weight:600}.Calendar-module__nav___XySNj{height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 5px;border-bottom:1px solid var(--G-30);font-size:1.3em;font-weight:400}.Calendar-module__nav__button___1p9K2{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:10px;border-radius:100%}.Calendar-module__nav__button___1p9K2:active{background-color:var(--G-30)}.Calendar-module__nav__button___1p9K2:disabled{cursor:not-allowed;fill:var(--G-40);background-color:transparent}.Calendar-module__nav__label___1FuFb{flex:1 0;display:flex;align-items:center;justify-content:space-around;font-size:1.1em;font-weight:400}.Calendar-module__nav__label--date___-aPkb{display:flex;align-items:center;justify-content:center;border-radius:5px;padding:5px 10px;font-size:1.2em;font-weight:400}.Calendar-module__nav__label--date___-aPkb svg{width:15px;height:15px}.Calendar-module__nav__label--date-selected___Hzv6l{background-color:var(--S-10)}.DayTile-module__body___lsW-K{min-height:310px;padding:5px;background-color:var(--white)}.DayTile-module__body__tile___9WIwL{display:flex;flex-direction:column;justify-content:space-between;gap:5px}.DayTile-module__body__weeks___DSCMe{display:flex;justify-content:space-between;font-weight:400;font-size:1em}.DayTile-module__body__weeks--date___IaXNj{flex:1 0;display:flex;justify-content:center;align-items:center;min-width:40px;padding:5px 0}.DayTile-module__body__week___asdpo{display:flex;justify-content:space-between}.DayTile-module__body__day___dP1SN{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;min-width:40px;min-height:40px;border-radius:100%;padding:5px;border:none;font-weight:400;font-size:1em}@media (min-width: 1396px){.DayTile-module__body__day___dP1SN:hover{background-color:var(--G-5)}}.DayTile-module__body__day___dP1SN:active{background-color:var(--G-10)}.DayTile-module__body__day--today___A2Enr{color:var(--P-50);font-weight:600}.DayTile-module__body__day--selected___vlYLu{background-color:var(--P-50)!important;color:var(--white)!important;font-weight:600}.DayTile-module__body__day--before___sHkix{color:var(--G-40)}.DayTile-module__body__day--tile___XDQvk{border-radius:10px;gap:5px}.MonthTile-module__body___-RwSa{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:5px;min-height:310px;padding:5px;background-color:var(--white)}.MonthTile-module__body__month___0Jcso{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px;border-radius:10px}.MonthTile-module__body__month___0Jcso svg{width:15px;height:15px;cursor:pointer}.MonthTile-module__body__month___0Jcso:active{background-color:var(--G-10)}.MonthTile-module__body__month--selected___BlifI{background-color:var(--P-50)!important;color:var(--white)!important}.MonthTile-module__body__month--today___Pwqqz{color:var(--P-50);font-weight:600}.MonthTile-module__body__month--tile___mmoOD{justify-content:flex-start;gap:5px}.YearTile-module__body___X4k9L{min-height:310px;padding:5px;background-color:var(--white);position:relative;height:310px;display:flex;flex-direction:column;align-items:center;overflow:auto;gap:10px}.YearTile-module__body___X4k9L::-webkit-scrollbar{display:none}.YearTile-module__body__blank___hxBpz{height:calc(50% - 40px);flex-shrink:0}.YearTile-module__body__blank___hxBpz:last-child{height:50%}.YearTile-module__body__year___TTehK{min-width:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40px;border-radius:6px;flex-shrink:0;overflow:hidden;font-weight:400;font-size:1.2em}@media (min-width: 1396px){.YearTile-module__body__year___TTehK:hover{background-color:var(--P-5)}}.YearTile-module__body__year___TTehK:active{background-color:var(--P-10)}.YearTile-module__body__year--border___XcEpg{border:1px solid var(--G-30);background-color:var(--P-5)}@media (min-width: 1396px){.YearTile-module__body__year--border___XcEpg:hover{background-color:var(--P-10)}}.YearTile-module__body__year--year___YaqCc{height:40px;display:flex;align-items:center;justify-content:center}.YearTile-module__body__year--selected___Ietiw{color:var(--white);background-color:var(--P-50)!important}.YearTile-module__body__year--tile___v4tAt{display:flex;align-items:center;justify-content:center;min-height:40px;color:var(--G-80);width:100%;background-color:var(--white);border-top:var(--P-50)}body{--Calendar-Background: #ffffff;--Calendar-Test: #ffffff}:root{--white: #ffffff;--black: #000000;--P-5: #eff5ff;--P-10: #d3e1fb;--P-20: #a7c4f7;--P-30: #7ca6f3;--P-40: #5089ef;--P-50: #246beb;--P-60: #1d56bc;--P-70: #16408d;--P-90: #07152f;--P-100: #000000;--S-5: #edf1f5;--S-10: #cdd7e4;--S-20: #b4c4d6;--S-30: #99b0cb;--S-40: #2a5c96;--S-50: #003675;--S-60: #002b5e;--S-70: #002036;--S-80: #00162f;--S-90: #000b17;--G-5: #f8f8f8;--G-10: #f0f0f0;--G-20: #e4e4e4;--G-30: #d8d8d8;--G-40: #c6c6c6;--G-50: #8e8e8e;--G-60: #717171;--G-70: #555555;--G-80: #2d2d2d;--G-90: #1d1d1d;--Point-5: #fdf2f3;--Point-10: #f8d6d8;--Point-20: #f5a3a8;--Point-30: #f1747c;--Point-40: #ec4651;--Point-50: #e71825;--Point-60: #b9131e;--Point-70: #8b0e16;--Point-80: #5c0a0f;--Point-90: #2e0507;--Warning-5: #fff8e9;--Warning-10: #ffeac1;--Warning-20: #ffe2a7;--Warning-30: #ffd47c;--Warning-40: #ffc550;--Warning-50: #ffb724;--Warning-60: #98690a;--Warning-70: #66490e;--Warning-80: #4d370b;--Warning-90: #332507;--Success-5: #eef7f0;--Success-10: #cee9d4;--Success-20: #b2dcbb;--Success-30: #8cca99;--Success-40: #33a14b;--Success-50: #008a1e;--Success-60: #006e18;--Success-70: #005312;--Success-80: #00370c;--Success-90: #002207;--Info-5: #e9f0ff;--Info-10: #d4e1ff;--Info-20: #a9c3ff;--Info-30: #7da4ff;--Info-40: #5286ff;--Info-50: #2768ff;--Info-60: #1f53cc;--Info-70: #173e99;--Info-80: #0c1f4d;--Info-90: #040a1a;--Red: #e40000;--Red2: #ffe4e4;--Green: #2fb400;--Green-2: #d7ffe0;--Orange: #ff8800;--Orange-5: #ffead1;--Orange-10: #ffdacc;--Orange-30: #ff8f66;--Orange-40: #ff6a33;--Orange-50: #ff4500;--Orange-60: #d53209;--Orange-70: #992900;--Orange-80: #661c00;--Orange-90: #330e00;--Modal-Shadow: #0000005a;--Modal-Background: #6666663a;--Calendar-Background: #ffffff}
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: 5px 5px 0 0;
116
+ }
117
+ .calendar__close svg {
118
+ width: 15px;
119
+ height: 15px;
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
+ .nav__button:active {
186
+ background-color: var(--G-30);
187
+ }
188
+ .nav__button:disabled {
189
+ cursor: not-allowed;
190
+ fill: var(--G-40);
191
+ background-color: transparent;
192
+ }
193
+ .nav__label {
194
+ flex: 1 0;
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: space-around;
198
+ font-size: 1.1em;
199
+ font-weight: 400;
200
+ }
201
+ .nav__label--date {
202
+ display: flex;
203
+ align-items: center;
204
+ justify-content: center;
205
+ border-radius: 5px;
206
+ padding: 5px 10px;
207
+ font-size: 1.2em;
208
+ font-weight: 400;
209
+ }
210
+ .nav__label--date svg {
211
+ width: 15px;
212
+ height: 15px;
213
+ }
214
+ .nav__label--date-selected {
215
+ background-color: var(--S-10);
216
+ }
217
+
218
+ .day-tile {
219
+ min-height: 310px;
220
+ padding: 5px;
221
+ background-color: var(--white);
222
+ }
223
+ .day-tile__tile {
224
+ display: flex;
225
+ flex-direction: column;
226
+ justify-content: space-between;
227
+ gap: 5px;
228
+ }
229
+ .day-tile__weeks {
230
+ display: flex;
231
+ justify-content: space-between;
232
+ font-weight: 400;
233
+ font-size: 1em;
234
+ }
235
+ .day-tile__weeks--date {
236
+ flex: 1 0;
237
+ display: flex;
238
+ justify-content: center;
239
+ align-items: center;
240
+ min-width: 40px;
241
+ padding: 5px 0;
242
+ }
243
+ .day-tile__week {
244
+ display: flex;
245
+ justify-content: space-between;
246
+ }
247
+ .day-tile__day {
248
+ display: flex;
249
+ justify-content: center;
250
+ align-items: center;
251
+ flex-direction: column;
252
+ width: 100%;
253
+ min-width: 40px;
254
+ min-height: 40px;
255
+ border-radius: 40px;
256
+ padding: 5px;
257
+ border: none;
258
+ font-weight: 400;
259
+ font-size: 1em;
260
+ }
261
+ @media (min-width: 1396px) {
262
+ .day-tile__day:hover {
263
+ background-color: var(--G-5);
264
+ }
265
+ }
266
+ .day-tile__day:active {
267
+ background-color: var(--G-10);
268
+ }
269
+ .day-tile__day--today {
270
+ color: var(--P-50);
271
+ font-weight: 600;
272
+ }
273
+ .day-tile__day--selected {
274
+ background-color: var(--P-50) !important;
275
+ color: var(--white) !important;
276
+ font-weight: 600;
277
+ }
278
+ .day-tile__day--before {
279
+ color: var(--G-40);
280
+ }
281
+ .day-tile__day--tile {
282
+ border-radius: 10px;
283
+ gap: 5px;
284
+ }
285
+
286
+ .month-tile {
287
+ min-height: 310px;
288
+ padding: 5px;
289
+ background-color: var(--white);
290
+ display: grid;
291
+ grid-template-columns: repeat(3, 1fr);
292
+ grid-template-rows: repeat(4, 1fr);
293
+ gap: 5px;
294
+ }
295
+ .month-tile__month {
296
+ display: flex;
297
+ flex-direction: column;
298
+ justify-content: center;
299
+ align-items: center;
300
+ padding: 5px;
301
+ border-radius: 10px;
302
+ }
303
+ .month-tile__month svg {
304
+ width: 15px;
305
+ height: 15px;
306
+ cursor: pointer;
307
+ }
308
+ @media (min-width: 1396px) {
309
+ .month-tile__month:hover {
310
+ background-color: var(--G-5);
311
+ }
312
+ }
313
+ .month-tile__month:active {
314
+ background-color: var(--G-10);
315
+ }
316
+ .month-tile__month--selected {
317
+ background-color: var(--P-50) !important;
318
+ color: var(--white) !important;
319
+ }
320
+ .month-tile__month--today {
321
+ color: var(--P-50);
322
+ font-weight: 600;
323
+ }
324
+ .month-tile__month--tile {
325
+ justify-content: flex-start;
326
+ gap: 5px;
327
+ }
328
+
329
+ .year-tile {
330
+ min-height: 310px;
331
+ padding: 5px;
332
+ background-color: var(--white);
333
+ position: relative;
334
+ height: 310px;
335
+ display: flex;
336
+ flex-direction: column;
337
+ align-items: center;
338
+ overflow: auto;
339
+ gap: 10px;
340
+ }
341
+ .year-tile::-webkit-scrollbar {
342
+ display: none;
343
+ }
344
+ .year-tile__blank {
345
+ height: calc(50% - 40px);
346
+ flex-shrink: 0;
347
+ }
348
+ .year-tile__blank:last-child {
349
+ height: 50%;
350
+ }
351
+ .year-tile__year {
352
+ min-width: 50%;
353
+ display: flex;
354
+ flex-direction: column;
355
+ align-items: center;
356
+ justify-content: center;
357
+ min-height: 40px;
358
+ border-radius: 6px;
359
+ flex-shrink: 0;
360
+ overflow: hidden;
361
+ font-weight: 400;
362
+ font-size: 1.2em;
363
+ }
364
+ @media (min-width: 1396px) {
365
+ .year-tile__year:hover {
366
+ background-color: var(--P-5);
367
+ }
368
+ }
369
+ .year-tile__year:active {
370
+ background-color: var(--P-10);
371
+ }
372
+ .year-tile__year--border {
373
+ border: 1px solid var(--G-30);
374
+ background-color: var(--P-5);
375
+ }
376
+ @media (min-width: 1396px) {
377
+ .year-tile__year--border:hover {
378
+ background-color: var(--P-10);
379
+ }
380
+ }
381
+ .year-tile__year--year {
382
+ height: 40px;
383
+ display: flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ }
387
+ .year-tile__year--selected {
388
+ color: var(--white);
389
+ background-color: var(--P-50) !important;
390
+ }
391
+ .year-tile__year--tile {
392
+ display: flex;
393
+ align-items: center;
394
+ justify-content: center;
395
+ min-height: 40px;
396
+ color: var(--G-80);
397
+ width: 100%;
398
+ background-color: var(--white);
399
+ border-top: var(--P-50);
400
+ }
401
+
402
+ /*# sourceMappingURL=style.css.map */
package/dist/style.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/Calendar/scss/_variables.scss","../src/Calendar/scss/_calendar.scss","../src/Calendar/scss/_tile.scss","../src/styles/mediaQuery.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;;;ACzFF;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;;AAEA;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;;;ACpIN;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;;ACzCF;ED2CE;IAEI;;;AAIJ;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;;AC/FJ;EDkGE;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;;ACjKF;EDmKE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;;AC/KJ;EDiLI;IAEI;;;AAKN;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jk-core/components",
3
- "version": "0.0.63",
3
+ "version": "0.0.65",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.cjs",
6
6
  "types": "./dist/index.d.ts",
@@ -26,9 +26,9 @@
26
26
  }
27
27
  },
28
28
  "files": [
29
- "dist",
30
- "dist/style.css",
31
- "src"
29
+ "./dist",
30
+ "./`src",
31
+ "./src/Calendar/scss"
32
32
  ],
33
33
  "keywords": [
34
34
  "utils",
@@ -39,12 +39,15 @@
39
39
  ],
40
40
  "dependencies": {
41
41
  "react": "^18.3.1",
42
+ "react-dom": "^18.3.1",
42
43
  "sass": "^1.79.4"
43
44
  },
44
45
  "scripts": {
46
+ "start": "vite --host --open",
45
47
  "prepack": "yarn build",
46
48
  "publish": "npm publish --access public",
47
- "build": "yarn clean && vite build",
49
+ "build": "yarn clean && vite build && yarn scss",
50
+ "scss": "sass ./src/Calendar/scss/main.scss dist/style.css",
48
51
  "clean": "rm -rf dist",
49
52
  "lint": "yarn lint:eslint && yarn lint:stylelint",
50
53
  "lint:eslint": "eslint ./src/ --ext .tsx,.ts",
@@ -54,6 +57,7 @@
54
57
  "@jk-core/utils": "workspace:*",
55
58
  "@types/node": "^22.7.4",
56
59
  "@types/react": "^18.3.11",
60
+ "@types/react-dom": "^18.3.0",
57
61
  "@typescript-eslint/eslint-plugin": "^7.2.0",
58
62
  "@typescript-eslint/parser": "^7.2.0",
59
63
  "@vitejs/plugin-react-swc": "^3.7.1",
@@ -77,6 +81,7 @@
77
81
  "typescript": "^5.5.3",
78
82
  "vite": "^5.4.8",
79
83
  "vite-plugin-checker": "^0.8.0",
84
+ "vite-plugin-css-injected-by-js": "^3.5.2",
80
85
  "vite-plugin-dts": "^4.2.3",
81
86
  "vite-plugin-sass-dts": "^1.3.29",
82
87
  "vite-plugin-svgr": "^4.2.0",
package/src/Calendar/{Calendar.module.scss → scss/_calendar.scss} RENAMED
@@ -1,3 +1,12 @@
1
+ button {
2
+ border: none;
3
+ background-color: transparent;
4
+ user-select: none;
5
+ -webkit-user-select: none;
6
+ -moz-user-select: none;
7
+ cursor: pointer;
8
+ }
9
+
1
10
  .calendar {
2
11
  width: 100%;
3
12
  min-width: 300px;
package/src/Calendar/scss/_tile.scss ADDED
@@ -0,0 +1,214 @@
1
+ @use "../../styles/mediaQuery.scss" as media;
2
+
3
+ .day-tile {
4
+ min-height: 310px;
5
+ padding: 5px;
6
+ background-color: var(--white);
7
+
8
+ &__tile {
9
+ display: flex;
10
+ flex-direction: column;
11
+ justify-content: space-between;
12
+ gap: 5px;
13
+ }
14
+
15
+ &__weeks {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ font-weight: 400;
19
+ font-size: 1em;
20
+
21
+ &--date {
22
+ flex: 1 0;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ min-width: 40px;
27
+ padding: 5px 0;
28
+ }
29
+ }
30
+
31
+ &__week {
32
+ display: flex;
33
+ justify-content: space-between;
34
+ }
35
+
36
+ &__day {
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ flex-direction: column;
41
+ width: 100%;
42
+ min-width: 40px;
43
+ min-height: 40px;
44
+ border-radius: 40px;
45
+ padding: 5px;
46
+ border: none;
47
+ font-weight: 400;
48
+ font-size: 1em;
49
+
50
+ &:hover {
51
+ @include media.pc {
52
+ background-color: var(--G-5);
53
+ }
54
+ }
55
+
56
+ &:active {
57
+ background-color: var(--G-10);
58
+ }
59
+
60
+ &--today {
61
+ color: var(--P-50);
62
+ font-weight: 600;
63
+ }
64
+
65
+ &--selected {
66
+ background-color: var(--P-50) !important;
67
+ color: var(--white) !important;
68
+ font-weight: 600;
69
+ }
70
+
71
+ &--before {
72
+ color: var(--G-40);
73
+ }
74
+
75
+ &--tile {
76
+ border-radius: 10px;
77
+ gap: 5px;
78
+ }
79
+ }
80
+ }
81
+
82
+ .month-tile {
83
+ min-height: 310px;
84
+ padding: 5px;
85
+ background-color: var(--white);
86
+ display: grid;
87
+ grid-template-columns: repeat(3, 1fr);
88
+ grid-template-rows: repeat(4, 1fr);
89
+ gap: 5px;
90
+
91
+ &__month {
92
+ display: flex;
93
+ flex-direction: column;
94
+ justify-content: center;
95
+ align-items: center;
96
+ padding: 5px;
97
+ border-radius: 10px;
98
+
99
+ svg {
100
+ width: 15px;
101
+ height: 15px;
102
+ cursor: pointer;
103
+ }
104
+
105
+ &:hover {
106
+ @include media.pc {
107
+ background-color: var(--G-5);
108
+ }
109
+ }
110
+
111
+ &:active {
112
+ background-color: var(--G-10);
113
+ }
114
+
115
+ &--selected {
116
+ background-color: var(--P-50) !important;
117
+ color: var(--white) !important;
118
+ }
119
+
120
+ &--today {
121
+ color: var(--P-50);
122
+ font-weight: 600;
123
+ }
124
+
125
+ &--tile {
126
+ justify-content: flex-start;
127
+ gap: 5px;
128
+ }
129
+ }
130
+ }
131
+
132
+ .year-tile {
133
+ min-height: 310px;
134
+ padding: 5px;
135
+ background-color: var(--white);
136
+ position: relative;
137
+ height: 310px;
138
+ display: flex;
139
+ flex-direction: column;
140
+ align-items: center;
141
+ overflow: auto;
142
+ gap: 10px;
143
+
144
+ &::-webkit-scrollbar {
145
+ display: none;
146
+ }
147
+
148
+ &__blank {
149
+ height: calc(50% - 40px);
150
+ flex-shrink: 0;
151
+
152
+ &:last-child {
153
+ height: 50%;
154
+ }
155
+ }
156
+
157
+ &__year {
158
+ min-width: 50%;
159
+ display: flex;
160
+ flex-direction: column;
161
+ align-items: center;
162
+ justify-content: center;
163
+ min-height: 40px;
164
+ border-radius: 6px;
165
+ flex-shrink: 0;
166
+ overflow: hidden;
167
+ font-weight: 400;
168
+ font-size: 1.2em;
169
+
170
+ &:hover {
171
+ @include media.pc {
172
+ background-color: var(--P-5);
173
+ }
174
+ }
175
+
176
+ &:active {
177
+ background-color: var(--P-10);
178
+ }
179
+
180
+ &--border {
181
+ border: 1px solid var(--G-30);
182
+ background-color: var(--P-5);
183
+
184
+ &:hover {
185
+ @include media.pc {
186
+ background-color: var(--P-10);
187
+ }
188
+ }
189
+ }
190
+
191
+ &--year {
192
+ height: 40px;
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ }
197
+
198
+ &--selected {
199
+ color: var(--white);
200
+ background-color: var(--P-50) !important;
201
+ }
202
+
203
+ &--tile {
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
207
+ min-height: 40px;
208
+ color: var(--G-80);
209
+ width: 100%;
210
+ background-color: var(--white);
211
+ border-top: var(--P-50);
212
+ }
213
+ }
214
+ }
package/src/Calendar/scss/main.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import "variables";
2
+ @import "calendar";
3
+ @import "tile";