@machinerd/js-module 0.2.4 → 0.3.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 (10) hide show
  1. package/dist/styles/index.css +320 -85
  2. package/dist/ui/client-only/index.d.cts +6 -6
  3. package/dist/ui/client-only/index.d.mts +8 -8
  4. package/dist/ui/index.cjs +1 -1
  5. package/dist/ui/index.d.cts +124 -137
  6. package/dist/ui/index.d.mts +118 -131
  7. package/dist/ui/index.mjs +1 -1
  8. package/dist/util/index.d.cts +1 -1
  9. package/dist/util/index.d.mts +1 -1
  10. package/package.json +2 -1
package/dist/styles/index.css CHANGED
@@ -1,19 +1,25 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
5
5
  :root, :host {
6
- --komc-color-red-500: oklch(63.7% 0.237 25.331);
6
+ --komc-color-sky-950: #006699;
7
7
  --komc-color-blue-500: oklch(62.3% 0.214 259.815);
8
- --komc-color-blue-600: oklch(54.6% 0.245 262.881);
8
+ --komc-color-indigo-600: oklch(51.1% 0.262 276.966);
9
+ --komc-color-indigo-700: oklch(45.7% 0.24 277.023);
10
+ --komc-color-gray-50: #fafafa;
9
11
  --komc-color-gray-100: oklch(96.7% 0.003 264.542);
10
- --komc-color-gray-200: oklch(92.8% 0.006 264.531);
12
+ --komc-color-gray-200: #f5f5f5;
13
+ --komc-color-gray-300: oklch(87.2% 0.01 258.338);
14
+ --komc-color-gray-500: #e5e5e5;
15
+ --komc-color-gray-600: oklch(44.6% 0.03 256.802);
16
+ --komc-color-gray-700: #cccccc;
17
+ --komc-color-gray-800: #808080;
11
18
  --komc-color-neutral-50: oklch(98.5% 0 0);
12
19
  --komc-color-neutral-100: oklch(97% 0 0);
13
20
  --komc-color-neutral-200: oklch(92.2% 0 0);
14
21
  --komc-color-neutral-300: oklch(87% 0 0);
15
22
  --komc-color-neutral-400: oklch(70.8% 0 0);
16
- --komc-color-neutral-900: oklch(20.5% 0 0);
17
23
  --komc-color-black: #000;
18
24
  --komc-color-white: #fff;
19
25
  --komc-spacing: 0.25rem;
@@ -36,9 +42,19 @@
36
42
  --komc-radius-xl: 0.75rem;
37
43
  --komc-radius-2xl: 1rem;
38
44
  --komc-radius-3xl: 1.5rem;
45
+ --komc-drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
46
+ --komc-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
47
+ --komc-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
48
+ --komc-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
49
+ --komc-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
39
50
  --komc-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
40
51
  --komc-default-transition-duration: 150ms;
41
52
  --komc-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
53
+ --komc-color-night-700: #2c5cb7;
54
+ --komc-color-night-800: #22488e;
55
+ --komc-color-sky-450: #3aacd5;
56
+ --komc-color-sky-650: #0099cc;
57
+ --komc-color-sky-750: #0083b2;
42
58
  }
43
59
  }
44
60
  @layer utilities {
@@ -64,7 +80,7 @@
64
80
  top: calc(var(--komc-spacing) * 0);
65
81
  }
66
82
  .komc\:top-1\/2 {
67
- top: calc(1/2 * 100%);
83
+ top: calc(1 / 2 * 100%);
68
84
  }
69
85
  .komc\:top-3 {
70
86
  top: calc(var(--komc-spacing) * 3);
@@ -94,7 +110,7 @@
94
110
  left: calc(var(--komc-spacing) * 0);
95
111
  }
96
112
  .komc\:left-1\/2 {
97
- left: calc(1/2 * 100%);
113
+ left: calc(1 / 2 * 100%);
98
114
  }
