@vector-business-services/cristal-ds-web 0.18.0 → 0.20.0

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 (9) hide show
  1. package/dist/index.cjs +392 -63
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +302 -90
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +56 -3
  6. package/dist/index.d.ts +56 -3
  7. package/dist/index.js +392 -65
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -559,6 +559,260 @@
559
559
  border-color: var(--cr-color-stroke-disabled-base);
560
560
  }
561
561
 
562
+ /* src/components/IconButton/IconButton.css */
563
+ .cr-icon-button {
564
+ display: inline-flex;
565
+ flex-shrink: 0;
566
+ align-items: center;
567
+ justify-content: center;
568
+ padding: var(--cr-padding-padding-3);
569
+ border: var(--cr-stroke-x-small) solid transparent;
570
+ border-radius: var(--cr-radius-full);
571
+ background-color: transparent;
572
+ cursor: pointer;
573
+ transition: background-color 120ms ease, border-color 120ms ease;
574
+ }
575
+ .cr-icon-button:focus-visible {
576
+ outline: none;
577
+ box-shadow: var(--cr-effects-focus-ring);
578
+ }
579
+ .cr-icon-button:disabled {
580
+ cursor: not-allowed;
581
+ }
582
+ .cr-icon-button--large {
583
+ width: 48px;
584
+ height: 48px;
585
+ }
586
+ .cr-icon-button--medium {
587
+ width: 42px;
588
+ height: 42px;
589
+ }
590
+ .cr-icon-button--small {
591
+ width: 36px;
592
+ height: 36px;
593
+ }
594
+ .cr-icon-button--xsmall {
595
+ width: 32px;
596
+ height: 32px;
597
+ }
598
+ .cr-icon-button__icon {
599
+ display: inline-flex;
600
+ font-size: 20px;
601
+ }
602
+ .cr-icon-button--xsmall .cr-icon-button__icon {
603
+ font-size: 16px;
604
+ }
605
+ .cr-icon-button--primary {
606
+ background-color: var(--cr-color-fill-brand-base);
607
+ color: var(--cr-color-icon-inverse-base);
608
+ }
609
+ .cr-icon-button--primary:hover:not(:disabled) {
610
+ background-color: var(--cr-color-fill-brand-base-hover);
611
+ }
612
+ .cr-icon-button--primary:active:not(:disabled) {
613
+ background-color: var(--cr-color-fill-brand-base-pressed);
614
+ }
615
+ .cr-icon-button--secondary {
616
+ background-color: var(--cr-color-fill-brand-subtlest);
617
+ color: var(--cr-color-icon-brand-base);
618
+ }
619
+ .cr-icon-button--secondary:hover:not(:disabled) {
620
+ background-color: var(--cr-color-fill-brand-subtlest-hover);
621
+ }
622
+ .cr-icon-button--secondary:active:not(:disabled) {
623
+ background-color: var(--cr-color-fill-brand-subtlest-pressed);
624
+ }
625
+ .cr-icon-button--tertiary {
626
+ background-color: var(--cr-color-fill-neutral-container);
627
+ border-color: var(--cr-color-stroke-neutral-bold);
628
+ color: var(--cr-color-icon-neutral-base);
629
+ }
630
+ .cr-icon-button--tertiary:hover:not(:disabled) {
631
+ background-color: var(--cr-color-fill-neutral-container-hover);
632
+ }
633
+ .cr-icon-button--tertiary:active:not(:disabled) {
634
+ background-color: var(--cr-color-fill-neutral-container-pressed);
635
+ }
636
+ .cr-icon-button--primary:disabled,
637
+ .cr-icon-button--secondary:disabled,
638
+ .cr-icon-button--tertiary:disabled {
639
+ background-color: var(--cr-color-fill-disabled-base);
640
+ color: var(--cr-color-icon-disabled-on-fill);
641
+ }
642
+ .cr-icon-button--tertiary:disabled {
643
+ border-color: var(--cr-color-stroke-disabled-base);
644
+ }
645
+ .cr-icon-button--ghost {
646
+ color: var(--cr-color-icon-brand-base);
647
+ }
648
+ .cr-icon-button--ghost:hover:not(:disabled) {
649
+ background-color: var(--cr-color-fill-brand-subtlest);
650
+ }
651
+
652
+ /* src/components/Calendar/Calendar.css */
653
+ .cr-calendar {
654
+ box-sizing: border-box;
655
+ color: var(--cr-color-text-neutral-base);
656
+ }
657
+ .cr-calendar [data-p-hidden-accessible=true] {
658
+ position: absolute;
659
+ width: 1px;
660
+ height: 1px;
661
+ overflow: hidden;
662
+ clip-path: inset(50%);
663
+ white-space: nowrap;
664
+ }
665
+ .cr-calendar__months {
666
+ display: flex;
667
+ }
668
+ .cr-calendar__month + .cr-calendar__month {
669
+ margin-left: var(--cr-spacing-spacing-7);
670
+ padding-left: var(--cr-spacing-spacing-7);
671
+ border-left: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
672
+ }
673
+ .cr-calendar__month {
674
+ display: flex;
675
+ flex-direction: column;
676
+ gap: var(--cr-spacing-spacing-6);
677
+ width: 252px;
678
+ }
679
+ .cr-calendar__header {
680
+ display: flex;
681
+ align-items: center;
682
+ justify-content: space-between;
683
+ }
684
+ .cr-calendar__title {
685
+ display: flex;
686
+ align-items: center;
687
+ gap: var(--cr-spacing-spacing-4);
688
+ font-family: var(--cr-typography-body-medium-16-semibold-font-family);
689
+ font-size: var(--cr-typography-body-medium-16-semibold-font-size);
690
+ font-weight: var(--cr-typography-body-medium-16-semibold-font-weight);
691
+ line-height: var(--cr-typography-body-medium-16-semibold-line-height);
692
+ letter-spacing: var(--cr-typography-body-medium-16-semibold-letter-spacing);
693
+ }
694
+ .cr-calendar__title-button {
695
+ padding: 0;
696
+ border: 0;
697
+ border-radius: var(--cr-radius-x-small);
698
+ background: none;
699
+ color: inherit;
700
+ font: inherit;
701
+ letter-spacing: inherit;
702
+ cursor: pointer;
703
+ }
704
+ .cr-calendar__title-button:focus-visible,
705
+ .cr-calendar__date:focus-visible,
706
+ .cr-calendar__option:focus-visible {
707
+ outline: none;
708
+ box-shadow: var(--cr-effects-focus-ring);
709
+ }
710
+ .cr-calendar__table {
711
+ border-collapse: collapse;
712
+ border-spacing: 0;
713
+ }
714
+ .cr-calendar__weekday {
715
+ width: 36px;
716
+ height: 21px;
717
+ padding: 0 0 var(--cr-padding-padding-2);
718
+ color: var(--cr-color-text-neutral-subtlest);
719
+ font-family: var(--cr-typography-label-medium-12-regular-font-family);
720
+ font-size: var(--cr-typography-label-medium-12-regular-font-size);
721
+ font-weight: var(--cr-typography-label-medium-12-regular-font-weight);
722
+ line-height: var(--cr-typography-label-medium-12-regular-line-height);
723
+ letter-spacing: var(--cr-typography-label-medium-12-regular-letter-spacing);
724
+ }
725
+ .cr-calendar__day {
726
+ padding: var(--cr-padding-padding-3) 0 0;
727
+ }
728
+ .cr-calendar__date {
729
+ display: flex;
730
+ align-items: center;
731
+ justify-content: center;
732
+ width: 36px;
733
+ height: 36px;
734
+ border-radius: var(--cr-radius-full);
735
+ font-family: var(--cr-typography-label-large-14-medium-font-family);
736
+ font-size: var(--cr-typography-label-large-14-medium-font-size);
737
+ font-weight: var(--cr-typography-label-large-14-medium-font-weight);
738
+ line-height: var(--cr-typography-label-large-14-medium-line-height);
739
+ letter-spacing: var(--cr-typography-label-large-14-medium-letter-spacing);
740
+ cursor: pointer;
741
+ }
742
+ .cr-calendar__date:not(.cr-calendar__date--selected, .cr-calendar__date--disabled):hover {
743
+ background-color: var(--cr-color-fill-neutral-container-hover);
744
+ }
745
+ .cr-calendar__day--today .cr-calendar__date {
746
+ color: var(--cr-color-text-brand-base);
747
+ font-weight: var(--cr-typography-label-large-14-bold-font-weight);
748
+ }
749
+ .cr-calendar__day--other-month .cr-calendar__date,
750
+ .cr-calendar__date--disabled {
751
+ color: var(--cr-color-text-neutral-subtlest);
752
+ }
753
+ .cr-calendar__date--disabled {
754
+ cursor: not-allowed;
755
+ }
756
+ .cr-calendar__day--off .cr-calendar__date {
757
+ text-decoration: line-through;
758
+ }
759
+ .cr-calendar__date--selected {
760
+ background-color: var(--cr-color-fill-brand-base);
761
+ color: var(--cr-color-text-inverse-base);
762
+ }
763
+ .cr-calendar__day--today .cr-calendar__date--selected {
764
+ color: var(--cr-color-text-inverse-base);
765
+ }
766
+ .cr-calendar__day--other-month .cr-calendar__date--selected {
767
+ background: none;
768
+ color: var(--cr-color-text-neutral-subtlest);
769
+ }
770
+ .cr-calendar__day--middle:not(.cr-calendar__day--other-month) .cr-calendar__date--selected {
771
+ background-color: var(--cr-color-fill-brand-subtle);
772
+ color: var(--cr-color-text-neutral-base);
773
+ }
774
+ .cr-calendar__picker {
775
+ display: grid;
776
+ margin-top: var(--cr-spacing-spacing-6);
777
+ align-content: space-between;
778
+ width: 252px;
779
+ }
780
+ .cr-calendar__picker--months {
781
+ grid-template-columns: repeat(3, 1fr);
782
+ grid-template-rows: repeat(4, 29px);
783
+ height: 144px;
784
+ }
785
+ .cr-calendar__picker--years {
786
+ grid-template-columns: repeat(2, 1fr);
787
+ height: 184px;
788
+ }
789
+ .cr-calendar__option {
790
+ display: flex;
791
+ align-items: center;
792
+ justify-content: center;
793
+ padding: var(--cr-padding-padding-2);
794
+ border-radius: var(--cr-radius-small);
795
+ font-family: var(--cr-typography-label-large-14-regular-font-family);
796
+ font-size: var(--cr-typography-label-large-14-regular-font-size);
797
+ font-weight: var(--cr-typography-label-large-14-regular-font-weight);
798
+ line-height: var(--cr-typography-label-large-14-regular-line-height);
799
+ letter-spacing: var(--cr-typography-label-large-14-regular-letter-spacing);
800
+ cursor: pointer;
801
+ }
802
+ .cr-calendar__picker--months .cr-calendar__option {
803
+ align-self: center;
804
+ }
805
+ .cr-calendar__option:not(.cr-calendar__option--selected, .cr-calendar__option--disabled):hover {
806
+ background-color: var(--cr-color-fill-neutral-subtlest);
807
+ }
808
+ .cr-calendar__option--selected {
809
+ background-color: var(--cr-color-fill-brand-subtle);
810
+ }
811
+ .cr-calendar__option--disabled {
812
+ color: var(--cr-color-text-neutral-subtlest);
813
+ cursor: not-allowed;
814
+ }
815
+
562
816
  /* src/components/Card/Card.css */
