qt-ui-kit 1.0.115 → 1.0.116

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
@@ -7,13 +7,17 @@
7
7
  --font-mono: var(--font-geist-mono);
8
8
  --color-green-100: oklch(96.2% 0.044 156.743);
9
9
  --color-green-700: oklch(52.7% 0.154 150.069);
10
+ --color-blue-500: oklch(62.3% 0.214 259.815);
10
11
  --color-indigo-600: oklch(51.1% 0.262 276.966);
11
12
  --color-gray-100: oklch(96.7% 0.003 264.542);
12
13
  --color-gray-200: oklch(92.8% 0.006 264.531);
13
14
  --color-gray-400: oklch(70.7% 0.022 261.325);
15
+ --color-gray-600: oklch(44.6% 0.03 256.802);
14
16
  --color-gray-700: oklch(37.3% 0.034 259.733);
15
17
  --color-gray-800: oklch(27.8% 0.033 256.848);
16
18
  --color-gray-900: oklch(21% 0.034 264.665);
19
+ --color-neutral-400: oklch(70.8% 0 0);
20
+ --color-neutral-500: oklch(55.6% 0 0);
17
21
  --color-neutral-900: oklch(20.5% 0 0);
18
22
  --color-black: #000;
19
23
  --color-white: #fff;
@@ -33,6 +37,7 @@
33
37
  --radius-xl: 0.75rem;
34
38
  --radius-2xl: 1rem;
35
39
  --radius-3xl: 1.5rem;
40
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
36
41
  --default-transition-duration: 150ms;
37
42
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
38
43
  --default-font-family: var(--font-sans);
@@ -250,18 +255,12 @@
250
255
  .top-\[2px\] {
251
256
  top: 2px;
252
257
  }
253
- .top-\[140\%\] {
254
- top: 140%;
255
- }
256
258
  .right-\[-6px\] {
257
259
  right: -6px;
258
260
  }
259
261
  .right-\[-7px\] {
260
262
  right: -7px;
261
263
  }
262
- .right-\[56\%\] {
263
- right: 56%;
264
- }
265
264
  .bottom-0 {
266
265
  bottom: calc(var(--spacing) * 0);
267
266
  }
@@ -289,6 +288,9 @@
289
288
  .col-span-2 {
290
289
  grid-column: span 2 / span 2;
291
290
  }
291
+ .-m-1 {
292
+ margin: calc(var(--spacing) * -1);
293
+ }
292
294
  .m-1 {
293
295
  margin: calc(var(--spacing) * 1);
294
296
  }
@@ -301,6 +303,9 @@
301
303
  .mb-2 {
302
304
  margin-bottom: calc(var(--spacing) * 2);
303
305
  }
