qt-ui-kit 1.0.70 → 1.0.72

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/dist/style.css CHANGED
@@ -5,9 +5,12 @@
5
5
  :root, :host {
6
6
  --font-sans: var(--font-geist-sans);
7
7
  --font-mono: var(--font-geist-mono);
8
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
8
9
  --color-gray-100: oklch(96.7% 0.003 264.542);
10
+ --color-gray-200: oklch(92.8% 0.006 264.531);
9
11
  --color-gray-400: oklch(70.7% 0.022 261.325);
10
12
  --color-gray-700: oklch(37.3% 0.034 259.733);
13
+ --color-gray-800: oklch(27.8% 0.033 256.848);
11
14
  --color-gray-900: oklch(21% 0.034 264.665);
12
15
  --color-neutral-900: oklch(20.5% 0 0);
13
16
  --color-black: #000;
@@ -19,7 +22,9 @@
19
22
  --text-sm--line-height: calc(1.25 / 0.875);
20
23
  --font-weight-normal: 400;
21
24
  --font-weight-medium: 500;
25
+ --font-weight-semibold: 600;
22
26
  --font-weight-bold: 700;
27
+ --tracking-wide: 0.025em;
23
28
  --radius-md: 0.375rem;
24
29
  --radius-lg: 0.5rem;
25
30
  --radius-xl: 0.75rem;
@@ -35,10 +40,12 @@
35
40
  --color-qtneutral-500: #CDCDCD;
36
41
  --color-qtneutral-400: #EAE9F0;
37
42
  --color-qtneutral-700: #82818E;
43
+ --color-qtneutral-800: #46454A;
38
44
  --color-qtneutral-900: #1D1D1F;
39
45
  --color-qtpurple-300: #D8D7FF;
40
46
  --color-qtpurple-200: #EFEEFF;
41
47
  --color-qtpurple-500: #6558FD;
48
+ --color-qtpurple-800: #4D4273;
42
49
  --color-qtgreen-300: #D2F8B6;
43
50
  --color-qtgreen-200: #E8FE99;
44
51
  --color-qtgreen-50: #F1FEE8;
@@ -207,6 +214,48 @@
207
214
  }
208
215
  }
