qt-ui-kit 1.0.1 → 1.0.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 (2) hide show
  1. package/dist/style.css +963 -0
  2. package/package.json +52 -45
package/dist/style.css ADDED
@@ -0,0 +1,963 @@
1
+ /*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: var(--font-geist-sans);
7
+ --font-mono: var(--font-geist-mono);
8
+ --color-gray-100: oklch(96.7% 0.003 264.542);
9
+ --color-gray-400: oklch(70.7% 0.022 261.325);
10
+ --color-gray-700: oklch(37.3% 0.034 259.733);
11
+ --color-gray-900: oklch(21% 0.034 264.665);
12
+ --color-neutral-900: oklch(20.5% 0 0);
13
+ --color-black: #000;
14
+ --color-white: #fff;
15
+ --spacing: 0.25rem;
16
+ --text-xs: 0.75rem;
17
+ --text-xs--line-height: calc(1 / 0.75);
18
+ --text-sm: 0.875rem;
19
+ --text-sm--line-height: calc(1.25 / 0.875);
20
+ --font-weight-normal: 400;
21
+ --font-weight-medium: 500;
22
+ --font-weight-bold: 700;
23
+ --radius-md: 0.375rem;
24
+ --radius-lg: 0.5rem;
25
+ --radius-xl: 0.75rem;
26
+ --radius-2xl: 1rem;
27
+ --radius-3xl: 1.5rem;
28
+ --default-font-family: var(--font-sans);
29
+ --default-mono-font-family: var(--font-mono);
30
+ --color-neutral-1: #1D1D1F;
31
+ --color-neutral-6: #F5F5F5;
32
+ --color-qtneutral-100: #FAFAFC;
33
+ --color-qtneutral-200: #F5F5F8;
34
+ --color-qtneutral-300: #F3F2F8;
35
+ --color-qtneutral-500: #CDCDCD;
36
+ --color-qtneutral-400: #EAE9F0;
37
+ --color-qtneutral-700: #82818E;
38
+ --color-qtneutral-900: #1D1D1F;
39
+ --color-qtpurple-300: #D8D7FF;
40
+ --color-qtpurple-200: #EFEEFF;
41
+ --color-qtpurple-500: #6558FD;
42
+ --color-qtgreen-300: #D2F8B6;
43
+ --color-qtgreen-200: #E8FE99;
44
+ --color-qtgreen-50: #F1FEE8;
45
+ --color-qtred-400: #FF8578;
46
+ --color-qtred-50: #FFECEA;
47
+ --color-qtorange-300: #FFD991;
48
+ --color-qtorange-50: #FFF5E1;
49
+ }
50
+ }
51
+ @layer base {
52
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
53
+ box-sizing: border-box;
54
+ margin: 0;
55
+ padding: 0;
56
+ border: 0 solid;
57
+ }
58
+ html, :host {
59
+ line-height: 1.5;
60
+ -webkit-text-size-adjust: 100%;
61
+ -moz-tab-size: 4;
62
+ -o-tab-size: 4;
63
+ tab-size: 4;
64
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
65
+ font-feature-settings: var(--default-font-feature-settings, normal);
66
+ font-variation-settings: var(--default-font-variation-settings, normal);
67
+ -webkit-tap-highlight-color: transparent;
68
+ }
69
+ hr {
70
+ height: 0;
71
+ color: inherit;
72
+ border-top-width: 1px;
73
+ }
74
+ abbr:where([title]) {
75
+ -webkit-text-decoration: underline dotted;
76
+ text-decoration: underline dotted;
77
+ }
78
+ h1, h2, h3, h4, h5, h6 {
79
+ font-size: inherit;
80
+ font-weight: inherit;
81
+ }
82
+ a {
83
+ color: inherit;
84
+ -webkit-text-decoration: inherit;
85
+ text-decoration: inherit;
86
+ }
87
+ b, strong {
88
+ font-weight: bolder;
89
+ }
90
+ code, kbd, samp, pre {
91
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
92
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
93
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
94
+ font-size: 1em;
95
+ }
96
+ small {
97
+ font-size: 80%;
98
+ }
99
+ sub, sup {
100
+ font-size: 75%;
101
+ line-height: 0;
102
+ position: relative;
103
+ vertical-align: baseline;
104
+ }
105
+ sub {
106
+ bottom: -0.25em;
107
+ }
108
+ sup {
109
+ top: -0.5em;
110
+ }
111
+ table {
112
+ text-indent: 0;
113
+ border-color: inherit;
114
+ border-collapse: collapse;
115
+ }
116
+ :-moz-focusring {
117
+ outline: auto;
118
+ }
119
+ progress {
120
+ vertical-align: baseline;
121
+ }
122
+ summary {
123
+ display: list-item;
124
+ }
125
+ ol, ul, menu {
126
+ list-style: none;
127
+ }
128
+ img, svg, video, canvas, audio, iframe, embed, object {
129
+ display: block;
130
+ vertical-align: middle;
131
+ }
132
+ img, video {
133
+ max-width: 100%;
134
+ height: auto;
135
+ }
136
+ button, input, select, optgroup, textarea, ::file-selector-button {
137
+ font: inherit;
138
+ font-feature-settings: inherit;
139
+ font-variation-settings: inherit;
140
+ letter-spacing: inherit;
141
+ color: inherit;
142
+ border-radius: 0;
143
+ background-color: transparent;
144
+ opacity: 1;
145
+ }
146
+ :where(select:is([multiple], [size])) optgroup {
147
+ font-weight: bolder;
148
+ }
149
+ :where(select:is([multiple], [size])) optgroup option {
150
+ padding-inline-start: 20px;
151
+ }
152
+ ::file-selector-button {
153
+ margin-inline-end: 4px;
154
+ }
155
+ ::-moz-placeholder {
156
+ opacity: 1;
157
+ }
158
+ ::placeholder {
159
+ opacity: 1;
160
+ }
161
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
162
+ ::-moz-placeholder {
163
+ color: currentcolor;
164
+ @supports (color: color-mix(in lab, red, red)) {
165
+ color: color-mix(in oklab, currentcolor 50%, transparent);
166
+ }
167
+ }
168
+ ::placeholder {
169
+ color: currentcolor;
170
+ @supports (color: color-mix(in lab, red, red)) {
171
+ color: color-mix(in oklab, currentcolor 50%, transparent);
172
+ }
173
+ }
174
+ }
175
+ textarea {
176
+ resize: vertical;
177
+ }
178
+ ::-webkit-search-decoration {
179
+ -webkit-appearance: none;
180
+ }
181
+ ::-webkit-date-and-time-value {
182
+ min-height: 1lh;
183
+ text-align: inherit;
184
+ }
185
+ ::-webkit-datetime-edit {
186
+ display: inline-flex;
187
+ }
188
+ ::-webkit-datetime-edit-fields-wrapper {
189
+ padding: 0;
190
+ }
191
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
192
+ padding-block: 0;
193
+ }
194
+ :-moz-ui-invalid {
195
+ box-shadow: none;
196
+ }
197
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
198
+ -webkit-appearance: button;
199
+ -moz-appearance: button;
200
+ appearance: button;
201
+ }
202
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
203
+ height: auto;
204
+ }
205
+ [hidden]:where(:not([hidden="until-found"])) {
206
+ display: none !important;
207
+ }
208
+ }
209
+ @layer utilities {
210
+ .col-span-2 {
211
+ grid-column: span 2 / span 2;
212
+ }
213
+ .m-1 {
214
+ margin: calc(var(--spacing) * 1);
215
+ }
216
+ .mt-2 {
217
+ margin-top: calc(var(--spacing) * 2);
218
+ }
219
+ .mb-2 {
220
+ margin-bottom: calc(var(--spacing) * 2);
221
+ }
222
+ .line-clamp-3 {
223
+ overflow: hidden;
224
+ display: -webkit-box;
225
+ -webkit-box-orient: vertical;
226
+ -webkit-line-clamp: 3;
227
+ }
228
+ .line-clamp-none {
229
+ overflow: visible;
230
+ display: block;
231
+ -webkit-box-orient: horizontal;
232
+ -webkit-line-clamp: unset;
233
+ }
234
+ .flex {
235
+ display: flex;
236
+ }
237
+ .grid {
238
+ display: grid;
239
+ }
240
+ .h-\[17px\] {
241
+ height: 17px;
242
+ }
243
+ .h-\[18px\] {
244
+ height: 18px;
245
+ }
246
+ .h-\[24px\] {
247
+ height: 24px;
248
+ }
249
+ .h-\[28\.8px\] {
250
+ height: 28.8px;
251
+ }
252
+ .h-\[32px\] {
253
+ height: 32px;
254
+ }
255
+ .h-\[36px\] {
256
+ height: 36px;
257
+ }
258
+ .h-\[40px\] {
259
+ height: 40px;
260
+ }
261
+ .h-\[44px\] {
262
+ height: 44px;
263
+ }
264
+ .h-\[136px\] {
265
+ height: 136px;
266
+ }
267
+ .h-dvh {
268
+ height: 100dvh;
269
+ }
270
+ .h-full {
271
+ height: 100%;
272
+ }
273
+ .h-min {
274
+ height: -moz-min-content;
275
+ height: min-content;
276
+ }
277
+ .max-h-\[950px\] {
278
+ max-height: 950px;
279
+ }
280
+ .w-\[24px\] {
281
+ width: 24px;
282
+ }
283
+ .w-\[28\.8px\] {
284
+ width: 28.8px;
285
+ }
286
+ .w-\[32px\] {
287
+ width: 32px;
288
+ }
289
+ .w-\[36px\] {
290
+ width: 36px;
291
+ }
292
+ .w-\[44px\] {
293
+ width: 44px;
294
+ }
295
+ .w-\[66px\] {
296
+ width: 66px;
297
+ }
298
+ .w-\[309px\] {
299
+ width: 309px;
300
+ }
301
+ .w-\[409px\] {
302
+ width: 409px;
303
+ }
304
+ .w-full {
305
+ width: 100%;
306
+ }
307
+ .w-max {
308
+ width: -moz-max-content;
309
+ width: max-content;
310
+ }
311
+ .w-min {
312
+ width: -moz-min-content;
313
+ width: min-content;
314
+ }
315
+ .max-w-\[765px\] {
316
+ max-width: 765px;
317
+ }
318
+ .max-w-full {
319
+ max-width: 100%;
320
+ }
321
+ .min-w-\[40px\] {
322
+ min-width: 40px;
323
+ }
324
+ .flex-1 {
325
+ flex: 1;
326
+ }
327
+ .flex-none {
328
+ flex: none;
329
+ }
330
+ .transform {
331
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
332
+ }
333
+ .grid-cols-1 {
334
+ grid-template-columns: repeat(1, minmax(0, 1fr));
335
+ }
336
+ .grid-cols-2 {
337
+ grid-template-columns: repeat(2, minmax(0, 1fr));
338
+ }
339
+ .grid-cols-3 {
340
+ grid-template-columns: repeat(3, minmax(0, 1fr));
341
+ }
342
+ .grid-cols-4 {
343
+ grid-template-columns: repeat(4, minmax(0, 1fr));
344
+ }
345
+ .grid-cols-5 {
346
+ grid-template-columns: repeat(5, minmax(0, 1fr));
347
+ }
348
+ .grid-cols-7 {
349
+ grid-template-columns: repeat(7, minmax(0, 1fr));
350
+ }
351
+ .grid-cols-13 {
352
+ grid-template-columns: repeat(13, minmax(0, 1fr));
353
+ }
354
+ .grid-cols-14 {
355
+ grid-template-columns: repeat(14, minmax(0, 1fr));
356
+ }
357
+ .flex-col {
358
+ flex-direction: column;
359
+ }
360
+ .flex-wrap {
361
+ flex-wrap: wrap;
362
+ }
363
+ .place-content-between {
364
+ place-content: space-between;
365
+ }
366
+ .place-content-center {
367
+ place-content: center;
368
+ }
369
+ .place-items-center {
370
+ place-items: center;
371
+ }
372
+ .items-center {
373
+ align-items: center;
374
+ }
375
+ .gap-0\.5 {
376
+ gap: calc(var(--spacing) * 0.5);
377
+ }
378
+ .gap-1 {
379
+ gap: calc(var(--spacing) * 1);
380
+ }
381
+ .gap-2 {
382
+ gap: calc(var(--spacing) * 2);
383
+ }
384
+ .gap-4 {
385
+ gap: calc(var(--spacing) * 4);
386
+ }
387
+ .gap-8 {
388
+ gap: calc(var(--spacing) * 8);
389
+ }
390
+ .gap-\[4px\] {
391
+ gap: 4px;
392
+ }
393
+ .gap-\[40px\] {
394
+ gap: 40px;
395
+ }
396
+ .space-y-3 {
397
+ :where(& > :not(:last-child)) {
398
+ --tw-space-y-reverse: 0;
399
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
400
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
401
+ }
402
+ }
403
+ .overflow-auto {
404
+ overflow: auto;
405
+ }
406
+ .rounded-2xl {
407
+ border-radius: var(--radius-2xl);
408
+ }
409
+ .rounded-3xl {
410
+ border-radius: var(--radius-3xl);
411
+ }
412
+ .rounded-full {
413
+ border-radius: calc(infinity * 1px);
414
+ }
415
+ .rounded-lg {
416
+ border-radius: var(--radius-lg);
417
+ }
418
+ .rounded-xl {
419
+ border-radius: var(--radius-xl);
420
+ }
421
+ .rounded-t-2xl {
422
+ border-top-left-radius: var(--radius-2xl);
423
+ border-top-right-radius: var(--radius-2xl);
424
+ }
425
+ .rounded-t-3xl {
426
+ border-top-left-radius: var(--radius-3xl);
427
+ border-top-right-radius: var(--radius-3xl);
428
+ }
429
+ .rounded-t-md {
430
+ border-top-left-radius: var(--radius-md);
431
+ border-top-right-radius: var(--radius-md);
432
+ }
433
+ .rounded-b-2xl {
434
+ border-bottom-right-radius: var(--radius-2xl);
435
+ border-bottom-left-radius: var(--radius-2xl);
436
+ }
437
+ .rounded-br-3xl {
438
+ border-bottom-right-radius: var(--radius-3xl);
439
+ }
440
+ .rounded-br-md {
441
+ border-bottom-right-radius: var(--radius-md);
442
+ }
443
+ .rounded-bl-3xl {
444
+ border-bottom-left-radius: var(--radius-3xl);
445
+ }
446
+ .rounded-bl-md {
447
+ border-bottom-left-radius: var(--radius-md);
448
+ }
449
+ .border-0 {
450
+ border-style: var(--tw-border-style);
451
+ border-width: 0px;
452
+ }
453
+ .border-2 {
454
+ border-style: var(--tw-border-style);
455
+ border-width: 2px;
456
+ }
457
+ .border-\[2px\] {
458
+ border-style: var(--tw-border-style);
459
+ border-width: 2px;
460
+ }
461
+ .border-\[3px\] {
462
+ border-style: var(--tw-border-style);
463
+ border-width: 3px;
464
+ }
465
+ .border-t-\[2px\] {
466
+ border-top-style: var(--tw-border-style);
467
+ border-top-width: 2px;
468
+ }
469
+ .border-b-\[2px\] {
470
+ border-bottom-style: var(--tw-border-style);
471
+ border-bottom-width: 2px;
472
+ }
473
+ .border-black {
474
+ border-color: var(--color-black);
475
+ }
476
+ .border-neutral-6 {
477
+ border-color: var(--color-neutral-6);
478
+ }
479
+ .border-qtgreen-300 {
480
+ border-color: var(--color-qtgreen-300);
481
+ }
482
+ .border-qtneutral-400 {
483
+ border-color: var(--color-qtneutral-400);
484
+ }
485
+ .border-qtneutral-500 {
486
+ border-color: var(--color-qtneutral-500);
487
+ }
488
+ .border-qtorange-300 {
489
+ border-color: var(--color-qtorange-300);
490
+ }
491
+ .border-qtpurple-200 {
492
+ border-color: var(--color-qtpurple-200);
493
+ }
494
+ .border-qtpurple-300 {
495
+ border-color: var(--color-qtpurple-300);
496
+ }
497
+ .border-qtpurple-500 {
498
+ border-color: var(--color-qtpurple-500);
499
+ }
500
+ .border-qtred-400 {
501
+ border-color: var(--color-qtred-400);
502
+ }
503
+ .bg-gray-100 {
504
+ background-color: var(--color-gray-100);
505
+ }
506
+ .bg-neutral-6 {
507
+ background-color: var(--color-neutral-6);
508
+ }
509
+ .bg-qtgreen-50 {
510
+ background-color: var(--color-qtgreen-50);
511
+ }
512
+ .bg-qtneutral-100 {
513
+ background-color: var(--color-qtneutral-100);
514
+ }
515
+ .bg-qtneutral-200 {
516
+ background-color: var(--color-qtneutral-200);
517
+ }
518
+ .bg-qtneutral-300 {
519
+ background-color: var(--color-qtneutral-300);
520
+ }
521
+ .bg-qtneutral-500 {
522
+ background-color: var(--color-qtneutral-500);
523
+ }
524
+ .bg-qtorange-50 {
525
+ background-color: var(--color-qtorange-50);
526
+ }
527
+ .bg-qtpurple-200 {
528
+ background-color: var(--color-qtpurple-200);
529
+ }
530
+ .bg-qtpurple-500 {
531
+ background-color: var(--color-qtpurple-500);
532
+ }
533
+ .bg-qtred-50 {
534
+ background-color: var(--color-qtred-50);
535
+ }
536
+ .bg-transparent {
537
+ background-color: transparent;
538
+ }
539
+ .bg-white {
540
+ background-color: var(--color-white);
541
+ }
542
+ .object-contain {
543
+ -o-object-fit: contain;
544
+ object-fit: contain;
545
+ }
546
+ .p-0 {
547
+ padding: calc(var(--spacing) * 0);
548
+ }
549
+ .p-4 {
550
+ padding: calc(var(--spacing) * 4);
551
+ }
552
+ .p-\[45px\] {
553
+ padding: 45px;
554
+ }
555
+ .px-2 {
556
+ padding-inline: calc(var(--spacing) * 2);
557
+ }
558
+ .px-3 {
559
+ padding-inline: calc(var(--spacing) * 3);
560
+ }
561
+ .px-4 {
562
+ padding-inline: calc(var(--spacing) * 4);
563
+ }
564
+ .py-0\.5 {
565
+ padding-block: calc(var(--spacing) * 0.5);
566
+ }
567
+ .py-1 {
568
+ padding-block: calc(var(--spacing) * 1);
569
+ }
570
+ .py-2 {
571
+ padding-block: calc(var(--spacing) * 2);
572
+ }
573
+ .py-4 {
574
+ padding-block: calc(var(--spacing) * 4);
575
+ }
576
+ .py-12 {
577
+ padding-block: calc(var(--spacing) * 12);
578
+ }
579
+ .pr-2 {
580
+ padding-right: calc(var(--spacing) * 2);
581
+ }
582
+ .pr-8 {
583
+ padding-right: calc(var(--spacing) * 8);
584
+ }
585
+ .pl-4 {
586
+ padding-left: calc(var(--spacing) * 4);
587
+ }
588
+ .pl-8 {
589
+ padding-left: calc(var(--spacing) * 8);
590
+ }
591
+ .text-sm {
592
+ font-size: var(--text-sm);
593
+ line-height: var(--tw-leading, var(--text-sm--line-height));
594
+ }
595
+ .text-xs {
596
+ font-size: var(--text-xs);
597
+ line-height: var(--tw-leading, var(--text-xs--line-height));
598
+ }
599
+ .text-\[0\.7rem\] {
600
+ font-size: 0.7rem;
601
+ }
602
+ .text-\[14px\] {
603
+ font-size: 14px;
604
+ }
605
+ .leading-\[120\%\] {
606
+ --tw-leading: 120%;
607
+ line-height: 120%;
608
+ }
609
+ .leading-\[130\%\] {
610
+ --tw-leading: 130%;
611
+ line-height: 130%;
612
+ }
613
+ .font-bold {
614
+ --tw-font-weight: var(--font-weight-bold);
615
+ font-weight: var(--font-weight-bold);
616
+ }
617
+ .font-medium {
618
+ --tw-font-weight: var(--font-weight-medium);
619
+ font-weight: var(--font-weight-medium);
620
+ }
621
+ .font-normal {
622
+ --tw-font-weight: var(--font-weight-normal);
623
+ font-weight: var(--font-weight-normal);
624
+ }
625
+ .break-words {
626
+ overflow-wrap: break-word;
627
+ }
628
+ .text-gray-700 {
629
+ color: var(--color-gray-700);
630
+ }
631
+ .text-gray-900 {
632
+ color: var(--color-gray-900);
633
+ }
634
+ .text-neutral-1 {
635
+ color: var(--color-neutral-1);
636
+ }
637
+ .text-neutral-900 {
638
+ color: var(--color-neutral-900);
639
+ }
640
+ .text-qtneutral-200 {
641
+ color: var(--color-qtneutral-200);
642
+ }
643
+ .text-qtneutral-500 {
644
+ color: var(--color-qtneutral-500);
645
+ }
646
+ .text-qtneutral-700 {
647
+ color: var(--color-qtneutral-700);
648
+ }
649
+ .text-qtneutral-900 {
650
+ color: var(--color-qtneutral-900);
651
+ }
652
+ .text-qtpurple-500 {
653
+ color: var(--color-qtpurple-500);
654
+ }
655
+ .text-white {
656
+ color: var(--color-white);
657
+ }
658
+ .grayscale {
659
+ --tw-grayscale: grayscale(100%);
660
+ 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,);
661
+ }
662
+ .outline-none {
663
+ --tw-outline-style: none;
664
+ outline-style: none;
665
+ }
666
+ .select-none {
667
+ -webkit-user-select: none;
668
+ -moz-user-select: none;
669
+ user-select: none;
670
+ }
671
+ .placeholder\:text-gray-400 {
672
+ &::-moz-placeholder {
673
+ color: var(--color-gray-400);
674
+ }
675
+ &::placeholder {
676
+ color: var(--color-gray-400);
677
+ }
678
+ }
679
+ .hover\:border-2 {
680
+ &:hover {
681
+ @media (hover: hover) {
682
+ border-style: var(--tw-border-style);
683
+ border-width: 2px;
684
+ }
685
+ }
686
+ }
687
+ .hover\:border-qtneutral-500 {
688
+ &:hover {
689
+ @media (hover: hover) {
690
+ border-color: var(--color-qtneutral-500);
691
+ }
692
+ }
693
+ }
694
+ .hover\:border-qtpurple-500 {
695
+ &:hover {
696
+ @media (hover: hover) {
697
+ border-color: var(--color-qtpurple-500);
698
+ }
699
+ }
700
+ }
701
+ .hover\:bg-qtgreen-200 {
702
+ &:hover {
703
+ @media (hover: hover) {
704
+ background-color: var(--color-qtgreen-200);
705
+ }
706
+ }
707
+ }
708
+ .hover\:bg-qtneutral-200 {
709
+ &:hover {
710
+ @media (hover: hover) {
711
+ background-color: var(--color-qtneutral-200);
712
+ }
713
+ }
714
+ }
715
+ .hover\:grayscale-0 {
716
+ &:hover {
717
+ @media (hover: hover) {
718
+ --tw-grayscale: grayscale(0%);
719
+ 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,);
720
+ }
721
+ }
722
+ }
723
+ }
724
+ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');
725
+ :root {
726
+ --font-sans: 'Inter', sans-serif;
727
+ }
728
+ .label-3 {
729
+ font-family: Inter;
730
+ font-weight: 500;
731
+ font-size: 12px;
732
+ line-height: 120%;
733
+ letter-spacing: 0%;
734
+ text-align: right;
735
+ }
736
+ .label-3-bold {
737
+ font-family: Rubik;
738
+ font-weight: 500;
739
+ font-size: 12px;
740
+ line-height: 120%;
741
+ letter-spacing: 0%;
742
+ }
743
+ .body {
744
+ font-family: Inter;
745
+ font-weight: 400;
746
+ font-size: 16px;
747
+ line-height: 140%;
748
+ letter-spacing: 0%;
749
+ }
750
+ .body-bold {
751
+ font-family: Inter;
752
+ font-weight: 600;
753
+ font-size: 16px;
754
+ line-height: 140%;
755
+ letter-spacing: 0%;
756
+ }
757
+ .body-small {
758
+ font-family: Inter;
759
+ font-weight: 400;
760
+ font-size: 14px;
761
+ line-height: 130%;
762
+ letter-spacing: 0%;
763
+ color: var(--color-qtneutral-900);
764
+ }
765
+ .body-small-bold {
766
+ font-family: Inter;
767
+ font-weight: 600;
768
+ font-size: 14px;
769
+ line-height: 120%;
770
+ letter-spacing: 0%;
771
+ color: var(--color-qtneutral-900);
772
+ }
773
+ .body-medium {
774
+ font-family: Inter;
775
+ font-weight: 400;
776
+ font-size: 14px;
777
+ line-height: 140%;
778
+ letter-spacing: 0%;
779
+ color: var(--color-qtneutral-900);
780
+ }
781
+ .title-2-bold {
782
+ font-family: Inter;
783
+ font-weight: 700;
784
+ font-size: 14px;
785
+ line-height: 120%;
786
+ letter-spacing: 4%;
787
+ text-transform: uppercase;
788
+ }
789
+ .qt-link {
790
+ font-family: Inter;
791
+ font-weight: 500;
792
+ font-size: 12px;
793
+ line-height: 140%;
794
+ letter-spacing: 0%;
795
+ text-align: right;
796
+ text-decoration: underline;
797
+ text-decoration-style: solid;
798
+ text-decoration-thickness: 0%;
799
+ }
800
+ .debug {
801
+ border: 2px solid red;
802
+ }
803
+ .debug-2 {
804
+ border: 2px solid green;
805
+ }
806
+ .qt-drop-shadow-100 {
807
+ box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.15);
808
+ }
809
+ .checkbox-shadow {
810
+ box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.15);
811
+ }
812
+ .checkbox-inset {
813
+ box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.15) inset;
814
+ }
815
+ .preview-card-shadow:hover {
816
+ box-shadow: 8px 8px 8px 0px rgba(29, 29, 31, 0.15);
817
+ }
818
+ .navbar-shadow {
819
+ box-shadow: 8px 8px 12px 0px #00000026;
820
+ }
821
+ .bg-test {
822
+ background-color: #ffffff;
823
+ opacity: 1;
824
+ background-image: linear-gradient(#e6e6e6 2px, transparent 2px), linear-gradient(90deg, #e6e6e6 2px, transparent 2px), linear-gradient(#e6e6e6 1px, transparent 1px), linear-gradient(90deg, #e6e6e6 1px, #ffffff 1px);
825
+ background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
826
+ background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
827
+ }
828
+ .tests {
829
+ transition: all 5s linear;
830
+ }
831
+ .markdown ul {
832
+ list-style-type: disc;
833
+ padding-left: 1.5rem;
834
+ }
835
+ .markdown ol {
836
+ list-style-type: decimal;
837
+ padding-left: 1.5rem;
838
+ }
839
+ .markdown a {
840
+ text-decoration: underline;
841
+ }
842
+ .no-defaults {
843
+ all: unset;
844
+ }
845
+ @property --tw-rotate-x {
846
+ syntax: "*";
847
+ inherits: false;
848
+ }
849
+ @property --tw-rotate-y {
850
+ syntax: "*";
851
+ inherits: false;
852
+ }
853
+ @property --tw-rotate-z {
854
+ syntax: "*";
855
+ inherits: false;
856
+ }
857
+ @property --tw-skew-x {
858
+ syntax: "*";
859
+ inherits: false;
860
+ }
861
+ @property --tw-skew-y {
862
+ syntax: "*";
863
+ inherits: false;
864
+ }
865
+ @property --tw-space-y-reverse {
866
+ syntax: "*";
867
+ inherits: false;
868
+ initial-value: 0;
869
+ }
870
+ @property --tw-border-style {
871
+ syntax: "*";
872
+ inherits: false;
873
+ initial-value: solid;
874
+ }
875
+ @property --tw-leading {
876
+ syntax: "*";
877
+ inherits: false;
878
+ }
879
+ @property --tw-font-weight {
880
+ syntax: "*";
881
+ inherits: false;
882
+ }
883
+ @property --tw-blur {
884
+ syntax: "*";
885
+ inherits: false;
886
+ }
887
+ @property --tw-brightness {
888
+ syntax: "*";
889
+ inherits: false;
890
+ }
891
+ @property --tw-contrast {
892
+ syntax: "*";
893
+ inherits: false;
894
+ }
895
+ @property --tw-grayscale {
896
+ syntax: "*";
897
+ inherits: false;
898
+ }
899
+ @property --tw-hue-rotate {
900
+ syntax: "*";
901
+ inherits: false;
902
+ }
903
+ @property --tw-invert {
904
+ syntax: "*";
905
+ inherits: false;
906
+ }
907
+ @property --tw-opacity {
908
+ syntax: "*";
909
+ inherits: false;
910
+ }
911
+ @property --tw-saturate {
912
+ syntax: "*";
913
+ inherits: false;
914
+ }
915
+ @property --tw-sepia {
916
+ syntax: "*";
917
+ inherits: false;
918
+ }
919
+ @property --tw-drop-shadow {
920
+ syntax: "*";
921
+ inherits: false;
922
+ }
923
+ @property --tw-drop-shadow-color {
924
+ syntax: "*";
925
+ inherits: false;
926
+ }
927
+ @property --tw-drop-shadow-alpha {
928
+ syntax: "<percentage>";
929
+ inherits: false;
930
+ initial-value: 100%;
931
+ }
932
+ @property --tw-drop-shadow-size {
933
+ syntax: "*";
934
+ inherits: false;
935
+ }
936
+ @layer properties {
937
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
938
+ *, ::before, ::after, ::backdrop {
939
+ --tw-rotate-x: initial;
940
+ --tw-rotate-y: initial;
941
+ --tw-rotate-z: initial;
942
+ --tw-skew-x: initial;
943
+ --tw-skew-y: initial;
944
+ --tw-space-y-reverse: 0;
945
+ --tw-border-style: solid;
946
+ --tw-leading: initial;
947
+ --tw-font-weight: initial;
948
+ --tw-blur: initial;
949
+ --tw-brightness: initial;
950
+ --tw-contrast: initial;
951
+ --tw-grayscale: initial;
952
+ --tw-hue-rotate: initial;
953
+ --tw-invert: initial;
954
+ --tw-opacity: initial;
955
+ --tw-saturate: initial;
956
+ --tw-sepia: initial;
957
+ --tw-drop-shadow: initial;
958
+ --tw-drop-shadow-color: initial;
959
+ --tw-drop-shadow-alpha: 100%;
960
+ --tw-drop-shadow-size: initial;
961
+ }
962
+ }
963
+ }
package/package.json CHANGED
@@ -1,47 +1,54 @@
1
1
  {
2
- "name": "qt-ui-kit",
3
- "version": "1.0.1",
4
- "main": "./dist/index.js",
5
- "module": "./dist/index.js",
6
- "types": "./dist/index.d.ts",
7
- "files": ["dist"],
8
- "exports": {
9
- ".": {
10
- "import": "./dist/index.js",
11
- "require": "./dist/index.js",
12
- "types": "./dist/index.d.ts"
13
- }
14
- },
15
- "scripts": {
16
- "test": "echo \"Error: no test specified\" && exit 1",
17
- "dev": "npx ladle serve",
18
- "build": "npx tsup src/index.ts --dts --format esm,cjs --out-dir dist"
19
- },
20
- "keywords": [],
21
- "author": "",
22
- "license": "ISC",
23
- "description": "",
24
- "dependencies": {
25
- "@tailwindcss/line-clamp": "^0.4.4",
26
- "@tailwindcss/postcss": "^4.1.4",
27
- "@tailwindcss/typography": "^0.5.16",
28
- "clsx": "^2.1.1",
29
- "next": "^15.3.0",
30
- "react": "^19.1.0",
31
- "react-dom": "^19.1.0",
32
- "react-markdown": "^10.1.0",
33
- "remark-gfm": "^4.0.1",
34
- "tailwind-merge": "^3.2.0"
35
- },
36
- "devDependencies": {
37
- "@ladle/react": "^5.0.2",
38
- "@types/node": "^22.14.1",
39
- "@types/react": "^19.1.2",
40
- "autoprefixer": "^10.4.21",
41
- "date-fns": "^4.1.0",
42
- "emoji-dictionary": "^1.0.12",
43
- "tailwindcss": "^4.1.4",
44
- "typescript": "^5.8.3",
45
- "vite-plugin-svgr": "^4.3.0"
46
- }
2
+ "name": "qt-ui-kit",
3
+ "version": "1.0.3",
4
+ "main": "./dist/index.js",
5
+ "module": "./dist/index.js",
6
+ "types": "./dist/index.d.ts",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "exports": {
11
+ ".": {
12
+ "style": "./dist/style.css",
13
+ "import": "./dist/index.js",
14
+ "require": "./dist/index.js",
15
+ "types": "./dist/index.d.ts"
16
+ }
17
+ },
18
+ "scripts": {
19
+ "test": "echo \"Error: no test specified\" && exit 1",
20
+ "dev": "npx ladle serve",
21
+ "build": "tsup src/index.ts --dts --format esm,cjs --out-dir dist && npm run build:css",
22
+ "build:css": "postcss src/index.css -o dist/style.css"
23
+ },
24
+ "keywords": [],
25
+ "author": "",
26
+ "license": "ISC",
27
+ "description": "",
28
+ "dependencies": {
29
+ "@tailwindcss/line-clamp": "^0.4.4",
30
+ "@tailwindcss/postcss": "^4.1.4",
31
+ "@tailwindcss/typography": "^0.5.16",
32
+ "clsx": "^2.1.1",
33
+ "next": "^15.3.0",
34
+ "react": "^19.1.0",
35
+ "react-dom": "^19.1.0",
36
+ "react-markdown": "^10.1.0",
37
+ "remark-gfm": "^4.0.1",
38
+ "tailwind-merge": "^3.2.0"
39
+ },
40
+ "devDependencies": {
41
+ "@ladle/react": "^5.0.2",
42
+ "@types/node": "^22.14.1",
43
+ "@types/react": "^19.1.2",
44
+ "autoprefixer": "^10.4.21",
45
+ "date-fns": "^4.1.0",
46
+ "emoji-dictionary": "^1.0.12",
47
+ "postcss": "^8.5.4",
48
+ "postcss-cli": "^11.0.1",
49
+ "tailwindcss": "^4.1.8",
50
+ "tsup": "^8.5.0",
51
+ "typescript": "^5.8.3",
52
+ "vite-plugin-svgr": "^4.3.0"
53
+ }
47
54
  }