563
817
  .cr-card {
564
818
  display: flex;
@@ -1126,6 +1380,54 @@
1126
1380
  }
1127
1381
  }
1128
1382
 
1383
+ /* src/components/DatePicker/DatePicker.css */
1384
+ .cr-datepicker__root {
1385
+ position: relative;
1386
+ display: flex;
1387
+ }
1388
+ .cr-datepicker__input {
1389
+ flex: 1;
1390
+ box-sizing: border-box;
1391
+ min-width: 0;
1392
+ padding-right: calc(var(--cr-padding-padding-5) + 20px + var(--cr-spacing-spacing-3));
1393
+ outline: none;
1394
+ }
1395
+ .cr-datepicker__input::placeholder {
1396
+ color: var(--cr-color-text-neutral-subtlest);
1397
+ opacity: 1;
1398
+ }
1399
+ .cr-field--disabled .cr-datepicker__input {
1400
+ cursor: not-allowed;
1401
+ }
1402
+ .cr-datepicker__button {
1403
+ position: absolute;
1404
+ top: 50%;
1405
+ right: var(--cr-padding-padding-5);
1406
+ display: inline-flex;
1407
+ padding: 0;
1408
+ border: 0;
1409
+ background: none;
1410
+ color: inherit;
1411
+ font-size: 20px;
1412
+ cursor: pointer;
1413
+ transform: translateY(-50%);
1414
+ }
1415
+ .cr-datepicker__button:disabled {
1416
+ color: var(--cr-color-icon-disabled-base);
1417
+ cursor: not-allowed;
1418
+ }
1419
+ .cr-datepicker__panel {
1420
+ padding: var(--cr-padding-padding-6);
1421
+ border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
1422
+ border-radius: var(--cr-radius-large);
1423
+ background-color: var(--cr-color-fill-neutral-container);
1424
+ box-shadow: var(--cr-elevation-gray-bottom-5);
1425
+ margin-top: var(--cr-spacing-spacing-3);
1426
+ }
1427
+ .cr-datepicker__panel[data-cr-lado=acima] {
1428
+ margin-top: calc(-1 * var(--cr-spacing-spacing-3));
1429
+ }
1430
+
1129
1431
  /* src/components/Divider/Divider.css */