99
115
  .komc\:left-5 {
100
116
  left: calc(var(--komc-spacing) * 5);
@@ -114,9 +130,6 @@
114
130
  .komc\:mx-auto {
115
131
  margin-inline: auto;
116
132
  }
117
- .komc\:my-0 {
118
- margin-block: calc(var(--komc-spacing) * 0);
119
- }
120
133
  .komc\:-mt-1 {
121
134
  margin-top: calc(var(--komc-spacing) * -1);
122
135
  }
@@ -183,6 +196,9 @@
183
196
  .komc\:h-14 {
184
197
  height: calc(var(--komc-spacing) * 14);
185
198
  }
199
+ .komc\:h-15 {
200
+ height: calc(var(--komc-spacing) * 15);
201
+ }
186
202
  .komc\:h-16 {
187
203
  height: calc(var(--komc-spacing) * 16);
188
204
  }
@@ -225,15 +241,15 @@
225
241
  .komc\:h-full {
226
242
  height: 100%;
227
243
  }
228
- .komc\:h-screen {
229
- height: 100vh;
230
- }
231
244
  .komc\:min-h-10 {
232
245
  min-height: calc(var(--komc-spacing) * 10);
233
246
  }
234
247
  .komc\:min-h-15 {
235
248
  min-height: calc(var(--komc-spacing) * 15);
236
249
  }
250
+ .komc\:min-h-400 {
251
+ min-height: calc(var(--komc-spacing) * 400);
252
+ }
237
253
  .komc\:w-2 {
238
254
  width: calc(var(--komc-spacing) * 2);
239
255
  }
@@ -294,9 +310,6 @@
294
310
  .komc\:shrink-0 {
295
311
  flex-shrink: 0;
296
312
  }
297
- .komc\:grow {
298
- flex-grow: 1;
299
- }
300
313
  .komc\:grow-0 {
301
314
  flex-grow: 0;
302
315
  }
@@ -304,7 +317,7 @@
304
317
  flex-basis: 100%;
305
318
  }
306
319
  .komc\:-translate-x-1\/2 {
307
- --tw-translate-x: calc(calc(1/2 * 100%) * -1);
320
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
308
321
  translate: var(--tw-translate-x) var(--tw-translate-y);
309
322
  }
310
323
  .komc\:-translate-x-2 {
@@ -316,7 +329,7 @@
316
329
  translate: var(--tw-translate-x) var(--tw-translate-y);
317
330
  }
318
331
  .komc\:-translate-y-1\/2 {
319
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
332
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
320
333
  translate: var(--tw-translate-x) var(--tw-translate-y);
321
334
  }
