@keenthemes/ktui 1.0.24 → 1.0.26

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 (53) hide show
  1. package/dist/ktui.js +337 -18
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +319 -11
  5. package/examples/datatable/checkbox-events-test.html +400 -0
  6. package/examples/datatable/credentials-test.html +423 -0
  7. package/examples/datatable/remote-checkbox-test.html +365 -0
  8. package/examples/modal/persistent-test.html +205 -0
  9. package/examples/select/dark-mode-test.html +93 -0
  10. package/examples/select/dropdowncontainer-test.html +111 -0
  11. package/examples/select/dynamic-methods.html +273 -0
  12. package/examples/select/formdata-remote-test.html +161 -0
  13. package/examples/select/modal-positioning-test.html +336 -0
  14. package/examples/select/remote-data-preselected.html +283 -0
  15. package/lib/cjs/components/datatable/datatable-checkbox.js +16 -3
  16. package/lib/cjs/components/datatable/datatable-checkbox.js.map +1 -1
  17. package/lib/cjs/components/datatable/datatable.js +3 -5
  18. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  19. package/lib/cjs/components/image-input/image-input.js.map +1 -1
  20. package/lib/cjs/components/modal/modal.js +3 -1
  21. package/lib/cjs/components/modal/modal.js.map +1 -1
  22. package/lib/cjs/components/select/config.js +5 -0
  23. package/lib/cjs/components/select/config.js.map +1 -1
  24. package/lib/cjs/components/select/dropdown.js +25 -2
  25. package/lib/cjs/components/select/dropdown.js.map +1 -1
  26. package/lib/cjs/components/select/select.js +285 -7
  27. package/lib/cjs/components/select/select.js.map +1 -1
  28. package/lib/cjs/components/select/templates.js.map +1 -1
  29. package/lib/esm/components/datatable/datatable-checkbox.js +16 -3
  30. package/lib/esm/components/datatable/datatable-checkbox.js.map +1 -1
  31. package/lib/esm/components/datatable/datatable.js +3 -5
  32. package/lib/esm/components/datatable/datatable.js.map +1 -1
  33. package/lib/esm/components/image-input/image-input.js.map +1 -1
  34. package/lib/esm/components/modal/modal.js +3 -1
  35. package/lib/esm/components/modal/modal.js.map +1 -1
  36. package/lib/esm/components/select/config.js +5 -0
  37. package/lib/esm/components/select/config.js.map +1 -1
  38. package/lib/esm/components/select/dropdown.js +25 -2
  39. package/lib/esm/components/select/dropdown.js.map +1 -1
  40. package/lib/esm/components/select/select.js +285 -7
  41. package/lib/esm/components/select/select.js.map +1 -1
  42. package/lib/esm/components/select/templates.js.map +1 -1
  43. package/package.json +1 -1
  44. package/src/components/datatable/datatable-checkbox.ts +18 -3
  45. package/src/components/datatable/datatable.ts +3 -0
  46. package/src/components/datatable/types.ts +1 -0
  47. package/src/components/image-input/image-input.ts +12 -15
  48. package/src/components/modal/modal.ts +5 -1
  49. package/src/components/select/config.ts +6 -0
  50. package/src/components/select/dropdown.ts +32 -3
  51. package/src/components/select/select.css +4 -4
  52. package/src/components/select/select.ts +350 -9
  53. package/src/components/select/templates.ts +2 -1
package/dist/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
@@ -50,6 +50,8 @@
50
50
  --color-violet-800: oklch(43.2% 0.232 292.759);
51
51
  --color-violet-950: oklch(28.3% 0.141 291.089);
52
52
  --color-purple-500: oklch(62.7% 0.265 303.9);
53
+ --color-purple-600: oklch(55.8% 0.288 302.321);
54
+ --color-purple-700: oklch(49.6% 0.265 301.924);
53
55
  --color-pink-500: oklch(65.6% 0.241 354.308);
54
56
  --color-gray-50: oklch(98.5% 0.002 247.839);
55
57
  --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -78,8 +80,12 @@
78
80
  --spacing: 0.25rem;
79
81
  --container-sm: 24rem;
80
82
  --container-md: 28rem;
83
+ --container-lg: 32rem;
81
84
  --container-2xl: 42rem;
85
+ --container-3xl: 48rem;
82
86
  --container-4xl: 56rem;