1130
1432
  .cr-divider {
1131
1433
  --cr-divider-color: var(--cr-color-stroke-neutral-base);
@@ -1160,96 +1462,6 @@
1160
1462
  display: none;
1161
1463
  }
1162
1464
 
1163
- /* src/components/IconButton/IconButton.css */
1164
- .cr-icon-button {
1165
- display: inline-flex;
1166
- flex-shrink: 0;
1167
- align-items: center;
1168
- justify-content: center;
1169
- padding: var(--cr-padding-padding-3);
1170
- border: var(--cr-stroke-x-small) solid transparent;
1171
- border-radius: var(--cr-radius-full);
1172
- background-color: transparent;
1173
- cursor: pointer;
1174
- transition: background-color 120ms ease, border-color 120ms ease;
1175
- }
1176
- .cr-icon-button:focus-visible {
1177
- outline: none;
1178
- box-shadow: var(--cr-effects-focus-ring);
1179
- }
1180
- .cr-icon-button:disabled {
1181
- cursor: not-allowed;
1182
- }
1183
- .cr-icon-button--large {
1184
- width: 48px;
1185
- height: 48px;
1186
- }
1187
- .cr-icon-button--medium {
1188
- width: 42px;
1189
- height: 42px;
1190
- }
1191
- .cr-icon-button--small {
1192
- width: 36px;
1193
- height: 36px;
1194
- }
1195
- .cr-icon-button--xsmall {
1196
- width: 32px;
1197
- height: 32px;
1198
- }
1199
- .cr-icon-button__icon {
1200
- display: inline-flex;
1201
- font-size: 20px;
1202
- }
1203
- .cr-icon-button--xsmall .cr-icon-button__icon {
1204
- font-size: 16px;
1205
- }
1206
- .cr-icon-button--primary {
1207
- background-color: var(--cr-color-fill-brand-base);
1208
- color: var(--cr-color-icon-inverse-base);
1209
- }
1210
- .cr-icon-button--primary:hover:not(:disabled) {
1211
- background-color: var(--cr-color-fill-brand-base-hover);
1212
- }
1213
- .cr-icon-button--primary:active:not(:disabled) {
1214
- background-color: var(--cr-color-fill-brand-base-pressed);
1215
- }
1216
- .cr-icon-button--secondary {
1217
- background-color: var(--cr-color-fill-brand-subtlest);
1218
- color: var(--cr-color-icon-brand-base);
1219
- }
1220
- .cr-icon-button--secondary:hover:not(:disabled) {
1221
- background-color: var(--cr-color-fill-brand-subtlest-hover);
1222
- }
1223
- .cr-icon-button--secondary:active:not(:disabled) {
1224
- background-color: var(--cr-color-fill-brand-subtlest-pressed);
1225
- }
1226
- .cr-icon-button--tertiary {
1227
- background-color: var(--cr-color-fill-neutral-container);
1228
- border-color: var(--cr-color-stroke-neutral-bold);
1229
- color: var(--cr-color-icon-neutral-base);
1230
- }
1231
- .cr-icon-button--tertiary:hover:not(:disabled) {
1232
- background-color: var(--cr-color-fill-neutral-container-hover);
1233
- }
1234
- .cr-icon-button--tertiary:active:not(:disabled) {
1235
- background-color: var(--cr-color-fill-neutral-container-pressed);
1236
- }
1237
- .cr-icon-button--primary:disabled,
1238
- .cr-icon-button--secondary:disabled,
1239
- .cr-icon-button--tertiary:disabled {
1240
- background-color: var(--cr-color-fill-disabled-base);
1241
- color: var(--cr-color-icon-disabled-on-fill);
1242
- }
1243
- .cr-icon-button--tertiary:disabled {
1244
- border-color: var(--cr-color-stroke-disabled-base);
1245
- }
1246
- .cr-icon-button--ghost {
1247
- color: var(--cr-color-icon-brand-base);
1248
- }
1249
- .cr-icon-button--ghost:hover:not(:disabled) {
1250
- background-color: var(--cr-color-fill-brand-subtlest);
1251
- }
1252
-
1253
1465
  /* src/components/Drawer/Drawer.css */
1254
1466
  .cr-drawer__mask {
1255
1467
  box-sizing: border-box;