322
335
  .komc\:-translate-y-2 {
@@ -336,6 +349,9 @@
336
349
  .komc\:grid-cols-4 {
337
350
  grid-template-columns: repeat(4, minmax(0, 1fr));
338
351
  }
352
+ .komc\:grid-cols-5 {
353
+ grid-template-columns: repeat(5, minmax(0, 1fr));
354
+ }
339
355
  .komc\:flex-col {
340
356
  flex-direction: column;
341
357
  }
@@ -366,6 +382,9 @@
366
382
  .komc\:gap-5 {
367
383
  gap: calc(var(--komc-spacing) * 5);
368
384
  }
385
+ .komc\:gap-x-2 {
386
+ column-gap: calc(var(--komc-spacing) * 2);
387
+ }
369
388
  .komc\:overflow-hidden {
370
389
  overflow: hidden;
371
390
  }
@@ -375,9 +394,6 @@
375
394
  .komc\:rounded-3xl {
376
395
  border-radius: var(--komc-radius-3xl);
377
396
  }
378
- .komc\:rounded-\[20px\] {
379
- border-radius: 20px;
380
- }
381
397
  .komc\:rounded-full {
382
398
  border-radius: calc(infinity * 1px);
383
399
  }
@@ -419,29 +435,23 @@
419
435
  .komc\:border-black {
420
436
  border-color: var(--komc-color-black);
421
437
  }
438
+ .komc\:border-blue-500 {
439
+ border-color: var(--komc-color-blue-500);
440
+ }
441
+ .komc\:border-gray-600 {
442
+ border-color: var(--komc-color-gray-600);
443
+ }
444
+ .komc\:border-gray-800 {
445
+ border-color: var(--komc-color-gray-800);
446
+ }
422
447
  .komc\:border-neutral-200 {
423
448
  border-color: var(--komc-color-neutral-200);
424
449
  }
425
- .komc\:border-red-500 {
426
- border-color: var(--komc-color-red-500);
427
- }
428
450
  .komc\:border-transparent {
429
451
  border-color: transparent;
430
452
  }
431
- .komc\:bg-\[\#2c5cb7\] {
432
- background-color: #2c5cb7;
433
- }
434
- .komc\:bg-\[\#4A5565\] {
435
- background-color: #4A5565;
436
- }
437
- .komc\:bg-\[\#36454F\] {
438
- background-color: #36454F;
439
- }
440
- .komc\:bg-\[\#C8313A\] {
441
- background-color: #C8313A;
442
- }
443
- .komc\:bg-\[\#E7FF14\] {
444
- background-color: #E7FF14;
453
+ .komc\:border-white {
454
+ border-color: var(--komc-color-white);
445
455
  }
446
456
  .komc\:bg-\[rgb\(95\,95\,96\)\] {
447
457
  background-color: rgb(95,95,96);
@@ -455,20 +465,29 @@
455
465
  .komc\:bg-gray-200 {
456
466
  background-color: var(--komc-color-gray-200);
457
467
  }
468
+ .komc\:bg-gray-300 {
469
+ background-color: var(--komc-color-gray-300);
470
+ }
471
+ .komc\:bg-indigo-600 {
472
+ background-color: var(--komc-color-indigo-600);
473
+ }
458
474
  .komc\:bg-inherit {
459
475
  background-color: inherit;
460
476
  }
461
477
  .komc\:bg-neutral-100 {
462
478
  background-color: var(--komc-color-neutral-100);
463
479
  }
464
- .komc\:bg-neutral-200 {
465
- background-color: var(--komc-color-neutral-200);
480
+ .komc\:bg-neutral-400 {
481
+ background-color: var(--komc-color-neutral-400);
482
+ }
483
+ .komc\:bg-night-700 {
484
+ background-color: var(--komc-color-night-700);
466
485
  }
467
- .komc\:bg-neutral-300 {
468
- background-color: var(--komc-color-neutral-300);
486
+ .komc\:bg-sky-450 {
487
+ background-color: var(--komc-color-sky-450);
469
488
  }
470
- .komc\:bg-neutral-400\! {
471
- background-color: var(--komc-color-neutral-400) !important;
489
+ .komc\:bg-sky-750 {
490
+ background-color: var(--komc-color-sky-750);
472
491
  }
473
492
  .komc\:bg-transparent {
474
493
  background-color: transparent;
@@ -485,9 +504,36 @@
485
504
  .komc\:p-4 {
486
505
  padding: calc(var(--komc-spacing) * 4);
487
506
  }
507
+ .komc\:p-40 {
508
+ padding: calc(var(--komc-spacing) * 40);
509
+ }
510
+ .komc\:px-0 {
511
+ padding-inline: calc(var(--komc-spacing) * 0);
512
+ }
513
+ .komc\:px-0\.5 {
514
+ padding-inline: calc(var(--komc-spacing) * 0.5);
515
+ }
516
+ .komc\:px-1 {
517
+ padding-inline: calc(var(--komc-spacing) * 1);
518
+ }
519
+ .komc\:px-1\.5 {
520
+ padding-inline: calc(var(--komc-spacing) * 1.5);
521
+ }
488
522
  .komc\:px-2 {
489
523
  padding-inline: calc(var(--komc-spacing) * 2);
490
524
  }
525
+ .komc\:px-3 {
526
+ padding-inline: calc(var(--komc-spacing) * 3);
527
+ }
528
+ .komc\:px-4 {
529
+ padding-inline: calc(var(--komc-spacing) * 4);
530
+ }
531
+ .komc\:px-5 {
532
+ padding-inline: calc(var(--komc-spacing) * 5);
533
+ }
534
+ .komc\:px-6 {
535
+ padding-inline: calc(var(--komc-spacing) * 6);
536
+ }
491
537
  .komc\:pt-4 {
492
538
  padding-top: calc(var(--komc-spacing) * 4);
493
539
  }
@@ -501,14 +547,17 @@
501
547
  .komc\:break-all {
502
548
  word-break: break-all;
503
549
  }
504
- .komc\:whitespace-nowrap {
505
- white-space: nowrap;
550
+ .komc\:text-\[\#1890FF\] {
551
+ color: #1890FF;
506
552
  }
507
553
  .komc\:text-black {
508
554
  color: var(--komc-color-black);
509
555
  }
510
- .komc\:text-neutral-900 {
511
- color: var(--komc-color-neutral-900);
556
+ .komc\:text-blue-500 {
557
+ color: var(--komc-color-blue-500);
558
+ }
559
+ .komc\:text-gray-800 {
560
+ color: var(--komc-color-gray-800);
512
561
  }
513
562
  .komc\:text-white {
514
563
  color: var(--komc-color-white);
@@ -519,11 +568,36 @@
519
568
  .komc\:opacity-100 {
520
569
  opacity: 100%;
521
570
  }
571
+ .komc\:drop-shadow-2xl {
572
+ --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
573
+ --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-2xl));
574
+ 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,);
575
+ }
522
576
  .komc\:drop-shadow-\[0px_0\.5px_3px_rgba\(0\,0\,0\,0\.2\)\] {
523
577
  --tw-drop-shadow-size: drop-shadow(0px 0.5px 3px var(--tw-drop-shadow-color, rgba(0,0,0,0.2)));
524
578
  --tw-drop-shadow: var(--tw-drop-shadow-size);
525
579
  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,);
526
580
  }
581
+ .komc\:drop-shadow-lg {
582
+ --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
583
+ --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-lg));
584
+ 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,);
585
+ }
586
+ .komc\:drop-shadow-md {
587
+ --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
588
+ --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-md));
589
+ 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,);
590
+ }
591
+ .komc\:drop-shadow-sm {
592
+ --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
593
+ --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-sm));
594
+ 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,);
595
+ }
596
+ .komc\:drop-shadow-xl {
597
+ --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1)));
598
+ --tw-drop-shadow: drop-shadow(var(--komc-drop-shadow-xl));
599
+ 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,);
600
+ }
527
601
  .komc\:transition-all {
528
602
  transition-property: all;
529
603
  transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
@@ -551,86 +625,129 @@
551
625
  --tw-outline-style: none;
552
626
  outline-style: none;
553
627
  }