87
+ --container-5xl: 64rem;
88
+ --container-6xl: 72rem;
83
89
  --text-xs: 0.75rem;
84
90
  --text-xs--line-height: calc(1 / 0.75);
85
91
  --text-sm: 0.875rem;
@@ -284,6 +290,9 @@
284
290
  .collapse {
285
291
  visibility: collapse;
286
292
  }
293
+ .invisible {
294
+ visibility: hidden;
295
+ }
287
296
  .visible {
288
297
  visibility: visible;
289
298
  }
@@ -313,6 +322,9 @@
313
322
  .sticky {
314
323
  position: sticky;
315
324
  }
325
+ .inset-0 {
326
+ inset: calc(var(--spacing) * 0);
327
+ }
316
328
  .top-1\/2 {
317
329
  top: calc(1/2 * 100%);
318
330
  }
@@ -322,6 +334,9 @@
322
334
  .left-1\/2 {
323
335
  left: calc(1/2 * 100%);
324
336
  }
337
+ .z-50 {
338
+ z-index: 50;
339
+ }
325
340
  .container {
326
341
  width: 100%;
327
342
  @media (width >= 40rem) {
@@ -346,12 +361,21 @@
346
361
  .mx-1 {
347
362
  margin-inline: calc(var(--spacing) * 1);
348
363
  }
364
+ .mx-2 {
365
+ margin-inline: calc(var(--spacing) * 2);
366
+ }
367
+ .mx-4 {
368
+ margin-inline: calc(var(--spacing) * 4);
369
+ }
349
370
  .mx-auto {
350
371
  margin-inline: auto;
351
372
  }
352
373
  .ms-auto {
353
374
  margin-inline-start: auto;
354
375
  }
376
+ .mt-0\.5 {
377
+ margin-top: calc(var(--spacing) * 0.5);
378
+ }
355
379
  .mt-1 {
356
380
  margin-top: calc(var(--spacing) * 1);
357
381
  }
@@ -364,6 +388,9 @@
364
388
  .mt-4 {
365
389
  margin-top: calc(var(--spacing) * 4);
366
390
  }
391
+ .mt-6 {
392
+ margin-top: calc(var(--spacing) * 6);
393
+ }
367
394
  .mt-8 {
368
395
  margin-top: calc(var(--spacing) * 8);
369
396
  }
@@ -394,6 +421,12 @@
394
421
  .ml-1 {
395
422
  margin-left: calc(var(--spacing) * 1);
396
423
  }
424
+ .ml-2 {
425
+ margin-left: calc(var(--spacing) * 2);
426
+ }
427
+ .ml-4 {
428
+ margin-left: calc(var(--spacing) * 4);
429
+ }
397
430
  .block {
398
431
  display: block;
399
432
  }
@@ -435,6 +468,9 @@
435
468
  width: calc(var(--spacing) * 16);
436
469
  height: calc(var(--spacing) * 16);
437
470
  }
471
+ .h-4 {
472
+ height: calc(var(--spacing) * 4);
473
+ }
438
474
  .h-5 {
439
475
  height: calc(var(--spacing) * 5);
440
476
  }
@@ -444,15 +480,33 @@
444
480
  .h-8 {
445
481
  height: calc(var(--spacing) * 8);
446
482
  }
483
+ .h-64 {
484
+ height: calc(var(--spacing) * 64);
485
+ }
486
+ .max-h-48 {
487
+ max-height: calc(var(--spacing) * 48);
488
+ }
489
+ .max-h-64 {
490
+ max-height: calc(var(--spacing) * 64);
491
+ }
447
492
  .max-h-96 {
448
493
  max-height: calc(var(--spacing) * 96);
449
494
  }
450
495
  .max-h-\[250px\] {
451
496
  max-height: 250px;
452
497
  }
498
+ .min-h-\[3rem\] {
499
+ min-height: 3rem;
500
+ }
501
+ .min-h-full {
502
+ min-height: 100%;
503
+ }
453
504
  .min-h-screen {
454
505
  min-height: 100vh;
455
506
  }
507
+ .w-4 {
508
+ width: calc(var(--spacing) * 4);
509
+ }
456
510
  .w-5 {
457
511
  width: calc(var(--spacing) * 5);
458
512
  }
@@ -480,15 +534,33 @@
480
534
  .w-40 {
481
535
  width: calc(var(--spacing) * 40);
482
536
  }
537
+ .w-48 {
538
+ width: calc(var(--spacing) * 48);
539
+ }
540
+ .w-64 {
541
+ width: calc(var(--spacing) * 64);
542
+ }
483
543
  .w-full {
484
544
  width: 100%;
485
545
  }
486
546
  .max-w-2xl {
487
547
  max-width: var(--container-2xl);
488
548
  }
549
+ .max-w-3xl {
550
+ max-width: var(--container-3xl);
551
+ }
489
552
  .max-w-4xl {
490
553
  max-width: var(--container-4xl);
491
554
  }
555
+ .max-w-5xl {
556
+ max-width: var(--container-5xl);
557
+ }
558
+ .max-w-6xl {
559
+ max-width: var(--container-6xl);
560
+ }
561
+ .max-w-lg {
562
+ max-width: var(--container-lg);
563
+ }
492
564
  .max-w-md {
493
565
  max-width: var(--container-md);
494
566
  }
@@ -538,6 +610,18 @@
538
610
  .resize {
539
611
  resize: both;
540
612
  }
613
+ .list-inside {
614
+ list-style-position: inside;
615
+ }
616
+ .list-decimal {
617
+ list-style-type: decimal;
618
+ }
619
+ .list-disc {
620
+ list-style-type: disc;
621
+ }
622
+ .grid-cols-1 {
623
+ grid-template-columns: repeat(1, minmax(0, 1fr));
624
+ }
541
625
  .grid-cols-3 {
542
626
  grid-template-columns: repeat(3, minmax(0, 1fr));
543
627
  }
@@ -553,12 +637,18 @@
553
637
  .items-center {
554
638
  align-items: center;
555
639
  }
640
+ .items-start {
641
+ align-items: flex-start;
642
+ }
556
643
  .justify-between {
557
644
  justify-content: space-between;
558
645
  }
559
646
  .justify-center {
560
647
  justify-content: center;
561
648
  }
649
+ .justify-end {
650
+ justify-content: flex-end;
651
+ }
562
652
  .gap-0\.5 {
563
653
  gap: calc(var(--spacing) * 0.5);
564
654
  }
@@ -580,6 +670,20 @@
580
670
  .gap-8 {
581
671
  gap: calc(var(--spacing) * 8);
582
672
  }
673
+ .space-y-1 {
674
+ :where(& > :not(:last-child)) {
675
+ --tw-space-y-reverse: 0;
676
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
677
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
678
+ }
679
+ }
680
+ .space-y-1\.5 {
681
+ :where(& > :not(:last-child)) {
682
+ --tw-space-y-reverse: 0;
683
+ margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
684
+ margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
685
+ }
686
+ }
583
687
  .space-y-2 {
584
688
  :where(& > :not(:last-child)) {
585
689
  --tw-space-y-reverse: 0;
@@ -587,6 +691,13 @@
587
691
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
588
692
  }
589
693
  }
694
+ .space-y-3 {
695
+ :where(& > :not(:last-child)) {
696
+ --tw-space-y-reverse: 0;
697
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
698
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
699
+ }
700
+ }
590
701
  .space-y-4 {
591
702
  :where(& > :not(:last-child)) {
592
703
  --tw-space-y-reverse: 0;
@@ -635,6 +746,12 @@
635
746
  .overflow-hidden {
636
747
  overflow: hidden;
637
748
  }
749
+ .overflow-x-auto {
750
+ overflow-x: auto;
751
+ }
752
+ .overflow-y-auto {
753
+ overflow-y: auto;
754
+ }
638
755
  .rounded {
639
756
  border-radius: 0.25rem;
640
757
  }
@@ -670,6 +787,10 @@
670
787
  border-bottom-style: var(--tw-border-style);
671
788
  border-bottom-width: 1px;
672
789
  }
790
+ .border-l-2 {
791
+ border-left-style: var(--tw-border-style);
792
+ border-left-width: 2px;
793
+ }
673
794
  .border-dashed {
674
795
  --tw-border-style: dashed;
675
796
  border-style: dashed;
@@ -678,6 +799,9 @@
678
799
  --tw-border-style: none;
679
800
  border-style: none;
680
801
  }
802
+ .border-blue-200 {
803
+ border-color: var(--color-blue-200);
804
+ }
681
805
  .border-blue-500 {
682
806
  border-color: var(--color-blue-500);
683
807
  }
@@ -687,6 +811,12 @@
687
811
  .border-gray-300 {
688
812
  border-color: var(--color-gray-300);
689
813
  }
814
+ .border-gray-400 {
815
+ border-color: var(--color-gray-400);
816
+ }
817
+ .border-gray-900 {
818
+ border-color: var(--color-gray-900);
819
+ }
690
820
  .border-input {
691
821
  border-color: var(--input);
692
822
  }
@@ -711,6 +841,9 @@
711
841
  .bg-gray-100 {
712
842
  background-color: var(--color-gray-100);
713
843
  }
844
+ .bg-gray-200 {
845
+ background-color: var(--color-gray-200);
846
+ }
714
847
  .bg-gray-500 {
715
848
  background-color: var(--color-gray-500);
716
849
  }
@@ -720,12 +853,24 @@
720
853
  .bg-green-500 {
721
854
  background-color: var(--color-green-500);
722
855
  }
856
+ .bg-green-600 {
857
+ background-color: var(--color-green-600);
858
+ }
723
859
  .bg-pink-500 {
724
860
  background-color: var(--color-pink-500);
725
861
  }
726
862
  .bg-purple-500 {
727
863
  background-color: var(--color-purple-500);
728
864
  }
865
+ .bg-purple-600 {
866
+ background-color: var(--color-purple-600);
867
+ }
868
+ .bg-red-50 {
869
+ background-color: var(--color-red-50);
870
+ }
871
+ .bg-red-600 {
872
+ background-color: var(--color-red-600);
873
+ }
729
874
  .bg-transparent {
730
875
  background-color: transparent;
731
876
  }
@@ -741,6 +886,9 @@
741
886
  .p-2 {
742
887
  padding: calc(var(--spacing) * 2);
743
888
  }
889
+ .p-3 {
890
+ padding: calc(var(--spacing) * 3);
891
+ }
744
892
  .p-4 {
745
893
  padding: calc(var(--spacing) * 4);
746
894
  }
@@ -783,6 +931,12 @@
783
931
  .py-3 {
784
932
  padding-block: calc(var(--spacing) * 3);
785
933
  }
934
+ .py-4 {
935
+ padding-block: calc(var(--spacing) * 4);
936
+ }
937
+ .py-5 {
938
+ padding-block: calc(var(--spacing) * 5);
939
+ }
786
940
  .py-8 {
787
941
  padding-block: calc(var(--spacing) * 8);
788
942
  }
@@ -792,9 +946,15 @@
792
946
  .pt-3 {
793
947
  padding-top: calc(var(--spacing) * 3);
794
948
  }
949
+ .pb-2 {
950
+ padding-bottom: calc(var(--spacing) * 2);
951
+ }
795
952
  .pb-3 {
796
953
  padding-bottom: calc(var(--spacing) * 3);
797
954
  }
955
+ .pl-3 {
956
+ padding-left: calc(var(--spacing) * 3);
957
+ }
798
958
  .pl-5 {
799
959
  padding-left: calc(var(--spacing) * 5);
800
960
  }
@@ -818,6 +978,14 @@
818
978
  font-size: var(--text-3xl);
819
979
  line-height: var(--tw-leading, var(--text-3xl--line-height));
820
980
  }
981
+ .text-base {
982
+ font-size: var(--text-base);
983
+ line-height: var(--tw-leading, var(--text-base--line-height));
984
+ }
985
+ .text-lg {
986
+ font-size: var(--text-lg);
987
+ line-height: var(--tw-leading, var(--text-lg--line-height));
988
+ }
821
989
  .text-sm {
822
990
  font-size: var(--text-sm);
823
991
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -842,6 +1010,10 @@
842
1010
  --tw-font-weight: var(--font-weight-medium);
843
1011
  font-weight: var(--font-weight-medium);
844
1012
  }
1013
+ .font-normal {
1014
+ --tw-font-weight: var(--font-weight-normal);
1015
+ font-weight: var(--font-weight-normal);
1016
+ }
845
1017
  .font-semibold {
846
1018
  --tw-font-weight: var(--font-weight-semibold);
847
1019
  font-weight: var(--font-weight-semibold);
@@ -888,9 +1060,15 @@
888
1060
  .text-primary {
889
1061
  color: var(--primary);
890
1062
  }
1063
+ .text-purple-600 {
1064
+ color: var(--color-purple-600);
1065
+ }
891
1066
  .text-red-600 {
892
1067
  color: var(--color-red-600);
893
1068
  }
1069
+ .text-red-700 {
1070
+ color: var(--color-red-700);
1071
+ }
894
1072
  .text-white {
895
1073
  color: var(--color-white);
896
1074
  }
@@ -928,13 +1106,24 @@
928
1106
  --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));