306
+ .ml-0\.5 {
307
+ margin-left: calc(var(--spacing) * 0.5);
308
+ }
304
309
  .line-clamp-1 {
305
310
  overflow: hidden;
306
311
  display: -webkit-box;
@@ -349,6 +354,14 @@
349
354
  .table {
350
355
  display: table;
351
356
  }
357
+ .size-4 {
358
+ width: calc(var(--spacing) * 4);
359
+ height: calc(var(--spacing) * 4);
360
+ }
361
+ .size-\[16px\] {
362
+ width: 16px;
363
+ height: 16px;
364
+ }
352
365
  .h-3\.5 {
353
366
  height: calc(var(--spacing) * 3.5);
354
367
  }
@@ -358,6 +371,9 @@
358
371
  .h-6 {
359
372
  height: calc(var(--spacing) * 6);
360
373
  }
374
+ .h-10 {
375
+ height: calc(var(--spacing) * 10);
376
+ }
361
377
  .h-\[17px\] {
362
378
  height: 17px;
363
379
  }
@@ -398,6 +414,9 @@
398
414
  .min-h-0 {
399
415
  min-height: calc(var(--spacing) * 0);
400
416
  }
417
+ .min-h-\[150px\] {
418
+ min-height: 150px;
419
+ }
401
420
  .w-3\.5 {
402
421
  width: calc(var(--spacing) * 3.5);
403
422
  }
@@ -428,11 +447,8 @@
428
447
  .w-\[66px\] {
429
448
  width: 66px;
430
449
  }
431
- .w-\[100px\] {
432
- width: 100px;
433
- }
434
- .w-\[409px\] {
435
- width: 409px;
450
+ .w-auto {
451
+ width: auto;
436
452
  }
437
453
  .w-full {
438
454
  width: 100%;
@@ -511,6 +527,9 @@
511
527
  .list-disc {
512
528
  list-style-type: disc;
513
529
  }
530
+ .grid-flow-col {
531
+ grid-auto-flow: column;
532
+ }
514
533
  .grid-cols-1 {
515
534
  grid-template-columns: repeat(1, minmax(0, 1fr));
516
535
  }
@@ -529,12 +548,12 @@
529
548
  .grid-cols-8 {
530
549
  grid-template-columns: repeat(8, minmax(0, 1fr));
531
550
  }
532
- .grid-cols-13 {
533
- grid-template-columns: repeat(13, minmax(0, 1fr));
534
- }
535
551
  .grid-cols-14 {
536
552
  grid-template-columns: repeat(14, minmax(0, 1fr));
537
553
  }
554
+ .grid-rows-4 {
555
+ grid-template-rows: repeat(4, minmax(0, 1fr));
556
+ }
538
557
  .flex-col {
539
558
  flex-direction: column;
540
559
  }
@@ -601,6 +620,9 @@
601
620
  .gap-8 {
602
621
  gap: calc(var(--spacing) * 8);
603
622
  }
623
+ .gap-10 {
624
+ gap: calc(var(--spacing) * 10);
625
+ }
604
626
  .gap-\[4px\] {
605
627
  gap: 4px;
606
628
  }
@@ -628,6 +650,33 @@
628
650
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
629
651
  }
630
652
  }
653
+ .space-y-4 {
654
+ :where(& > :not(:last-child)) {
655
+ --tw-space-y-reverse: 0;
656
+ margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
657
+ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
658
+ }
659
+ }
660
+ .space-y-6 {
661
+ :where(& > :not(:last-child)) {
662
+ --tw-space-y-reverse: 0;
663
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
664
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
665
+ }
666
+ }
667
+ .space-x-2 {
668
+ :where(& > :not(:last-child)) {
669
+ --tw-space-x-reverse: 0;
670
+ margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
671
+ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
672
+ }
673
+ }
674
+ .overflow-clip {
675
+ overflow: clip;
676
+ }
677
+ .overflow-visible {
678
+ overflow: visible;
679
+ }
631
680
  .overflow-x-hidden {
632
681
  overflow-x: hidden;
633
682
  }
@@ -646,6 +695,9 @@
646
695
  .rounded-3xl {
647
696
  border-radius: var(--radius-3xl);
648
697
  }
698
+ .rounded-\[4px\] {
699
+ border-radius: 4px;
700
+ }
649
701
  .rounded-full {
650
702
  border-radius: calc(infinity * 1px);
651
703
  }
@@ -671,12 +723,18 @@
671
723
  border-bottom-right-radius: var(--radius-2xl);
672
724
  border-bottom-left-radius: var(--radius-2xl);
673
725
  }
726
+ .rounded-br-2xl {
727
+ border-bottom-right-radius: var(--radius-2xl);
728
+ }
674
729
  .rounded-br-3xl {
675
730
  border-bottom-right-radius: var(--radius-3xl);
676
731
  }
677
732
  .rounded-br-md {
678
733
  border-bottom-right-radius: var(--radius-md);
679
734
  }
735
+ .rounded-bl-2xl {
736
+ border-bottom-left-radius: var(--radius-2xl);
737
+ }
680
738
  .rounded-bl-3xl {
681
739
  border-bottom-left-radius: var(--radius-3xl);
682
740
  }
@@ -735,6 +793,12 @@
735
793
  .border-neutral-6 {
736
794
  border-color: var(--color-neutral-6);
737
795
  }
796
+ .border-neutral-400 {
797
+ border-color: var(--color-neutral-400);
798
+ }
799
+ .border-neutral-500 {
800
+ border-color: var(--color-neutral-500);
801
+ }
738
802
  .border-qtgreen-300 {
739
803
  border-color: var(--color-qtgreen-300);
740
804
  }
@@ -774,6 +838,9 @@
774
838
  .bg-black {
775
839
  background-color: var(--color-black);
776
840
  }
841
+ .bg-blue-500 {
842
+ background-color: var(--color-blue-500);
843
+ }
777
844
  .bg-gray-100 {
778
845
  background-color: var(--color-gray-100);
779
846
  }
@@ -840,6 +907,9 @@
840
907
  .p-0 {
841
908
  padding: calc(var(--spacing) * 0);
842
909
  }
910
+ .p-1 {
911
+ padding: calc(var(--spacing) * 1);
912
+ }
843
913
  .p-2 {
844
914
  padding: calc(var(--spacing) * 2);
845
915
  }