554
- .komc\:\*\:transition-colors {
555
- :is(& > *) {
556
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
557
- transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
558
- transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
628
+ .komc\:hover\:border-transparent {
629
+ &:hover {
630
+ @media (hover: hover) {
631
+ border-color: transparent;
632
+ }
559
633
  }
560
634
  }
561
- .komc\:\*\:duration-200 {
562
- :is(& > *) {
563
- --tw-duration: 200ms;
564
- transition-duration: 200ms;
635
+ .komc\:hover\:bg-\[rgb\(76\,76\,77\)\] {
636
+ &:hover {
637
+ @media (hover: hover) {
638
+ background-color: rgb(76,76,77);
639
+ }
565
640
  }
566
641
  }
567
- .komc\:hover\:bg-\[\#2E3A43\] {
642
+ .komc\:hover\:bg-\[rgb\(199\,199\,199\)\] {
568
643
  &:hover {
569
644
  @media (hover: hover) {
570
- background-color: #2E3A43;
645
+ background-color: rgb(199,199,199);
571
646
  }
572
647
  }
573
648
  }
574
- .komc\:hover\:bg-\[\#424A57\] {
649
+ .komc\:hover\:bg-blue-500 {
575
650
  &:hover {
576
651
  @media (hover: hover) {
577
- background-color: #424A57;
652
+ background-color: var(--komc-color-blue-500);
578
653
  }
579
654
  }
580
655
  }
581
- .komc\:hover\:bg-\[\#26539F\] {
656
+ .komc\:hover\:bg-gray-200 {
582
657
  &:hover {
583
658
  @media (hover: hover) {
584
- background-color: #26539F;
659
+ background-color: var(--komc-color-gray-200);
585
660
  }
586
661
  }
587
662
  }
588
- .komc\:hover\:bg-\[\#B02B33\] {
663
+ .komc\:hover\:bg-indigo-700 {
589
664
  &:hover {
590
665
  @media (hover: hover) {
591
- background-color: #B02B33;
666
+ background-color: var(--komc-color-indigo-700);
592
667
  }
593
668
  }
594
669
  }
595
- .komc\:hover\:bg-\[\#D4E600\] {
670
+ .komc\:hover\:bg-neutral-50 {
596
671
  &:hover {
597
672
  @media (hover: hover) {
598
- background-color: #D4E600;
673
+ background-color: var(--komc-color-neutral-50);
599
674
  }
600
675
  }
601
676
  }
602
- .komc\:hover\:bg-\[rgb\(76\,76\,77\)\] {
677
+ .komc\:hover\:bg-neutral-200 {
603
678
  &:hover {
604
679
  @media (hover: hover) {
605
- background-color: rgb(76,76,77);
680
+ background-color: var(--komc-color-neutral-200);
606
681
  }
607
682
  }
608
683
  }
609
- .komc\:hover\:bg-blue-600 {
684
+ .komc\:hover\:bg-night-700 {
610
685
  &:hover {
611
686
  @media (hover: hover) {
612
- background-color: var(--komc-color-blue-600);
687
+ background-color: var(--komc-color-night-700);
613
688
  }
614
689
  }
615
690
  }
616
- .komc\:hover\:bg-neutral-50 {
691
+ .komc\:hover\:bg-night-800 {
617
692
  &:hover {
618
693
  @media (hover: hover) {
619
- background-color: var(--komc-color-neutral-50);
694
+ background-color: var(--komc-color-night-800);
620
695
  }
621
696
  }
622
697
  }
623
- .komc\:hover\:bg-neutral-100 {
698
+ .komc\:hover\:bg-sky-650 {
624
699
  &:hover {
625
700
  @media (hover: hover) {
626
- background-color: var(--komc-color-neutral-100);
701
+ background-color: var(--komc-color-sky-650);
627
702
  }
628
703
  }
629
704
  }
630
- .komc\:hover\:bg-neutral-200 {
705
+ .komc\:hover\:bg-sky-950 {
631
706
  &:hover {
632
707
  @media (hover: hover) {
633
- background-color: var(--komc-color-neutral-200);
708
+ background-color: var(--komc-color-sky-950);
709
+ }
710
+ }
711
+ }
712
+ .komc\:hover\:bg-transparent {
713
+ &:hover {
714
+ @media (hover: hover) {
715
+ background-color: transparent;
716
+ }
717
+ }
718
+ }
719
+ .komc\:hover\:text-\[\#1890FF\] {
720
+ &:hover {
721
+ @media (hover: hover) {
722
+ color: #1890FF;
723
+ }
724
+ }
725
+ }
726
+ .komc\:hover\:text-black {
727
+ &:hover {
728
+ @media (hover: hover) {
729
+ color: var(--komc-color-black);
730
+ }
731
+ }
732
+ }
733
+ .komc\:hover\:text-gray-800 {
734
+ &:hover {
735
+ @media (hover: hover) {
736
+ color: var(--komc-color-gray-800);
737
+ }
738
+ }
739
+ }
740
+ .komc\:hover\:text-white {
741
+ &:hover {
742
+ @media (hover: hover) {
743
+ color: var(--komc-color-white);
744
+ }
745
+ }
746
+ }
747
+ .komc\:hover\:underline {
748
+ &:hover {
749
+ @media (hover: hover) {
750
+ text-decoration-line: underline;
634
751
  }
635
752
  }
636
753
  }
@@ -639,14 +756,84 @@
639
756
  border-color: var(--komc-color-neutral-300);
640
757
  }
641
758
  }
759
+ .komc\:active\:border-transparent {
760
+ &:active {
761
+ border-color: transparent;
762
+ }
763
+ }
642
764
  .komc\:active\:bg-\[rgb\(76\,76\,77\)\] {
643
765
  &:active {
644
766
  background-color: rgb(76,76,77);
645
767
  }
646
768
  }
647
- .komc\:disabled\:pointer-events-none {
648
- &:disabled {
649
- pointer-events: none;
769
+ .komc\:active\:bg-\[rgb\(199\,199\,199\)\] {
770
+ &:active {
771
+ background-color: rgb(199,199,199);
772
+ }
773
+ }
774
+ .komc\:active\:bg-blue-500 {
775
+ &:active {
776
+ background-color: var(--komc-color-blue-500);
777
+ }
778
+ }
779
+ .komc\:active\:bg-gray-200 {
780
+ &:active {
781
+ background-color: var(--komc-color-gray-200);
782
+ }
783
+ }
784
+ .komc\:active\:bg-indigo-700 {
785
+ &:active {
786
+ background-color: var(--komc-color-indigo-700);
787
+ }
788
+ }
789
+ .komc\:active\:bg-night-700 {
790
+ &:active {
791
+ background-color: var(--komc-color-night-700);
792
+ }
793
+ }
794
+ .komc\:active\:bg-night-800 {
795
+ &:active {
796
+ background-color: var(--komc-color-night-800);
797
+ }
798
+ }
799
+ .komc\:active\:bg-sky-650 {
800
+ &:active {
801
+ background-color: var(--komc-color-sky-650);
802
+ }
803
+ }
804
+ .komc\:active\:bg-sky-950 {
805
+ &:active {
806
+ background-color: var(--komc-color-sky-950);
807
+ }
808
+ }
809
+ .komc\:active\:bg-transparent {
810
+ &:active {
811
+ background-color: transparent;
812
+ }
813
+ }
814
+ .komc\:active\:text-\[\#1890FF\] {
815
+ &:active {
816
+ color: #1890FF;
817
+ }
818
+ }
819
+ .komc\:active\:text-black {
820
+ &:active {
821
+ color: var(--komc-color-black);
822
+ }
823
+ }
824
+ .komc\:active\:text-gray-800 {
825
+ &:active {
826
+ color: var(--komc-color-gray-800);
827
+ }
828
+ }
829
+ .komc\:active\:text-white {
830
+ &:active {
831
+ color: var(--komc-color-white);
832
+ }
833
+ }
834
+ .komc\:active\:underline {
835
+ &:active {
836
+ text-decoration-line: underline;
650
837
  }
651
838
  }
652
839
  .komc\:disabled\:cursor-default {
@@ -654,14 +841,49 @@
654
841
  cursor: default;
655
842
  }
656
843
  }
657
- .komc\:disabled\:opacity-50 {
844
+ .komc\:disabled\:border-gray-500 {
658
845
  &:disabled {
659
- opacity: 50%;
846
+ border-color: var(--komc-color-gray-500);
660
847
  }
661
848
  }
662
- .komc\:xl\:max-w-full {
663
- @media (width >= 80rem) {
664
- max-width: 100%;
849
+ .komc\:disabled\:border-transparent {
850
+ &:disabled {
851
+ border-color: transparent;
852
+ }
853
+ }
854
+ .komc\:disabled\:border-white {
855
+ &:disabled {
856
+ border-color: var(--komc-color-white);
857
+ }
858
+ }
859
+ .komc\:disabled\:bg-gray-50 {
860
+ &:disabled {
861
+ background-color: var(--komc-color-gray-50);
862
+ }
863
+ }
864
+ .komc\:disabled\:bg-gray-700 {
865
+ &:disabled {
866
+ background-color: var(--komc-color-gray-700);
867
+ }
868
+ }
869
+ .komc\:disabled\:bg-transparent {
870
+ &:disabled {
871
+ background-color: transparent;
872
+ }
873
+ }
874
+ .komc\:disabled\:bg-white {
875
+ &:disabled {
876
+ background-color: var(--komc-color-white);
877
+ }
878
+ }
879
+ .komc\:disabled\:text-gray-500 {
880
+ &:disabled {
881
+ color: var(--komc-color-gray-500);
882
+ }
883
+ }
884
+ .komc\:disabled\:text-gray-800 {
885
+ &:disabled {
886
+ color: var(--komc-color-gray-800);
665
887
  }
666
888
  }
667
889
  .komc\:xl\:p-10 {
@@ -669,6 +891,19 @@
669
891
  padding: calc(var(--komc-spacing) * 10);
670
892
  }
671
893
  }
894
+ .komc\:\[\&_svg\]\:transition-colors {
895
+ & svg {
896
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
897
+ transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
898
+ transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
899
+ }
900
+ }
901
+ .komc\:\[\&_svg\]\:duration-200 {
902
+ & svg {
903
+ --tw-duration: 200ms;
904
+ transition-duration: 200ms;
905
+ }
906
+ }
672
907
  .komc\:\[\&\>input\]\:h-full {
673
908
  &>input {
674
909
  height: 100%;
package/dist/ui/client-only/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react0 from "react";
2
2
  import React$1, { ComponentProps, HTMLAttributes } from "react";
3
3
  import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
4
- import * as react_jsx_runtime0 from "react/jsx-runtime";
4
+ import * as react_jsx_runtime2 from "react/jsx-runtime";
5
5
 
6
6
  //#region src/ui/client-only/carousel/carousel-context.d.ts
7
7
  type CarouselApi = UseEmblaCarouselType[1];
@@ -57,33 +57,33 @@ declare function Carousel({
57
57
  className,
58
58
  children,
59
59
  ...props
60
- }: CarouselProps$1): react_jsx_runtime0.JSX.Element;
60
+ }: CarouselProps$1): react_jsx_runtime2.JSX.Element;
61
61
  //#endregion
62
62
  //#region src/ui/client-only/carousel/carousel-wrapper.d.ts
63
63
  declare function CarouselWrapper({
64
64
  className,
65
65
  ...props
66
- }: React$1.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
66
+ }: React$1.ComponentProps<'div'>): react_jsx_runtime2.JSX.Element;
67
67
  //#endregion
68
68
  //#region src/ui/client-only/carousel/carousel-item.d.ts
69
69
  declare function CarouselItem({
70
70
  className,
71
71
  ...props
72
- }: React$1.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
72
+ }: React$1.ComponentProps<'div'>): react_jsx_runtime2.JSX.Element;
73
73
  //#endregion
74
74
  //#region src/ui/client-only/carousel/carousel-previous.d.ts
75
75
  declare function CarouselPrevious({
76
76
  children,
77
77
  className,
78
78
  ...props
79
- }: React$1.ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
79
+ }: React$1.ComponentProps<'button'>): react_jsx_runtime2.JSX.Element;
80
80
  //#endregion
81
81
  //#region src/ui/client-only/carousel/carousel-next.d.ts
82
82
  declare function CarouselNext({
83
83
  children,
84
84
  className,
85
85
  ...props
86
- }: React$1.ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
86
+ }: React$1.ComponentProps<'button'>): react_jsx_runtime2.JSX.Element;
87
87
  //#endregion
88
88
  //#region src/ui/client-only/tooltip/tooltip-container.d.ts
89
89
  type SubPlacement = 'start' | 'end';