929
1107
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
930
1108
  }
1109
+ .shadow-xl {
1110
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1111
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1112
+ }
931
1113
  .ring {
932
1114
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
933
1115
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
934
1116
  }
1117
+ .ring-2 {
1118
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1119
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1120
+ }
935
1121
  .ring-blue-300 {
936
1122
  --tw-ring-color: var(--color-blue-300);
937
1123
  }
1124
+ .ring-gray-400 {
1125
+ --tw-ring-color: var(--color-gray-400);
1126
+ }
938
1127
  .outline {
939
1128
  outline-style: var(--tw-outline-style);
940
1129
  outline-width: 1px;
@@ -960,6 +1149,15 @@
960
1149
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
961
1150
  transition-duration: var(--tw-duration, var(--default-transition-duration));
962
1151
  }
1152
+ .transition-colors {
1153
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1154
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1155
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1156
+ }
1157
+ .duration-200 {
1158
+ --tw-duration: 200ms;
1159
+ transition-duration: 200ms;
1160
+ }
963
1161
  .duration-300 {
964
1162
  --tw-duration: 300ms;
965
1163
  transition-duration: 300ms;
@@ -992,6 +1190,13 @@
992
1190
  }
993
1191
  }
994
1192
  }
1193
+ .hover\:bg-gray-50 {
1194
+ &:hover {
1195
+ @media (hover: hover) {
1196
+ background-color: var(--color-gray-50);
1197
+ }
1198
+ }
1199
+ }
995
1200
  .hover\:bg-gray-100 {
996
1201
  &:hover {
997
1202
  @media (hover: hover) {
@@ -1006,6 +1211,13 @@
1006
1211
  }
1007
1212
  }
1008
1213
  }