@@ -852,6 +922,9 @@
852
922
  .p-6 {
853
923
  padding: calc(var(--spacing) * 6);
854
924
  }
925
+ .p-8 {
926
+ padding: calc(var(--spacing) * 8);
927
+ }
855
928
  .p-\[0\] {
856
929
  padding: 0;
857
930
  }
@@ -961,6 +1034,9 @@
961
1034
  --tw-tracking: var(--tracking-wide);
962
1035
  letter-spacing: var(--tracking-wide);
963
1036
  }
1037
+ .text-nowrap {
1038
+ text-wrap: nowrap;
1039
+ }
964
1040
  .break-words {
965
1041
  overflow-wrap: break-word;
966
1042
  }
@@ -973,6 +1049,9 @@
973
1049
  .whitespace-pre-line {
974
1050
  white-space: pre-line;
975
1051
  }
1052
+ .text-gray-600 {
1053
+ color: var(--color-gray-600);
1054
+ }
976
1055
  .text-gray-700 {
977
1056
  color: var(--color-gray-700);
978
1057
  }
@@ -1027,9 +1106,15 @@
1027
1106
  .underline {
1028
1107
  text-decoration-line: underline;
1029
1108
  }
1109
+ .opacity-0 {
1110
+ opacity: 0%;
1111
+ }
1030
1112
  .opacity-50 {
1031
1113
  opacity: 50%;
1032
1114
  }
1115
+ .opacity-100 {
1116
+ opacity: 100%;
1117
+ }
1033
1118
  .shadow-lg {
1034
1119
  --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));
1035
1120
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1055,6 +1140,14 @@
1055
1140
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1056
1141
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1057
1142
  }
1143
+ .duration-300 {
1144
+ --tw-duration: 300ms;
1145
+ transition-duration: 300ms;
1146
+ }
1147
+ .ease-in-out {
1148
+ --tw-ease: var(--ease-in-out);
1149
+ transition-timing-function: var(--ease-in-out);
1150
+ }
1058
1151
  .outline-none {
1059
1152
  --tw-outline-style: none;
1060
1153
  outline-style: none;
@@ -1143,13 +1236,6 @@
1143
1236
  }
1144
1237
  }
1145
1238
  }
1146
- .hover\:bg-white {
1147
- &:hover {
1148
- @media (hover: hover) {
1149
- background-color: var(--color-white);
1150
- }
1151
- }
1152
- }
1153
1239
  .hover\:text-qtpurple-500 {
1154
1240
  &:hover {
1155
1241
  @media (hover: hover) {
@@ -1411,6 +1497,11 @@
1411
1497
  inherits: false;
1412
1498
  initial-value: 0;
1413
1499
  }
1500
+ @property --tw-space-x-reverse {
1501
+ syntax: "*";
1502
+ inherits: false;
1503
+ initial-value: 0;
1504
+ }
1414
1505
  @property --tw-border-style {
1415
1506
  syntax: "*";
1416
1507
  inherits: false;
@@ -1546,6 +1637,14 @@
1546
1637
  syntax: "*";
1547
1638
  inherits: false;
1548
1639
  }
1640
+ @property --tw-duration {
1641
+ syntax: "*";
1642
+ inherits: false;
1643
+ }
1644
+ @property --tw-ease {
1645
+ syntax: "*";
1646
+ inherits: false;
1647
+ }
1549
1648
  @layer properties {
1550
1649
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1551
1650
  *, ::before, ::after, ::backdrop {
@@ -1558,6 +1657,7 @@
1558
1657
  --tw-skew-x: initial;
1559
1658
  --tw-skew-y: initial;
1560
1659
  --tw-space-y-reverse: 0;
1660
+ --tw-space-x-reverse: 0;
1561
1661
  --tw-border-style: solid;
1562
1662
  --tw-leading: initial;
1563
1663
  --tw-font-weight: initial;
@@ -1589,6 +1689,8 @@
1589
1689
  --tw-drop-shadow-color: initial;
1590
1690
  --tw-drop-shadow-alpha: 100%;
1591
1691
  --tw-drop-shadow-size: initial;
1692
+ --tw-duration: initial;
1693
+ --tw-ease: initial;
1592
1694
  }
1593
1695
  }
1594
1696
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qt-ui-kit",
3
- "version": "1.0.115",
3
+ "version": "1.0.116",
4
4
  "description": "Reusable component library with Tailwind v4 and custom CSS",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",