@trackunit/css-tailwind 1.3.25 → 1.3.29

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/css-tailwind",
3
- "version": "1.3.25",
3
+ "version": "1.3.29",
4
4
  "main": "./index.cjs.js",
5
5
  "repository": "https://github.com/Trackunit/manager",
6
6
  "license": "SEE LICENSE IN LICENSE.txt",
@@ -9,10 +9,10 @@
9
9
  },
10
10
  "dependencies": {
11
11
  "tailwindcss": "3.4.3",
12
- "@trackunit/css-component-tokens": "1.3.23",
13
- "@trackunit/css-tailwind-custom-properties-plugin": "1.3.23",
14
- "@trackunit/ui-design-tokens": "1.3.23",
15
- "@trackunit/css-core": "1.3.24"
12
+ "@trackunit/css-component-tokens": "1.3.27",
13
+ "@trackunit/css-tailwind-custom-properties-plugin": "1.3.27",
14
+ "@trackunit/ui-design-tokens": "1.3.27",
15
+ "@trackunit/css-core": "1.3.28"
16
16
  },
17
17
  "type": "commonjs",
18
18
  "types": "./index.cjs.d.ts"
@@ -449,307 +449,256 @@
449
449
  }
450
450
 
451
451
  /* libs/css/core/src/lib/vendor-css/react-day-picker.css */