1214
+ .hover\:bg-gray-300 {
1215
+ &:hover {
1216
+ @media (hover: hover) {
1217
+ background-color: var(--color-gray-300);
1218
+ }
1219
+ }
1220
+ }
1009
1221
  .hover\:bg-gray-600 {
1010
1222
  &:hover {
1011
1223
  @media (hover: hover) {
@@ -1013,6 +1225,41 @@
1013
1225
  }
1014
1226
  }
1015
1227
  }
1228
+ .hover\:bg-gray-700 {
1229
+ &:hover {
1230
+ @media (hover: hover) {
1231
+ background-color: var(--color-gray-700);
1232
+ }
1233
+ }
1234
+ }
1235
+ .hover\:bg-gray-800 {
1236
+ &:hover {
1237
+ @media (hover: hover) {
1238
+ background-color: var(--color-gray-800);
1239
+ }
1240
+ }
1241
+ }
1242
+ .hover\:bg-green-700 {
1243
+ &:hover {
1244
+ @media (hover: hover) {
1245
+ background-color: var(--color-green-700);
1246
+ }
1247
+ }
1248
+ }
1249
+ .hover\:bg-purple-700 {
1250
+ &:hover {
1251
+ @media (hover: hover) {
1252
+ background-color: var(--color-purple-700);
1253
+ }
1254
+ }
1255
+ }
1256
+ .hover\:bg-red-700 {
1257
+ &:hover {
1258
+ @media (hover: hover) {
1259
+ background-color: var(--color-red-700);
1260
+ }
1261
+ }
1262
+ }
1016
1263
  .hover\:text-blue-600 {
1017
1264
  &:hover {
1018
1265
  @media (hover: hover) {
@@ -1049,6 +1296,11 @@
1049
1296
  outline-style: none;
1050
1297
  }
1051
1298
  }
1299
+ .md\:grid-cols-2 {
1300
+ @media (width >= 48rem) {
1301
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1302
+ }
1303
+ }
1052
1304
  .rtl\:rotate-180 {
1053
1305
  &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
1054
1306
  rotate: 180deg;
@@ -1069,6 +1321,53 @@
1069
1321
  text-align: right;
1070
1322
  }
1071
1323
  }
