kalendly 0.3.1 → 0.3.3

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 (17) hide show
  1. package/README.md +89 -2
  2. package/dist/core/index.d.mts +20 -3
  3. package/dist/core/index.d.ts +20 -3
  4. package/dist/core/index.js +61 -5
  5. package/dist/core/index.js.map +1 -1
  6. package/dist/core/index.mjs +58 -5
  7. package/dist/core/index.mjs.map +1 -1
  8. package/dist/index.d.mts +25 -3
  9. package/dist/index.d.ts +25 -3
  10. package/dist/index.js +157 -15
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +154 -15
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/index.umd.js +151 -15
  15. package/dist/index.umd.js.map +1 -1
  16. package/dist/styles/calendar.css +39 -11
  17. package/package.json +1 -1
package/dist/styles/calendar.css CHANGED
@@ -48,11 +48,24 @@
48
48
  --calendar-cell-hover: var(--kal-gray-100);
49
49
  --calendar-header-bg: var(--kal-gray-50);
50
50
  --calendar-selected-bg: var(--kal-blue-50);
51
+ --calendar-out-of-range-bg: var(--kal-gray-100);
52
+ --calendar-out-of-range-fg: var(--kal-gray-500);
51
53
  --calendar-popup-bg: var(--kal-white);
52
54
  --calendar-picker-bg: var(--kal-white);
53
55
  --calendar-today-outline: var(--kal-yellow-400);
54
56
  --calendar-event-indicator: var(--kal-blue-500);
55
57
  --calendar-input-invalid: var(--kal-red-500);
58
+ --calendar-input-invalid-rgb: 239, 68, 68;
59
+ --calendar-input-invalid-bg: rgba(var(--calendar-input-invalid-rgb), 0.1);
60
+ --calendar-nav-arrow-fg: var(--calendar-text-color);
61
+ --calendar-nav-arrow-bg: var(--calendar-background);
62
+ --calendar-nav-arrow-border: var(--calendar-border-color);
63
+ --calendar-nav-arrow-hover-fg: var(--calendar-on-accent);
64
+ --calendar-nav-arrow-hover-bg: var(--calendar-primary-color);
65
+ --calendar-popup-header-fg: var(--kal-white);
66
+ --calendar-popup-close-fg: var(--kal-white);
67
+ --calendar-popup-close-bg: rgba(255, 255, 255, 0.2);
68
+ --calendar-popup-close-hover-bg: rgba(255, 255, 255, 0.3);
56
69
  --calendar-link: var(--kal-blue-600);
57
70
  --calendar-skeleton-base: var(--kal-gray-150);
58
71
  --calendar-skeleton-highlight: var(--kal-gray-200);
@@ -199,20 +212,20 @@
199
212
  justify-content: center;
200
213
  width: 36px;
201
214
  height: 36px;
202
- border: 1px solid var(--calendar-border-color);
215
+ border: 1px solid var(--calendar-nav-arrow-border);
203
216
  border-radius: var(--calendar-radius-md);
204
- background: var(--calendar-background);
217
+ background: var(--calendar-nav-arrow-bg);
205
218
  cursor: pointer;
206
219
  font-size: var(--calendar-font-lg);
207
- color: var(--calendar-text-color);
220
+ color: var(--calendar-nav-arrow-fg);
208
221
  transition: all 0.2s ease;
209
222
  flex-shrink: 0;
210
223
  }
211
224
 
212
225
  .calendar-nav-arrow:hover {
213
- background-color: var(--calendar-primary-color);
214
- border-color: var(--calendar-primary-color);
215
- color: var(--calendar-on-accent);
226
+ background-color: var(--calendar-nav-arrow-hover-bg);
227
+ border-color: var(--calendar-nav-arrow-hover-bg);
228
+ color: var(--calendar-nav-arrow-hover-fg);
216
229
  }
217
230
 
218
231
  .calendar-picker-container {
@@ -357,7 +370,7 @@
357
370
 
358
371
  .calendar-picker-year-input.invalid {
359
372
  border-color: var(--calendar-input-invalid);
360
- background-color: rgba(239, 68, 68, 0.1);
373
+ background-color: var(--calendar-input-invalid-bg);
361
374
  }
362
375
 
363
376
  .calendar-picker-months {
@@ -453,6 +466,12 @@
453
466
  font-weight: 700;
454
467
  }
455
468
 
469
+ .calendar-table td.calendar-cell-out-of-range {
470
+ background-color: var(--calendar-out-of-range-bg);
471
+ color: var(--calendar-out-of-range-fg);
472
+ cursor: default;
473
+ }
474
+
456
475
  .calendar-table td.calendar-cell-other-month {
457
476
  color: var(--calendar-text-light);
458
477
  background-color: var(--calendar-header-bg);
@@ -523,6 +542,15 @@
523
542
  color: var(--calendar-open-fg);
524
543
  }
525
544
 
545
+ /* Outside available-hours. Placed after the open/blocked fills so it wins at
546
+ equal specificity, and after the selectable cursor rules so it stays inert. */
547
+ .time-grid-slot-out-of-range,
548
+ .time-grid-selectable .time-grid-slot-out-of-range {
549
+ background-color: var(--calendar-out-of-range-bg);
550
+ color: var(--calendar-out-of-range-fg);
551
+ cursor: default;
552
+ }
553
+
526
554
  /* Availability mode */
527
555
  .calendar-table td.availability-open {
528
556
  background-color: var(--calendar-open-bg);
@@ -630,7 +658,7 @@
630
658
  }
631
659
 
632
660
  .popup-header h2 {
633
- color: white;
661
+ color: var(--calendar-popup-header-fg);
634
662
  font-size: var(--calendar-font-lg);
635
663
  font-weight: 600;
636
664
  margin: 0;
@@ -639,10 +667,10 @@
639
667
  .popup-close {
640
668
  width: 32px;
641
669
  height: 32px;
642
- background: rgba(255, 255, 255, 0.2);
670
+ background: var(--calendar-popup-close-bg);
643
671
  border: none;
644
672
  border-radius: var(--calendar-radius-circle);
645
- color: white;
673
+ color: var(--calendar-popup-close-fg);
646
674
  font-size: var(--calendar-font-xl);
647
675
  cursor: pointer;
648
676
  display: flex;
@@ -653,7 +681,7 @@
653
681
  }
654
682
 
655
683
  .popup-close:hover {
656
- background: rgba(255, 255, 255, 0.3);
684
+ background: var(--calendar-popup-close-hover-bg);
657
685
  }
658
686
 
659
687
  .scroll-hint {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kalendly",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "A universal calendar web component — works in React, Vue, Angular, Svelte, Solid.js, and plain HTML with no framework dependency",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",