452
- :root {
453
- --rdp-cell-size: 40px;
454
- --rdp-accent-color: #0000ff;
455
- --rdp-background-color: #e7edff;
456
- --rdp-accent-color-dark: #3003e1;
457
- --rdp-background-color-dark: #180270;
458
- --rdp-outline: 2px solid var(--rdp-accent-color);
459
- --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
460
- }
461
- .rdp-vhidden {
462
- box-sizing: border-box;
463
- padding: 0;
464
- margin: 0;
465
- background: transparent;
466
- border: 0;
467
- -moz-appearance: none;
468
- -webkit-appearance: none;
469
- appearance: none;
470
- position: absolute !important;
471
- top: 0;
472
- width: 1px !important;
473
- height: 1px !important;
474
- padding: 0 !important;
475
- overflow: hidden !important;
476
- clip: rect(1px, 1px, 1px, 1px) !important;
477
- border: 0 !important;
478
- }
479
- .rdp-button_reset {
480
- appearance: none;
452
+ .rdp-root {
453
+ --rdp-accent-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
454
+ --rdp-accent-background-color: rgb(var(--color-primary-200) / var(--tw-bg-opacity));
455
+ --rdp-day-height: 44px;
456
+ --rdp-day-width: 44px;
457
+ --rdp-day_button-border-radius: 100%;
458
+ --rdp-day_button-border: 2px solid transparent;
459
+ --rdp-day_button-height: 42px;
460
+ --rdp-day_button-width: 42px;
461
+ --rdp-selected-border: 2px solid var(--rdp-accent-color);
462
+ --rdp-disabled-opacity: 0.5;
463
+ --rdp-outside-opacity: 0.75;
464
+ --rdp-today-color: var(--rdp-accent-color);
465
+ --rdp-dropdown-gap: 0.5rem;
466
+ --rdp-months-gap: 2rem;
467
+ --rdp-nav_button-disabled-opacity: 0.5;
468
+ --rdp-nav_button-height: 2.25rem;
469
+ --rdp-nav_button-width: 2.25rem;
470
+ --rdp-nav-height: 2.75rem;
471
+ --rdp-range_middle-background-color: var(--rdp-accent-background-color);
472
+ --rdp-range_middle-color: inherit;
473
+ --rdp-range_start-color: white;
474
+ --rdp-range_start-background: linear-gradient(
475
+ var(--rdp-gradient-direction),
476
+ transparent 50%,
477
+ var(--rdp-range_middle-background-color) 50%
478
+ );
479
+ --rdp-range_start-date-background-color: var(--rdp-accent-color);
480
+ --rdp-range_end-background: linear-gradient(
481
+ var(--rdp-gradient-direction),
482
+ var(--rdp-range_middle-background-color) 50%,
483
+ transparent 50%
484
+ );
485
+ --rdp-range_end-color: white;
486
+ --rdp-range_end-date-background-color: var(--rdp-accent-color);
487
+ --rdp-week_number-border-radius: 100%;
488
+ --rdp-week_number-border: 2px solid transparent;
489
+ --rdp-week_number-height: var(--rdp-day-height);
490
+ --rdp-week_number-opacity: 0.75;
491
+ --rdp-week_number-width: var(--rdp-day-width);
492
+ --rdp-weeknumber-text-align: center;
493
+ --rdp-weekday-opacity: 0.75;
494
+ --rdp-weekday-padding: 0.5rem 0rem;
495
+ --rdp-weekday-text-align: center;
496
+ --rdp-gradient-direction: 90deg;
497
+ }
498
+ .rdp-root[dir="rtl"] {
499
+ --rdp-gradient-direction: -90deg;
500
+ }
501
+ .rdp-root[data-broadcast-calendar="true"] {
502
+ --rdp-outside-opacity: unset;
503
+ }
504
+ .rdp-root {
481
505
  position: relative;
482
- margin: 0;
483
- padding: 0;
484
- cursor: default;
485
- color: inherit;
486
- outline: none;
487
- background: none;
488
- font: inherit;
489
- -moz-appearance: none;
490
- -webkit-appearance: none;
506
+ box-sizing: border-box;
491
507
  }
492
- .rdp-button {
493
- border: 2px solid transparent;
508
+ .rdp-root * {
509
+ box-sizing: border-box;
494
510
  }
495
- .rdp-button[disabled] {
496
- opacity: 0.25;
511
+ .rdp-day {
512
+ width: var(--rdp-day-width);
513
+ height: var(--rdp-day-height);
514
+ text-align: center;
497
515
  }
498
- .rdp-button:not([disabled]) {
516
+ .rdp-day_button {
517
+ background: none;
518
+ padding: 0;
519
+ margin: 0;
499
520
  cursor: pointer;
500
- }
501
- .rdp-button:focus:not([disabled]),
502
- .rdp-button:active:not([disabled]) {
521
+ font: inherit;
503
522
  color: inherit;
504
- border: var(--rdp-outline);
505
- background-color: var(--rdp-background-color);
506
- }
507
- .rdp-button:hover:not([disabled]) {
508
- background-color: var(--rdp-background-color);
509
- }
510
- .rdp-months {
511
- display: flex;
512
- }
513
- .rdp-month {
514
- margin: 0 1em;
515
- }
516
- .rdp-month:first-child {
517
- margin-left: 0;
518
- }
519
- .rdp-month:last-child {
520
- margin-right: 0;
521
- }
522
- .rdp-table {
523
- margin: 0;
524
- max-width: calc(var(--rdp-cell-size) * 7);
525
- border-collapse: collapse;
526
- @apply rounded bg-slate-100;
527
- }
528
- .rdp-with_weeknumber .rdp-table {
529
- max-width: calc(var(--rdp-cell-size) * 8);
530
- border-collapse: collapse;
531
- }
532
- .rdp-caption {
533
- display: flex;
523
+ justify-content: center;
534
524
  align-items: center;
535
- justify-content: space-between;
536
- padding: 0;
537
- text-align: left;
525
+ display: flex;
526
+ width: var(--rdp-day_button-width);
527
+ height: var(--rdp-day_button-height);
528
+ border: var(--rdp-day_button-border);
529
+ border-radius: var(--rdp-day_button-border-radius);
538
530
  }
539
- .rdp-multiple_months .rdp-caption {
540
- position: relative;
541
- display: block;
542
- text-align: center;
543
- }
544
- .rdp-caption_dropdowns {
545
- position: relative;
546
- display: inline-flex;
531
+ .rdp-day_button:disabled {
532
+ cursor: revert;
547
533
  }
548
534
  .rdp-caption_label {
549
- position: relative;
550
535
  z-index: 1;
536
+ position: relative;
551
537
  display: inline-flex;
552
538
  align-items: center;
553
- margin: 0;
554
539
  white-space: nowrap;
555
- color: currentColor;
556
540
  border: 0;
557
- border: 2px solid transparent;
558
- font-family: inherit;
559
- font-size: 140%;
560
- font-weight: bold;
561
- }
562
- .rdp-nav {
563
- white-space: nowrap;
564
- }
565
- .rdp-multiple_months .rdp-caption_start .rdp-nav {
566
- position: absolute;
567
- top: 50%;
568
- left: 0;
569
- transform: translateY(-50%);
570
541
  }
571
- .rdp-multiple_months .rdp-caption_end .rdp-nav {
572
- position: absolute;
573
- top: 50%;
574
- right: 0;
575
- transform: translateY(-50%);
542
+ .rdp-dropdown:focus-visible ~ .rdp-caption_label {
543
+ outline: 5px auto Highlight;
544
+ outline: 5px auto -webkit-focus-ring-color;
576
545
  }
577
- .rdp-nav_button {
546
+ .rdp-button_next,
547
+ .rdp-button_previous {
548
+ border: none;
549
+ background: none;
550
+ padding: 0;
551
+ margin: 0;
552
+ cursor: pointer;
553
+ font: inherit;
554
+ color: inherit;
555
+ -moz-appearance: none;
556
+ -webkit-appearance: none;
578
557
  display: inline-flex;
579
558
  align-items: center;
580
559
  justify-content: center;
581
- width: var(--rdp-cell-size);
582
- height: var(--rdp-cell-size);
583
- padding: 0.25em;
584
- border-radius: 100%;
560
+ position: relative;
561
+ appearance: none;
562
+ width: var(--rdp-nav_button-width);
563
+ height: var(--rdp-nav_button-height);
564
+ }
565
+ .rdp-button_next:disabled,
566
+ .rdp-button_previous:disabled {
567
+ cursor: revert;
568
+ opacity: var(--rdp-nav_button-disabled-opacity);
569
+ }
570
+ .rdp-chevron {
571
+ display: inline-block;
572
+ fill: var(--rdp-accent-color);
573
+ }
574
+ .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
575
+ transform: rotate(180deg);
576
+ }
577
+ .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
578
+ transform: rotate(180deg);
579
+ transform-origin: 50%;
585
580
  }
586
- .rdp-dropdown_year,
587
- .rdp-dropdown_month {
581
+ .rdp-dropdowns {
588
582
  position: relative;
589
583
  display: inline-flex;
590
584
  align-items: center;
585
+ gap: var(--rdp-dropdown-gap);
591
586
  }
592
587
  .rdp-dropdown {
588
+ z-index: 2;
589
+ opacity: 0;
593
590
  appearance: none;
594
591
  position: absolute;
595
- z-index: 2;
596
- top: 0;
597
- bottom: 0;
598
- left: 0;
592
+ inset-block-start: 0;
593
+ inset-block-end: 0;
594
+ inset-inline-start: 0;
599
595
  width: 100%;
600
596
  margin: 0;
601
597
  padding: 0;
602
598
  cursor: inherit;
603
- opacity: 0;
604
599
  border: none;
605
- background-color: transparent;
606
- font-family: inherit;
607
- font-size: inherit;
608
600
  line-height: inherit;
609
601
  }
610
- .rdp-dropdown[disabled] {
611
- opacity: unset;
612
- color: unset;
613
- }
614
- .rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
615
- .rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
616
- border: var(--rdp-outline);
617
- border-radius: 6px;
618
- background-color: var(--rdp-background-color);
619
- }
620
- .rdp-dropdown_icon {
621
- margin: 0 0 0 5px;
622
- }
623
- .rdp-head {
624
- border: 0;
625
- }
626
- .rdp-head_row,
627
- .rdp-row {
628
- height: 100%;
629
- }
630
- .rdp-head_cell {
631
- vertical-align: middle;
632
- text-transform: uppercase;
633
- font-size: 0.75em;
634
- font-weight: 700;
635
- text-align: center;
636
- height: 100%;
637
- height: var(--rdp-cell-size);
638
- padding: 0;
639
- }
640
- .rdp-tbody {
641
- border: 0;
642
- }
643
- .rdp-tfoot {
644
- margin: 0.5em;
645
- }
646
- .rdp-cell {
647
- width: var(--rdp-cell-size);
648
- height: 100%;
649
- height: var(--rdp-cell-size);
650
- padding: 0;
651
- text-align: center;
602
+ .rdp-dropdown_root {
603
+ position: relative;
604
+ display: inline-flex;
605
+ align-items: center;
652
606
  }
653
- .rdp-weeknumber {
654
- font-size: 0.75em;
607
+ .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
608
+ opacity: var(--rdp-disabled-opacity);
655
609
  }
656
- .rdp-weeknumber,
657
- .rdp-day {
610
+ .rdp-month_caption {
658
611
  display: flex;
659
- overflow: hidden;
660
- align-items: center;
661
- justify-content: center;
662
- box-sizing: border-box;
663
- width: var(--rdp-cell-size);
664
- max-width: var(--rdp-cell-size);
665
- height: var(--rdp-cell-size);
666
- margin: 0;
667
- border: 2px solid transparent;
668
- border-radius: 100%;
669
- }
670
- .rdp-day_today:not(.rdp-day_outside) {
612
+ align-content: center;
613
+ height: var(--rdp-nav-height);
671
614
  font-weight: bold;
615
+ font-size: large;
672
616
  }
673
- .rdp-day_selected:not([disabled]),
674
- .rdp-day_selected:focus:not([disabled]),
675
- .rdp-day_selected:active:not([disabled]),
676
- .rdp-day_selected:hover:not([disabled]) {
677
- color: white;
678
- background-color: var(--rdp-accent-color);
679
- }
680
- .rdp-day_selected:focus:not([disabled]) {
681
- border: var(--rdp-outline-selected);
682
- }
683
- .rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
684
- border-top-right-radius: 0;
685
- border-bottom-right-radius: 0;
686
- }
687
- .rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
688
- border-top-left-radius: 0;
689
- border-bottom-left-radius: 0;
617
+ .rdp-months {
618
+ position: relative;
619
+ display: flex;
620
+ flex-wrap: wrap;
621
+ gap: var(--rdp-months-gap);
622
+ max-width: fit-content;
690
623
  }
691
- .rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
692
- border-top-left-radius: 0;
693
- border-bottom-left-radius: 0;
624
+ .rdp-month_grid {
625
+ border-collapse: collapse;
694
626
  }
695
- .rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
696
- border-top-right-radius: 0;
697
- border-bottom-right-radius: 0;
627
+ .rdp-nav {
628
+ position: absolute;
629
+ inset-block-start: 0;
630
+ inset-inline-end: 0;
631
+ display: flex;
632
+ align-items: center;
633
+ height: var(--rdp-nav-height);
698
634
  }
699
- .rdp-day_range_end.rdp-day_range_start {
700
- border-radius: 100%;
635
+ .rdp-weekday {
636
+ opacity: var(--rdp-weekday-opacity);
637
+ padding: var(--rdp-weekday-padding);
638
+ font-weight: 500;
639
+ font-size: smaller;
640
+ text-align: var(--rdp-weekday-text-align);
641
+ text-transform: var(--rdp-weekday-text-transform);
701
642
  }
702
- .rdp-day_range_middle {
703
- border-radius: 0;
643
+ .rdp-week_number {
644
+ opacity: var(--rdp-week_number-opacity);
645
+ font-weight: 400;
646
+ font-size: small;
647
+ height: var(--rdp-week_number-height);
648
+ width: var(--rdp-week_number-width);
649
+ border: var(--rdp-week_number-border);
650
+ border-radius: var(--rdp-week_number-border-radius);
651
+ text-align: var(--rdp-weeknumber-text-align);
704
652
  }
705
- .custom-day-picker {
706
- font-size: var(--font-size-sm);
653
+ .rdp-today:not(.rdp-outside) {
654
+ color: var(--rdp-today-color);
707
655
  }
708
- .custom-day-picker .rdp-day_today {
709
- color: #000;
656
+ .rdp-selected {
657
+ font-weight: bold;
658
+ font-size: large;
710
659
  }
711
- .custom-day-picker .rdp-day_selected:not(.rdp-day_disabled):not(.rdp-day_outside) {
712
- background-color: rgb(var(--color-primary-600));
660
+ .rdp-selected .rdp-day_button {
661
+ border: var(--rdp-selected-border);
713
662
  }
714
- .custom-day-picker .rdp-day_selected:not(.rdp-day__start):not(.rdp-day__end):not(.rdp-day__outside) {
715
- background-color: rgb(var(--color-primary-600));
716
- color: #fff;
663
+ .rdp-outside {
664
+ opacity: var(--rdp-outside-opacity);
717
665
  }
718
- .custom-day-picker .rdp-day_selected:focus:not([disabled]) {
719
- border: none;
666
+ .rdp-disabled {
667
+ opacity: var(--rdp-disabled-opacity);
720
668
  }
721
- .custom-day-picker .rdp-day {
722
- border-radius: var(--spacing-1);
669
+ .rdp-hidden {
670
+ visibility: hidden;
671
+ color: var(--rdp-range_start-color);
723
672
  }
724
- .custom-day-picker.range-picker .rdp-day {
725
- border-radius: 0;
673
+ .rdp-range_start {
674
+ background: var(--rdp-range_start-background);
726
675
  }
727
- .custom-day-picker.range-picker .rdp-button:focus:not([disabled]):not(.rdp-day_selected),
728
- .custom-day-picker.range-picker .rdp-button:active:not([disabled]):not(.rdp-day_selected),
729
- .custom-day-picker.range-picker .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
730
- border-radius: 50%;
676
+ .rdp-range_start .rdp-day_button {
677
+ background-color: var(--rdp-range_start-date-background-color);
678
+ color: var(--rdp-range_start-color);
731
679
  }
732
- .custom-day-picker.range-picker .rdp-day_range_start {
733
- border-top-left-radius: 50%;
734
- border-bottom-left-radius: 50%;
680
+ .rdp-range_middle {
681
+ background-color: var(--rdp-range_middle-background-color);
735
682
  }
736
- .custom-day-picker.range-picker .rdp-day_range_end {
737
- border-top-right-radius: 50%;
738
- border-bottom-right-radius: 50%;
683
+ .rdp-range_middle .rdp-day_button {
684
+ border-color: transparent;
685
+ border: unset;
686
+ border-radius: unset;
687
+ color: var(--rdp-range_middle-color);
739
688
  }
740
- .custom-day-picker.range-picker .rdp-month {
741
- margin: 0;
689
+ .rdp-range_end {
690
+ background: var(--rdp-range_end-background);
691
+ color: var(--rdp-range_end-color);
742
692
  }
743
- .custom-day-picker.range-picker .rdp-caption {
744
- padding: 0;
745
- gap: 0.25em;
693
+ .rdp-range_end .rdp-day_button {
694
+ color: var(--rdp-range_start-color);
695
+ background-color: var(--rdp-range_end-date-background-color);
746
696
  }
747
- .custom-day-picker.range-picker .rdp-navButton {
748
- top: 0;
749
- right: 0;
697
+ .rdp-range_start.rdp-range_end {
698
+ background: revert;
750
699
  }
751
- .custom-day-picker.range-picker .rdp-wrapper {
752
- padding: 0;
700
+ .rdp-focusable {
701
+ cursor: pointer;
753
702
  }
754
703
 
755
704
  /* libs/css/core/src/lib/fonts.css */