1324
+ .dark\:border-gray-700 {
1325
+ &:is(.dark *) {
1326
+ border-color: var(--color-gray-700);
1327
+ }
1328
+ }
1329
+ .dark\:bg-blue-500 {
1330
+ &:is(.dark *) {
1331
+ background-color: var(--color-blue-500);
1332
+ }
1333
+ }
1334
+ .dark\:bg-gray-800 {
1335
+ &:is(.dark *) {
1336
+ background-color: var(--color-gray-800);
1337
+ }
1338
+ }
1339
+ .dark\:bg-gray-900 {
1340
+ &:is(.dark *) {
1341
+ background-color: var(--color-gray-900);
1342
+ }
1343
+ }
1344
+ .dark\:text-gray-200 {
1345
+ &:is(.dark *) {
1346
+ color: var(--color-gray-200);
1347
+ }
1348
+ }
1349
+ .dark\:text-white {
1350
+ &:is(.dark *) {
1351
+ color: var(--color-white);
1352
+ }
1353
+ }
1354
+ .dark\:shadow-gray-900\/50 {
1355
+ &:is(.dark *) {
1356
+ --tw-shadow-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
1357
+ @supports (color: color-mix(in lab, red, red)) {
1358
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-900) 50%, transparent) var(--tw-shadow-alpha), transparent);
1359
+ }
1360
+ }
1361
+ }
1362
+ .dark\:hover\:bg-blue-600 {
1363
+ &:is(.dark *) {
1364
+ &:hover {
1365
+ @media (hover: hover) {
1366
+ background-color: var(--color-blue-600);
1367
+ }
1368
+ }
1369
+ }
1370
+ }
1072
1371
  .kt-select-option-selected\:block {
1073
1372
  [data-kt-select-option].selected {
1074
1373
  display: block;
@@ -4675,9 +4974,12 @@
4675
4974
  font-weight: var(--font-weight-medium);
4676
4975
  border-style: var(--tw-border-style);
4677
4976
  border-width: 1px;
4678
- border-color: var(--color-gray-200);
4679
- background-color: var(--color-gray-50);
4680
- color: var(--color-gray-700);
4977
+ border-color: var(--border);
4978
+ background-color: var(--accent);
4979
+ @supports (color: color-mix(in lab, red, red)) {
4980
+ background-color: color-mix(in oklab, var(--accent) 10%, transparent);
4981
+ }
4982
+ color: var(--accent-foreground);
4681
4983
  max-width: 200px;
4682
4984
  flex-shrink: 0;
4683
4985
  overflow: hidden;
@@ -4695,15 +4997,18 @@
4695
4997
  align-items: center;
4696
4998
  justify-content: center;
4697
4999
  border-radius: calc(infinity * 1px);
4698
- color: var(--color-gray-500);
5000
+ color: var(--muted-foreground);
4699
5001
  &:hover {
4700
5002
  @media (hover: hover) {
4701
- background-color: var(--color-gray-200);
5003
+ background-color: var(--accent);
5004
+ @supports (color: color-mix(in lab, red, red)) {
5005
+ background-color: color-mix(in oklab, var(--accent) 20%, transparent);
5006
+ }
4702
5007
  }
4703
5008
  }
4704
5009
  &:hover {
4705
5010
  @media (hover: hover) {
4706
- color: var(--color-gray-700);
5011
+ color: var(--accent-foreground);
4707
5012
  }
4708
5013
  }
4709
5014
  cursor: pointer;
@@ -4749,17 +5054,20 @@
4749
5054
  border-radius: calc(var(--radius) - 2px);
4750
5055
  border-style: var(--tw-border-style);
4751
5056
  border-width: 1px;
4752
- border-color: var(--color-gray-200);
4753
- background-color: var(--color-white);
5057
+ border-color: var(--input);
5058
+ background-color: var(--background);
4754
5059
  &:focus-within {
4755
- border-color: var(--color-blue-300);
5060
+ border-color: var(--ring);
4756
5061
  }
4757
5062
  &:focus-within {
4758
5063
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
4759
5064
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4760
5065
  }
4761
5066
  &:focus-within {
4762
- --tw-ring-color: var(--color-blue-100);
5067
+ --tw-ring-color: var(--ring);
5068
+ @supports (color: color-mix(in lab, red, red)) {
5069
+ --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent);
5070
+ }
4763
5071
  }
4764
5072
  transition-property: all;
4765
5073
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));