209
216
  @layer utilities {
217
+ .absolute {
218
+ position: absolute;
219
+ }
220
+ .relative {
221
+ position: relative;
222
+ }
223
+ .top-0 {
224
+ top: calc(var(--spacing) * 0);
225
+ }
226
+ .top-1\/2 {
227
+ top: calc(1/2 * 100%);
228
+ }
229
+ .top-3 {
230
+ top: calc(var(--spacing) * 3);
231
+ }
232
+ .right-0 {
233
+ right: calc(var(--spacing) * 0);
234
+ }
235
+ .right-\[-6px\] {
236
+ right: -6px;
237
+ }
238
+ .bottom-0 {
239
+ bottom: calc(var(--spacing) * 0);
240
+ }
241
+ .left-1\/2 {
242
+ left: calc(1/2 * 100%);
243
+ }
244
+ .left-\[-6px\] {
245
+ left: -6px;
246
+ }
247
+ .left-full {
248
+ left: 100%;
249
+ }
250
+ .z-0 {
251
+ z-index: 0;
252
+ }
253
+ .z-10 {
254
+ z-index: 10;
255
+ }
256
+ .z-50 {
257
+ z-index: 50;
258
+ }
210
259
  .col-span-2 {
211
260
  grid-column: span 2 / span 2;
212
261
  }
@@ -219,6 +268,9 @@
219
268
  .mb-2 {
220
269
  margin-bottom: calc(var(--spacing) * 2);
221
270
  }
271
+ .ml-2 {
272
+ margin-left: calc(var(--spacing) * 2);
273
+ }
222
274
  .line-clamp-1 {
223
275
  overflow: hidden;
224
276
  display: -webkit-box;
@@ -261,6 +313,15 @@
261
313
  .grid {
262
314
  display: grid;
263
315
  }
316
+ .inline-block {
317
+ display: inline-block;
318
+ }
319
+ .h-3\.5 {
320
+ height: calc(var(--spacing) * 3.5);
321
+ }
322
+ .h-4 {
323
+ height: calc(var(--spacing) * 4);
324
+ }
264
325
  .h-\[17px\] {
265
326
  height: 17px;
266
327
  }
@@ -298,6 +359,15 @@
298
359
  .max-h-full {
299
360
  max-height: 100%;
300
361
  }
362
+ .w-3\.5 {
363
+ width: calc(var(--spacing) * 3.5);
364
+ }
365
+ .w-4 {
366
+ width: calc(var(--spacing) * 4);
367
+ }
368
+ .w-48 {
369
+ width: calc(var(--spacing) * 48);
370
+ }
301
371
  .w-\[24px\] {
302
372
  width: 24px;
303
373
  }
@@ -351,9 +421,27 @@
351
421
  .grow {
352
422
  flex-grow: 1;
353
423
  }
424
+ .-translate-x-1\/2 {
425
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
426
+ translate: var(--tw-translate-x) var(--tw-translate-y);
427
+ }
428
+ .-translate-y-1\/2 {
429
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
430
+ translate: var(--tw-translate-x) var(--tw-translate-y);
431
+ }
432
+ .translate-y-1\/2 {
433
+ --tw-translate-y: calc(1/2 * 100%);
434
+ translate: var(--tw-translate-x) var(--tw-translate-y);
435
+ }
436
+ .rotate-45 {
437
+ rotate: 45deg;
438
+ }
354
439
  .transform {
355
440
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
356
441
  }
442
+ .cursor-pointer {
443
+ cursor: pointer;
444
+ }
357
445
  .grid-cols-1 {
358
446
  grid-template-columns: repeat(1, minmax(0, 1fr));
359
447
  }
@@ -417,6 +505,13 @@
417
505
  .gap-\[40px\] {
418
506
  gap: 40px;
419
507
  }
508
+ .space-y-2 {
509
+ :where(& > :not(:last-child)) {
510
+ --tw-space-y-reverse: 0;
511
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
512
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
513
+ }
514
+ }
420
515
  .space-y-3 {
421
516
  :where(& > :not(:last-child)) {
422
517
  --tw-space-y-reverse: 0;
@@ -485,6 +580,10 @@
485
580
  border-style: var(--tw-border-style);
486
581
  border-width: 3px;
487
582
  }
583
+ .border-t {
584
+ border-top-style: var(--tw-border-style);
585
+ border-top-width: 1px;
586
+ }
488
587
  .border-t-\[2px\] {
489
588
  border-top-style: var(--tw-border-style);
490
589
  border-top-width: 2px;
@@ -496,6 +595,9 @@
496
595
  .border-black {
497
596
  border-color: var(--color-black);
498
597
  }
598
+ .border-gray-200 {
599
+ border-color: var(--color-gray-200);
600
+ }
499
601
  .border-neutral-6 {
500
602
  border-color: var(--color-neutral-6);
501
603
  }
@@ -526,6 +628,9 @@
526
628
  .border-transparent {
527
629
  border-color: transparent;
528
630
  }
631
+ .bg-black {
632
+ background-color: var(--color-black);
633
+ }
529
634
  .bg-gray-100 {
530
635
  background-color: var(--color-gray-100);
531
636
  }
@@ -556,6 +661,9 @@
556
661
  .bg-qtpurple-500 {
557
662
  background-color: var(--color-qtpurple-500);
558
663
  }
664
+ .bg-qtpurple-800 {
665
+ background-color: var(--color-qtpurple-800);
666
+ }
559
667
  .bg-qtred-50 {
560
668
  background-color: var(--color-qtred-50);
561
669
  }
@@ -592,12 +700,18 @@
592
700
  .py-2 {
593
701
  padding-block: calc(var(--spacing) * 2);
594
702
  }
703
+ .py-3 {
704
+ padding-block: calc(var(--spacing) * 3);
705
+ }
595
706
  .py-4 {
596
707
  padding-block: calc(var(--spacing) * 4);
597
708
  }
598
709
  .py-12 {
599
710
  padding-block: calc(var(--spacing) * 12);
600
711
  }
712
+ .pt-2 {
713
+ padding-top: calc(var(--spacing) * 2);
714
+ }
601
715
  .pr-2 {
602
716
  padding-right: calc(var(--spacing) * 2);
603
717
  }
@@ -650,6 +764,14 @@
650
764
  --tw-font-weight: var(--font-weight-normal);
651
765
  font-weight: var(--font-weight-normal);
652
766
  }
767
+ .font-semibold {
768
+ --tw-font-weight: var(--font-weight-semibold);
769
+ font-weight: var(--font-weight-semibold);
770
+ }
771
+ .tracking-wide {
772
+ --tw-tracking: var(--tracking-wide);
773
+ letter-spacing: var(--tracking-wide);
774
+ }
653
775
  .break-words {
654
776
  overflow-wrap: break-word;
655
777
  }
@@ -665,9 +787,15 @@
665
787
  .text-gray-700 {
666
788
  color: var(--color-gray-700);
667
789
  }
790
+ .text-gray-800 {
791
+ color: var(--color-gray-800);
792
+ }
668
793
  .text-gray-900 {
669
794
  color: var(--color-gray-900);
670
795
  }
796
+ .text-indigo-600 {
797
+ color: var(--color-indigo-600);
798
+ }
671
799
  .text-neutral-1 {
672
800
  color: var(--color-neutral-1);
673
801
  }
@@ -683,6 +811,9 @@
683
811
  .text-qtneutral-700 {
684
812
  color: var(--color-qtneutral-700);
685
813
  }
814
+ .text-qtneutral-800 {
815
+ color: var(--color-qtneutral-800);
816
+ }
686
817
  .text-qtneutral-900 {
687
818
  color: var(--color-qtneutral-900);
688
819
  }
@@ -692,6 +823,14 @@
692
823
  .text-white {
693
824
  color: var(--color-white);
694
825
  }
826
+ .shadow-lg {
827
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
828
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
829
+ }
830
+ .shadow-md {
831
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
832
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
833
+ }
695
834
  .grayscale {
696
835
  --tw-grayscale: grayscale(100%);
697
836
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -749,6 +888,13 @@
749
888
  }
750
889
  }
751
890
  }
891
+ .hover\:text-qtpurple-500 {
892
+ &:hover {
893
+ @media (hover: hover) {
894
+ color: var(--color-qtpurple-500);
895
+ }
896
+ }
897
+ }
752
898
  .hover\:grayscale-0 {
753
899
  &:hover {
754
900
  @media (hover: hover) {
@@ -762,6 +908,14 @@
762
908
  :root {
763
909
  --font-sans: 'Inter', sans-serif;
764
910
  }
911
+ .label-2 {
912
+ font-family: Inter;
913
+ font-weight: 500;
914
+ font-style: Medium;
915
+ font-size: 14px;
916
+ line-height: 120%;
917
+ letter-spacing: 0%;
918
+ }
765
919
  .label-3 {
766
920
  font-family: Inter;
767
921
  font-weight: 500;
@@ -770,6 +924,15 @@
770
924
  letter-spacing: 0%;
771
925
  text-align: right;
772
926
  }
927
+ .label-2-bold {
928
+ font-family: Inter;
929
+ font-weight: 700;
930
+ font-style: Bold;
931
+ font-size: 14px;
932
+ line-height: 120%;
933
+ letter-spacing: 0%;
934
+ color: #901212;
935
+ }
773
936
  .label-3-bold {
774
937
  font-family: Inter;
775
938
  font-weight: 500;
@@ -777,6 +940,18 @@
777
940
  line-height: 120%;
778
941
  letter-spacing: 0%;
779
942
  }
943
+ .caption-bold {
944
+ font-family: Inter;
945
+ font-weight: 600;
946
+ font-style: Semi Bold;
947
+ font-size: 12px;
948
+ line-height: 130%;
949
+ letter-spacing: 0%;
950
+ text-align: center;
951
+ }
952
+ .tooltip-shadow {
953
+ box-shadow: 0px 4px 4px 0px #00000040;
954
+ }
780
955
  .body {
781
956
  font-family: Inter;
782
957
  font-weight: 400;
@@ -879,6 +1054,21 @@
879
1054
  .no-defaults {
880
1055
  all: unset;
881
1056
  }
1057
+ @property --tw-translate-x {
1058
+ syntax: "*";
1059
+ inherits: false;
1060
+ initial-value: 0;
1061
+ }
1062
+ @property --tw-translate-y {
1063
+ syntax: "*";
1064
+ inherits: false;
1065
+ initial-value: 0;
1066
+ }
1067
+ @property --tw-translate-z {
1068
+ syntax: "*";
1069
+ inherits: false;
1070
+ initial-value: 0;
1071
+ }
882
1072
  @property --tw-rotate-x {
883
1073
  syntax: "*";
884
1074
  inherits: false;
@@ -917,6 +1107,75 @@
917
1107
  syntax: "*";
918
1108
  inherits: false;
919
1109
  }
1110
+ @property --tw-tracking {
1111
+ syntax: "*";
1112
+ inherits: false;
1113
+ }
1114
+ @property --tw-shadow {
1115
+ syntax: "*";
1116
+ inherits: false;
1117
+ initial-value: 0 0 #0000;
1118
+ }
1119
+ @property --tw-shadow-color {
1120
+ syntax: "*";
1121
+ inherits: false;
1122
+ }
1123
+ @property --tw-shadow-alpha {
1124
+ syntax: "<percentage>";
1125
+ inherits: false;
1126
+ initial-value: 100%;
1127
+ }
1128
+ @property --tw-inset-shadow {
1129
+ syntax: "*";
1130
+ inherits: false;
1131
+ initial-value: 0 0 #0000;
1132
+ }
1133
+ @property --tw-inset-shadow-color {
1134
+ syntax: "*";
1135
+ inherits: false;
1136
+ }
1137
+ @property --tw-inset-shadow-alpha {
1138
+ syntax: "<percentage>";
1139
+ inherits: false;
1140
+ initial-value: 100%;
1141
+ }
1142
+ @property --tw-ring-color {
1143
+ syntax: "*";
1144
+ inherits: false;
1145
+ }
1146
+ @property --tw-ring-shadow {
1147
+ syntax: "*";
1148
+ inherits: false;
1149
+ initial-value: 0 0 #0000;
1150
+ }
1151
+ @property --tw-inset-ring-color {
1152
+ syntax: "*";
1153
+ inherits: false;
1154
+ }
1155
+ @property --tw-inset-ring-shadow {
1156
+ syntax: "*";
1157
+ inherits: false;
1158
+ initial-value: 0 0 #0000;
1159
+ }
1160
+ @property --tw-ring-inset {
1161
+ syntax: "*";
1162
+ inherits: false;
1163
+ }
1164
+ @property --tw-ring-offset-width {
1165
+ syntax: "<length>";
1166
+ inherits: false;
1167
+ initial-value: 0px;
1168
+ }
1169
+ @property --tw-ring-offset-color {
1170
+ syntax: "*";
1171
+ inherits: false;
1172
+ initial-value: #fff;
1173
+ }
1174
+ @property --tw-ring-offset-shadow {
1175
+ syntax: "*";
1176
+ inherits: false;
1177
+ initial-value: 0 0 #0000;
1178
+ }
920
1179
  @property --tw-blur {
921
1180
  syntax: "*";
922
1181
  inherits: false;
@@ -973,6 +1232,9 @@
973
1232
  @layer properties {
974
1233
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
975
1234
  *, ::before, ::after, ::backdrop {
1235
+ --tw-translate-x: 0;
1236
+ --tw-translate-y: 0;
1237
+ --tw-translate-z: 0;
976
1238
  --tw-rotate-x: initial;
977
1239
  --tw-rotate-y: initial;
978
1240
  --tw-rotate-z: initial;
@@ -982,6 +1244,21 @@
982
1244
  --tw-border-style: solid;
983
1245
  --tw-leading: initial;
984
1246
  --tw-font-weight: initial;
1247
+ --tw-tracking: initial;
1248
+ --tw-shadow: 0 0 #0000;
1249
+ --tw-shadow-color: initial;
1250
+ --tw-shadow-alpha: 100%;
1251
+ --tw-inset-shadow: 0 0 #0000;
1252
+ --tw-inset-shadow-color: initial;
1253
+ --tw-inset-shadow-alpha: 100%;
1254
+ --tw-ring-color: initial;
1255
+ --tw-ring-shadow: 0 0 #0000;
1256
+ --tw-inset-ring-color: initial;
1257
+ --tw-inset-ring-shadow: 0 0 #0000;
1258
+ --tw-ring-inset: initial;
1259
+ --tw-ring-offset-width: 0px;
1260
+ --tw-ring-offset-color: #fff;
1261
+ --tw-ring-offset-shadow: 0 0 #0000;
985
1262
  --tw-blur: initial;
986
1263
  --tw-brightness: initial;
987
1264
  --tw-contrast: initial;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qt-ui-kit",
3
- "version": "1.0.70",
3
+ "version": "1.0.72",
4
4
  "description": "Reusable component library with Tailwind v4 and custom CSS",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",