@mlw-packages/react-components 1.3.13 → 1.3.14

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/index.css CHANGED
@@ -465,6 +465,9 @@ body {
465
465
  .top-1\/2 {
466
466
  top: 50%;
467
467
  }
468
+ .top-2 {
469
+ top: 0.5rem;
470
+ }
468
471
  .top-3\.5 {
469
472
  top: 0.875rem;
470
473
  }
@@ -504,6 +507,12 @@ body {
504
507
  .m-0 {
505
508
  margin: 0px;
506
509
  }
510
+ .m-12 {
511
+ margin: 3rem;
512
+ }
513
+ .m-6 {
514
+ margin: 1.5rem;
515
+ }
507
516
  .-mx-1 {
508
517
  margin-left: -0.25rem;
509
518
  margin-right: -0.25rem;
@@ -561,12 +570,21 @@ body {
561
570
  .mb-6 {
562
571
  margin-bottom: 1.5rem;
563
572
  }
573
+ .mb-8 {
574
+ margin-bottom: 2rem;
575
+ }
564
576
  .mb-\[-1rem\] {
565
577
  margin-bottom: -1rem;
566
578
  }
567
579
  .ml-2 {
568
580
  margin-left: 0.5rem;
569
581
  }
582
+ .ml-36 {
583
+ margin-left: 9rem;
584
+ }
585
+ .ml-40 {
586
+ margin-left: 10rem;
587
+ }
570
588
  .ml-5 {
571
589
  margin-left: 1.25rem;
572
590
  }
@@ -588,9 +606,6 @@ body {
588
606
  .mt-1 {
589
607
  margin-top: 0.25rem;
590
608
  }
591
- .mt-10 {
592
- margin-top: 2.5rem;
593
- }
594
609
  .mt-2 {
595
610
  margin-top: 0.5rem;
596
611
  }
@@ -705,6 +720,9 @@ body {
705
720
  .h-5 {
706
721
  height: 1.25rem;
707
722
  }
723
+ .h-56 {
724
+ height: 14rem;
725
+ }
708
726
  .h-6 {
709
727
  height: 1.5rem;
710
728
  }
@@ -726,15 +744,15 @@ body {
726
744
  .h-\[1\.2rem\] {
727
745
  height: 1.2rem;
728
746
  }
729
- .h-\[120px\] {
730
- height: 120px;
731
- }
732
747
  .h-\[1px\] {
733
748
  height: 1px;
734
749
  }
735
750
  .h-\[200px\] {
736
751
  height: 200px;
737
752
  }
753
+ .h-\[220px\] {
754
+ height: 220px;
755
+ }
738
756
  .h-\[var\(--radix-select-trigger-height\)\] {
739
757
  height: var(--radix-select-trigger-height);
740
758
  }
@@ -750,6 +768,9 @@ body {
750
768
  .h-svh {
751
769
  height: 100svh;
752
770
  }
771
+ .max-h-40 {
772
+ max-height: 10rem;
773
+ }
753
774
  .max-h-96 {
754
775
  max-height: 24rem;
755
776
  }
@@ -810,12 +831,18 @@ body {
810
831
  .w-44 {
811
832
  width: 11rem;
812
833
  }
834
+ .w-48 {
835
+ width: 12rem;
836
+ }
813
837
  .w-5 {
814
838
  width: 1.25rem;
815
839
  }
816
840
  .w-6 {
817
841
  width: 1.5rem;
818
842
  }
843
+ .w-60 {
844
+ width: 15rem;
845
+ }
819
846
  .w-64 {
820
847
  width: 16rem;
821
848
  }
@@ -825,9 +852,6 @@ body {
825
852
  .w-72 {
826
853
  width: 18rem;
827
854
  }
828
- .w-8 {
829
- width: 2rem;
830
- }
831
855
  .w-80 {
832
856
  width: 20rem;
833
857
  }
@@ -931,6 +955,9 @@ body {
931
955
  .max-w-\[80px\] {
932
956
  max-width: 80px;
933
957
  }
958
+ .max-w-full {
959
+ max-width: 100%;
960
+ }
934
961
  .max-w-lg {
935
962
  max-width: 32rem;
936
963
  }
@@ -940,6 +967,9 @@ body {
940
967
  .max-w-sm {
941
968
  max-width: 24rem;
942
969
  }
970
+ .max-w-xl {
971
+ max-width: 36rem;
972
+ }
943
973
  .max-w-xs {
944
974
  max-width: 20rem;
945
975
  }
@@ -1099,6 +1129,9 @@ body {
1099
1129
  .gap-2 {
1100
1130
  gap: 0.5rem;
1101
1131
  }
1132
+ .gap-20 {
1133
+ gap: 5rem;
1134
+ }
1102
1135
  .gap-3 {
1103
1136
  gap: 0.75rem;
1104
1137
  }
@@ -1111,10 +1144,13 @@ body {
1111
1144
  .gap-6 {
1112
1145
  gap: 1.5rem;
1113
1146
  }
1114
- .-space-x-2 > :not([hidden]) ~ :not([hidden]) {
1147
+ .gap-8 {
1148
+ gap: 2rem;
1149
+ }
1150
+ .-space-x-3 > :not([hidden]) ~ :not([hidden]) {
1115
1151
  --tw-space-x-reverse: 0;
1116
- margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
1117
- margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
1152
+ margin-right: calc(-0.75rem * var(--tw-space-x-reverse));
1153
+ margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
1118
1154
  }
1119
1155
  .space-x-1 > :not([hidden]) ~ :not([hidden]) {
1120
1156
  --tw-space-x-reverse: 0;
@@ -1202,6 +1238,9 @@ body {
1202
1238
  .whitespace-pre {
1203
1239
  white-space: pre;
1204
1240
  }
1241
+ .whitespace-pre-wrap {
1242
+ white-space: pre-wrap;
1243
+ }
1205
1244
  .whitespace-break-spaces {
1206
1245
  white-space: break-spaces;
1207
1246
  }
@@ -1311,6 +1350,10 @@ body {
1311
1350
  .border-border {
1312
1351
  border-color: hsl(var(--border));
1313
1352
  }
1353
+ .border-gray-200 {
1354
+ --tw-border-opacity: 1;
1355
+ border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
1356
+ }
1314
1357
  .border-gray-300 {
1315
1358
  --tw-border-opacity: 1;
1316
1359
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@@ -1318,6 +1361,10 @@ body {
1318
1361
  .border-input {
1319
1362
  border-color: hsl(var(--input));
1320
1363
  }
1364
+ .border-neutral-200 {
1365
+ --tw-border-opacity: 1;
1366
+ border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
1367
+ }
1321
1368
  .border-primary {
1322
1369
  border-color: hsl(var(--primary));
1323
1370
  }
@@ -1350,6 +1397,10 @@ body {
1350
1397
  .bg-black\/80 {
1351
1398
  background-color: rgb(0 0 0 / 0.8);
1352
1399
  }
1400
+ .bg-blue-600 {
1401
+ --tw-bg-opacity: 1;
1402
+ background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
1403
+ }
1353
1404
  .bg-border {
1354
1405
  background-color: hsl(var(--border));
1355
1406
  }
@@ -1359,6 +1410,10 @@ body {
1359
1410
  .bg-destructive {
1360
1411
  background-color: hsl(var(--destructive));
1361
1412
  }
1413
+ .bg-emerald-600 {
1414
+ --tw-bg-opacity: 1;
1415
+ background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
1416
+ }
1362
1417
  .bg-foreground {
1363
1418
  background-color: hsl(var(--foreground));
1364
1419
  }
@@ -1374,12 +1429,24 @@ body {
1374
1429
  --tw-bg-opacity: 1;
1375
1430
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
1376
1431
  }
1432
+ .bg-green-100 {
1433
+ --tw-bg-opacity: 1;
1434
+ background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
1435
+ }
1377
1436
  .bg-muted {
1378
1437
  background-color: hsl(var(--muted));
1379
1438
  }
1380
1439
  .bg-muted\/50 {
1381
1440
  background-color: hsl(var(--muted) / 0.5);
1382
1441
  }
1442
+ .bg-neutral-100 {
1443
+ --tw-bg-opacity: 1;
1444
+ background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
1445
+ }
1446
+ .bg-neutral-800 {
1447
+ --tw-bg-opacity: 1;
1448
+ background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
1449
+ }
1383
1450
  .bg-neutral-950 {
1384
1451
  --tw-bg-opacity: 1;
1385
1452
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
@@ -1414,6 +1481,10 @@ body {
1414
1481
  --tw-bg-opacity: 1;
1415
1482
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
1416
1483
  }
1484
+ .bg-yellow-500 {
1485
+ --tw-bg-opacity: 1;
1486
+ background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
1487
+ }
1417
1488
  .bg-zinc-200 {
1418
1489
  --tw-bg-opacity: 1;
1419
1490
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
@@ -1446,6 +1517,9 @@ body {
1446
1517
  .p-1 {
1447
1518
  padding: 0.25rem;
1448
1519
  }
1520
+ .p-1\.5 {
1521
+ padding: 0.375rem;
1522
+ }
1449
1523
  .p-2 {
1450
1524
  padding: 0.5rem;
1451
1525
  }
@@ -1487,6 +1561,10 @@ body {
1487
1561
  padding-left: 1rem;
1488
1562
  padding-right: 1rem;
1489
1563
  }
1564
+ .px-5 {
1565
+ padding-left: 1.25rem;
1566
+ padding-right: 1.25rem;
1567
+ }
1490
1568
  .px-6 {
1491
1569
  padding-left: 1.5rem;
1492
1570
  padding-right: 1.5rem;
@@ -1603,16 +1681,16 @@ body {
1603
1681
  font-size: 2.25rem;
1604
1682
  line-height: 2.5rem;
1605
1683
  }
1606
- .text-7xl {
1607
- font-size: 4.5rem;
1684
+ .text-6xl {
1685
+ font-size: 3.75rem;
1608
1686
  line-height: 1;
1609
1687
  }
1610
- .text-\[0\.70rem\] {
1611
- font-size: 0.70rem;
1612
- }
1613
1688
  .text-\[0\.8rem\] {
1614
1689
  font-size: 0.8rem;
1615
1690
  }
1691
+ .text-\[28\.5px\] {
1692
+ font-size: 28.5px;
1693
+ }
1616
1694
  .text-base {
1617
1695
  font-size: 1rem;
1618
1696
  line-height: 1.5rem;
@@ -1636,6 +1714,9 @@ body {
1636
1714
  .font-bold {
1637
1715
  font-weight: 700;
1638
1716
  }
1717
+ .font-extrabold {
1718
+ font-weight: 800;
1719
+ }
1639
1720
  .font-medium {
1640
1721
  font-weight: 500;
1641
1722
  }
@@ -1661,12 +1742,16 @@ body {
1661
1742
  .tracking-tight {
1662
1743
  letter-spacing: -0.025em;
1663
1744
  }
1664
- .tracking-tighter {
1665
- letter-spacing: -0.05em;
1745
+ .tracking-wider {
1746
+ letter-spacing: 0.05em;
1666
1747
  }
1667
1748
  .tracking-widest {
1668
1749
  letter-spacing: 0.1em;
1669
1750
  }
1751
+ .text-black {
1752
+ --tw-text-opacity: 1;
1753
+ color: rgb(0 0 0 / var(--tw-text-opacity, 1));
1754
+ }
1670
1755
  .text-blue-600 {
1671
1756
  --tw-text-opacity: 1;
1672
1757
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -1683,6 +1768,10 @@ body {
1683
1768
  .text-destructive-foreground {
1684
1769
  color: hsl(var(--destructive-foreground));
1685
1770
  }
1771
+ .text-emerald-600 {
1772
+ --tw-text-opacity: 1;
1773
+ color: rgb(5 150 105 / var(--tw-text-opacity, 1));
1774
+ }
1686
1775
  .text-foreground {
1687
1776
  color: hsl(var(--foreground));
1688
1777
  }
@@ -1698,21 +1787,33 @@ body {
1698
1787
  --tw-text-opacity: 1;
1699
1788
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
1700
1789
  }
1701
- .text-gray-900 {
1702
- --tw-text-opacity: 1;
1703
- color: rgb(17 24 39 / var(--tw-text-opacity, 1));
1704
- }
1705
1790
  .text-green-600 {
1706
1791
  --tw-text-opacity: 1;
1707
1792
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
1708
1793
  }
1794
+ .text-green-700 {
1795
+ --tw-text-opacity: 1;
1796
+ color: rgb(21 128 61 / var(--tw-text-opacity, 1));
1797
+ }
1709
1798
  .text-muted-foreground {
1710
1799
  color: hsl(var(--muted-foreground));
1711
1800
  }
1801
+ .text-neutral-500 {
1802
+ --tw-text-opacity: 1;
1803
+ color: rgb(115 115 115 / var(--tw-text-opacity, 1));
1804
+ }
1712
1805
  .text-neutral-600 {
1713
1806
  --tw-text-opacity: 1;
1714
1807
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
1715
1808
  }
1809
+ .text-neutral-700 {
1810
+ --tw-text-opacity: 1;
1811
+ color: rgb(64 64 64 / var(--tw-text-opacity, 1));
1812
+ }
1813
+ .text-neutral-800 {
1814
+ --tw-text-opacity: 1;
1815
+ color: rgb(38 38 38 / var(--tw-text-opacity, 1));
1816
+ }
1716
1817
  .text-neutral-900 {
1717
1818
  --tw-text-opacity: 1;
1718
1819
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
@@ -1753,6 +1854,10 @@ body {
1753
1854
  --tw-text-opacity: 1;
1754
1855
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1755
1856
  }
1857
+ .text-yellow-500 {
1858
+ --tw-text-opacity: 1;
1859
+ color: rgb(234 179 8 / var(--tw-text-opacity, 1));
1860
+ }
1756
1861
  .text-yellow-600 {
1757
1862
  --tw-text-opacity: 1;
1758
1863
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
@@ -1773,6 +1878,9 @@ body {
1773
1878
  --tw-text-opacity: 1;
1774
1879
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
1775
1880
  }
1881
+ .underline {
1882
+ text-decoration-line: underline;
1883
+ }
1776
1884
  .underline-offset-4 {
1777
1885
  text-underline-offset: 4px;
1778
1886
  }
@@ -1873,9 +1981,27 @@ body {
1873
1981
  var(--tw-ring-shadow),
1874
1982
  var(--tw-shadow, 0 0 #0000);
1875
1983
  }
1984
+ .ring-2 {
1985
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1986
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1987
+ box-shadow:
1988
+ var(--tw-ring-offset-shadow),
1989
+ var(--tw-ring-shadow),
1990
+ var(--tw-shadow, 0 0 #0000);
1991
+ }
1992
+ .ring-background {
1993
+ --tw-ring-color: hsl(var(--background));
1994
+ }
1995
+ .ring-primary {
1996
+ --tw-ring-color: hsl(var(--primary));
1997
+ }
1876
1998
  .ring-offset-background {
1877
1999
  --tw-ring-offset-color: hsl(var(--background));
1878
2000
  }
2001
+ .grayscale {
2002
+ --tw-grayscale: grayscale(100%);
2003
+ 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);
2004
+ }
1879
2005
  .\!filter {
1880
2006
  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) !important;
1881
2007
  }
@@ -2077,6 +2203,7 @@ body {
2077
2203
  --destructive: 0 100% 50%;
2078
2204
  --destructive-foreground: 210 40% 98%;
2079
2205
  --ring: 215 20.2% 65.1%;
2206
+ --tick-color: #000;
2080
2207
  }
2081
2208
  .dark,
2082
2209
  .dark-purple,
@@ -2095,6 +2222,7 @@ body {
2095
2222
  --destructive: 0 100% 70%;
2096
2223
  --destructive-foreground: 231 15% 19%;
2097
2224
  --ring: 216 34% 17%;
2225
+ --tick-color: #fff;
2098
2226
  }
2099
2227
  .dark {
2100
2228
  --primary: 210 40% 98%;
@@ -2324,25 +2452,50 @@ body {
2324
2452
  .hover\:bg-accent:hover {
2325
2453
  background-color: hsl(var(--accent));
2326
2454
  }
2455
+ .hover\:bg-blue-700:hover {
2456
+ --tw-bg-opacity: 1;
2457
+ background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
2458
+ }
2327
2459
  .hover\:bg-destructive\/90:hover {
2328
2460
  background-color: hsl(var(--destructive) / 0.9);
2329
2461
  }
2462
+ .hover\:bg-emerald-700:hover {
2463
+ --tw-bg-opacity: 1;
2464
+ background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
2465
+ }
2466
+ .hover\:bg-gray-100:hover {
2467
+ --tw-bg-opacity: 1;
2468
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
2469
+ }
2470
+ .hover\:bg-gray-200:hover {
2471
+ --tw-bg-opacity: 1;
2472
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
2473
+ }
2330
2474
  .hover\:bg-muted\/50:hover {
2331
2475
  background-color: hsl(var(--muted) / 0.5);
2332
2476
  }
2333
- .hover\:bg-muted\/80:hover {
2334
- background-color: hsl(var(--muted) / 0.8);
2477
+ .hover\:bg-neutral-200:hover {
2478
+ --tw-bg-opacity: 1;
2479
+ background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
2480
+ }
2481
+ .hover\:bg-neutral-700:hover {
2482
+ --tw-bg-opacity: 1;
2483
+ background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
2335
2484
  }
2336
2485
  .hover\:bg-primary:hover {
2337
2486
  background-color: hsl(var(--primary));
2338
2487
  }
2339
- .hover\:bg-primary\/80:hover {
2340
- background-color: hsl(var(--primary) / 0.8);
2488
+ .hover\:bg-primary\/20:hover {
2489
+ background-color: hsl(var(--primary) / 0.2);
2341
2490
  }
2342
2491
  .hover\:bg-slate-900:hover {
2343
2492
  --tw-bg-opacity: 1;
2344
2493
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
2345
2494
  }
2495
+ .hover\:bg-yellow-600:hover {
2496
+ --tw-bg-opacity: 1;
2497
+ background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
2498
+ }
2346
2499
  .hover\:bg-zinc-300:hover {
2347
2500
  --tw-bg-opacity: 1;
2348
2501
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
@@ -2424,6 +2577,9 @@ body {
2424
2577
  var(--tw-ring-shadow),
2425
2578
  var(--tw-shadow, 0 0 #0000);
2426
2579
  }
2580
+ .focus\:ring-primary:focus {
2581
+ --tw-ring-color: hsl(var(--primary));
2582
+ }
2427
2583
  .focus\:ring-ring:focus {
2428
2584
  --tw-ring-color: hsl(var(--ring));
2429
2585
  }
@@ -2505,8 +2661,9 @@ body {
2505
2661
  .group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
2506
2662
  opacity: 1;
2507
2663
  }
2508
- .group.toast .group-\[\.toast\]\:text-muted-foreground {
2509
- color: hsl(var(--muted-foreground));
2664
+ .group.toast .group-\[\.toast\]\:text-neutral-600 {
2665
+ --tw-text-opacity: 1;
2666
+ color: rgb(82 82 82 / var(--tw-text-opacity, 1));
2510
2667
  }
2511
2668
  .peer:focus ~ .peer-focus\:shadow-lg {
2512
2669
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
@@ -2718,6 +2875,22 @@ body {
2718
2875
  .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
2719
2876
  color: hsl(var(--muted-foreground));
2720
2877
  }
2878
+ .data-\[type\=error\]\:text-red-800[data-type=error] {
2879
+ --tw-text-opacity: 1;
2880
+ color: rgb(153 27 27 / var(--tw-text-opacity, 1));
2881
+ }
2882
+ .data-\[type\=info\]\:text-blue-800[data-type=info] {
2883
+ --tw-text-opacity: 1;
2884
+ color: rgb(30 64 175 / var(--tw-text-opacity, 1));
2885
+ }
2886
+ .data-\[type\=success\]\:text-green-800[data-type=success] {
2887
+ --tw-text-opacity: 1;
2888
+ color: rgb(22 101 52 / var(--tw-text-opacity, 1));
2889
+ }
2890
+ .data-\[type\=warning\]\:text-yellow-800[data-type=warning] {
2891
+ --tw-text-opacity: 1;
2892
+ color: rgb(133 77 14 / var(--tw-text-opacity, 1));
2893
+ }
2721
2894
  .data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
2722
2895
  opacity: 0.5;
2723
2896
  }
@@ -2840,21 +3013,6 @@ body {
2840
3013
  .data-\[state\=open\]\:duration-500[data-state=open] {
2841
3014
  animation-duration: 500ms;
2842
3015
  }
2843
- .\*\:data-\[slot\=avatar\]\:ring-2[data-slot=avatar] > * {
2844
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2845
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2846
- box-shadow:
2847
- var(--tw-ring-offset-shadow),
2848
- var(--tw-ring-shadow),
2849
- var(--tw-shadow, 0 0 #0000);
2850
- }
2851
- .\*\:data-\[slot\=avatar\]\:ring-background[data-slot=avatar] > * {
2852
- --tw-ring-color: hsl(var(--background));
2853
- }
2854
- .\*\:data-\[slot\=avatar\]\:grayscale[data-slot=avatar] > * {
2855
- --tw-grayscale: grayscale(100%);
2856
- 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);
2857
- }
2858
3016
  .data-\[state\=active\]\:after\:scale-x-100[data-state=active]::after {
2859
3017
  content: var(--tw-content);
2860
3018
  --tw-scale-x: 1;
@@ -2959,6 +3117,10 @@ body {
2959
3117
  .peer[data-variant=inset] ~ .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\] {
2960
3118
  min-height: calc(100svh - 1rem);
2961
3119
  }
3120
+ .dark\:border-gray-700:is(.dark *) {
3121
+ --tw-border-opacity: 1;
3122
+ border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
3123
+ }
2962
3124
  .dark\:border-transparent:is(.dark *) {
2963
3125
  border-color: transparent;
2964
3126
  }
@@ -2966,10 +3128,6 @@ body {
2966
3128
  --tw-bg-opacity: 1;
2967
3129
  background-color: hsl(231 15% 19% / var(--tw-bg-opacity, 1));
2968
3130
  }
2969
- .dark\:bg-gray-900:is(.dark *) {
2970
- --tw-bg-opacity: 1;
2971
- background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
2972
- }
2973
3131
  .dark\:bg-input\/30:is(.dark *) {
2974
3132
  background-color: hsl(var(--input) / 0.3);
2975
3133
  }
@@ -3000,30 +3158,14 @@ body {
3000
3158
  --tw-text-opacity: 1;
3001
3159
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
3002
3160
  }
3003
- .dark\:text-blue-400:is(.dark *) {
3004
- --tw-text-opacity: 1;
3005
- color: rgb(96 165 250 / var(--tw-text-opacity, 1));
3006
- }
3007
- .dark\:text-gray-100:is(.dark *) {
3008
- --tw-text-opacity: 1;
3009
- color: rgb(243 244 246 / var(--tw-text-opacity, 1));
3010
- }
3011
3161
  .dark\:text-gray-300:is(.dark *) {
3012
3162
  --tw-text-opacity: 1;
3013
3163
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
3014
3164
  }
3015
- .dark\:text-green-400:is(.dark *) {
3016
- --tw-text-opacity: 1;
3017
- color: rgb(74 222 128 / var(--tw-text-opacity, 1));
3018
- }
3019
3165
  .dark\:text-neutral-300:is(.dark *) {
3020
3166
  --tw-text-opacity: 1;
3021
3167
  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
3022
3168
  }
3023
- .dark\:text-red-400:is(.dark *) {
3024
- --tw-text-opacity: 1;
3025
- color: rgb(248 113 113 / var(--tw-text-opacity, 1));
3026
- }
3027
3169
  .dark\:text-slate-400:is(.dark *) {
3028
3170
  --tw-text-opacity: 1;
3029
3171
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
@@ -3040,14 +3182,6 @@ body {
3040
3182
  --tw-text-opacity: 1;
3041
3183
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
3042
3184
  }
3043
- .dark\:text-yellow-400:is(.dark *) {
3044
- --tw-text-opacity: 1;
3045
- color: rgb(250 204 21 / var(--tw-text-opacity, 1));
3046
- }
3047
- .dark\:text-zinc-400:is(.dark *) {
3048
- --tw-text-opacity: 1;
3049
- color: rgb(161 161 170 / var(--tw-text-opacity, 1));
3050
- }
3051
3185
  .dark\:hover\:bg-slate-50:hover:is(.dark *) {
3052
3186
  --tw-bg-opacity: 1;
3053
3187
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
@@ -3064,9 +3198,6 @@ body {
3064
3198
  --tw-text-opacity: 1;
3065
3199
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
3066
3200
  }
3067
- .group.toast .dark\:group-\[\.toast\]\:text-muted-foreground\/80:is(.dark *) {
3068
- color: hsl(var(--muted-foreground) / 0.8);
3069
- }
3070
3201
  .dark\:aria-selected\:bg-primary[aria-selected=true]:is(.dark *) {
3071
3202
  background-color: hsl(var(--primary));
3072
3203
  }
@@ -3088,34 +3219,6 @@ body {
3088
3219
  --tw-text-opacity: 1;
3089
3220
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
3090
3221
  }
3091
- .dark\:data-\[type\=error\]\:bg-red-900\/30[data-type=error]:is(.dark *) {
3092
- background-color: rgb(127 29 29 / 0.3);
3093
- }
3094
- .dark\:data-\[type\=info\]\:bg-blue-900\/30[data-type=info]:is(.dark *) {
3095
- background-color: rgb(30 58 138 / 0.3);
3096
- }
3097
- .dark\:data-\[type\=success\]\:bg-green-900\/30[data-type=success]:is(.dark *) {
3098
- background-color: rgb(20 83 45 / 0.3);
3099
- }
3100
- .dark\:data-\[type\=warning\]\:bg-yellow-900\/30[data-type=warning]:is(.dark *) {
3101
- background-color: rgb(113 63 18 / 0.3);
3102
- }
3103
- .dark\:data-\[type\=error\]\:text-red-400[data-type=error]:is(.dark *) {
3104
- --tw-text-opacity: 1;
3105
- color: rgb(248 113 113 / var(--tw-text-opacity, 1));
3106
- }
3107
- .dark\:data-\[type\=info\]\:text-blue-400[data-type=info]:is(.dark *) {
3108
- --tw-text-opacity: 1;
3109
- color: rgb(96 165 250 / var(--tw-text-opacity, 1));
3110
- }
3111
- .dark\:data-\[type\=success\]\:text-green-400[data-type=success]:is(.dark *) {
3112
- --tw-text-opacity: 1;
3113
- color: rgb(74 222 128 / var(--tw-text-opacity, 1));
3114
- }
3115
- .dark\:data-\[type\=warning\]\:text-yellow-400[data-type=warning]:is(.dark *) {
3116
- --tw-text-opacity: 1;
3117
- color: rgb(250 204 21 / var(--tw-text-opacity, 1));
3118
- }
3119
3222
  @media (min-width: 640px) {
3120
3223
  .sm\:mt-0 {
3121
3224
  margin-top: 0px;
package/dist/index.js CHANGED
@@ -3034,34 +3034,34 @@ var Toaster = ({ ...props }) => {
3034
3034
  classNames: {
3035
3035
  toast: `
3036
3036
  group toast
3037
- bg-white dark:bg-gray-900
3038
- text-gray-900 dark:text-gray-100
3037
+ bg-white
3038
+ text-neutral-800
3039
3039
  shadow-lg rounded-md
3040
3040
  border-l-8
3041
- border-border
3041
+ border-neutral-200
3042
3042
  flex items-center gap-3
3043
- data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-900/30 dark:data-[type=success]:text-green-400
3044
- data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-900/30 dark:data-[type=error]:text-red-400
3045
- data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-900/30 dark:data-[type=warning]:text-yellow-400
3046
- data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-900/30 dark:data-[type=info]:text-blue-400
3043
+
3044
+ data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800
3045
+ data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800
3046
+ data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 data-[type=warning]:text-yellow-800
3047
+ data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 data-[type=info]:text-blue-800
3047
3048
  `,
3048
3049
  description: `
3049
3050
  text-sm
3050
- group-[.toast]:text-muted-foreground
3051
- dark:group-[.toast]:text-muted-foreground/80
3051
+ group-[.toast]:text-neutral-600
3052
3052
  `,
3053
3053
  actionButton: `
3054
3054
  ml-auto
3055
3055
  rounded-md px-3 py-1 text-sm font-semibold
3056
- bg-primary text-primary-foreground
3057
- hover:bg-primary/80
3056
+ bg-neutral-800 text-white
3057
+ hover:bg-neutral-700
3058
3058
  transition-colors duration-200
3059
3059
  `,
3060
3060
  cancelButton: `
3061
3061
  ml-2
3062
3062
  rounded-md px-3 py-1 text-sm font-semibold
3063
- bg-muted text-muted-foreground
3064
- hover:bg-muted/80
3063
+ bg-neutral-100 text-neutral-700
3064
+ hover:bg-neutral-200
3065
3065
  transition-colors duration-200
3066
3066
  `
3067
3067
  }
@@ -3072,46 +3072,22 @@ var Toaster = ({ ...props }) => {
3072
3072
  };
3073
3073
  var toast = {
3074
3074
  success: (message) => import_sonner.toast.success(message, {
3075
- icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
3076
- import_phosphor_react15.CheckCircle,
3077
- {
3078
- className: `${iconBaseClass} text-green-600 dark:text-green-400`,
3079
- weight: "fill"
3080
- }
3081
- )
3075
+ icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.CheckCircle, { className: `${iconBaseClass} text-green-600`, weight: "fill" })
3082
3076
  }),
3083
3077
  error: (message) => import_sonner.toast.error(message, {
3084
- icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
3085
- import_phosphor_react15.XCircle,
3086
- {
3087
- className: `${iconBaseClass} text-red-600 dark:text-red-400`,
3088
- weight: "fill"
3089
- }
3090
- )
3078
+ icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.XCircle, { className: `${iconBaseClass} text-red-600`, weight: "fill" })
3091
3079
  }),
3092
3080
  warning: (message) => import_sonner.toast.warning(message, {
3093
- icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
3094
- import_phosphor_react15.Warning,
3095
- {
3096
- className: `${iconBaseClass} text-yellow-600 dark:text-yellow-400`,
3097
- weight: "fill"
3098
- }
3099
- )
3081
+ icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.Warning, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" })
3100
3082
  }),
3101
3083
  info: (message) => import_sonner.toast.info(message, {
3102
- icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
3103
- import_phosphor_react15.Info,
3104
- {
3105
- className: `${iconBaseClass} text-blue-600 dark:text-blue-400`,
3106
- weight: "fill"
3107
- }
3108
- )
3084
+ icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react15.Info, { className: `${iconBaseClass} text-blue-600`, weight: "fill" })
3109
3085
  }),
3110
3086
  loading: (message) => (0, import_sonner.toast)(message, {
3111
3087
  icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
3112
3088
  import_phosphor_react15.Spinner,
3113
3089
  {
3114
- className: `${iconBaseClass} animate-spin text-zinc-500 dark:text-zinc-400`,
3090
+ className: `${iconBaseClass} animate-spin text-neutral-500`,
3115
3091
  weight: "fill"
3116
3092
  }
3117
3093
  )
package/dist/index.mjs CHANGED
@@ -2831,7 +2831,13 @@ var SlideBase = React23.forwardRef(
2831
2831
  SlideBase.displayName = "SlideBase";
2832
2832
 
2833
2833
  // src/components/ui/SonnerBase.tsx
2834
- import { CheckCircle, XCircle, Info, Warning, Spinner } from "phosphor-react";
2834
+ import {
2835
+ CheckCircle,
2836
+ XCircle,
2837
+ Info,
2838
+ Warning,
2839
+ Spinner
2840
+ } from "phosphor-react";
2835
2841
  import { Toaster as Sonner, toast as sonnertoast } from "sonner";
2836
2842
  import { jsx as jsx33 } from "react/jsx-runtime";
2837
2843
  var iconBaseClass = "w-5 h-auto";
@@ -2845,34 +2851,34 @@ var Toaster = ({ ...props }) => {
2845
2851
  classNames: {
2846
2852
  toast: `
2847
2853
  group toast
2848
- bg-white dark:bg-gray-900
2849
- text-gray-900 dark:text-gray-100
2854
+ bg-white
2855
+ text-neutral-800
2850
2856
  shadow-lg rounded-md
2851
2857
  border-l-8
2852
- border-border
2858
+ border-neutral-200
2853
2859
  flex items-center gap-3
2854
- data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 dark:data-[type=success]:bg-green-900/30 dark:data-[type=success]:text-green-400
2855
- data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 dark:data-[type=error]:bg-red-900/30 dark:data-[type=error]:text-red-400
2856
- data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 dark:data-[type=warning]:bg-yellow-900/30 dark:data-[type=warning]:text-yellow-400
2857
- data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 dark:data-[type=info]:bg-blue-900/30 dark:data-[type=info]:text-blue-400
2860
+
2861
+ data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800
2862
+ data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800
2863
+ data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50 data-[type=warning]:text-yellow-800
2864
+ data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50 data-[type=info]:text-blue-800
2858
2865
  `,
2859
2866
  description: `
2860
2867
  text-sm
2861
- group-[.toast]:text-muted-foreground
2862
- dark:group-[.toast]:text-muted-foreground/80
2868
+ group-[.toast]:text-neutral-600
2863
2869
  `,
2864
2870
  actionButton: `
2865
2871
  ml-auto
2866
2872
  rounded-md px-3 py-1 text-sm font-semibold
2867
- bg-primary text-primary-foreground
2868
- hover:bg-primary/80
2873
+ bg-neutral-800 text-white
2874
+ hover:bg-neutral-700
2869
2875
  transition-colors duration-200
2870
2876
  `,
2871
2877
  cancelButton: `
2872
2878
  ml-2
2873
2879
  rounded-md px-3 py-1 text-sm font-semibold
2874
- bg-muted text-muted-foreground
2875
- hover:bg-muted/80
2880
+ bg-neutral-100 text-neutral-700
2881
+ hover:bg-neutral-200
2876
2882
  transition-colors duration-200
2877
2883
  `
2878
2884
  }
@@ -2883,46 +2889,22 @@ var Toaster = ({ ...props }) => {
2883
2889
  };
2884
2890
  var toast = {
2885
2891
  success: (message) => sonnertoast.success(message, {
2886
- icon: /* @__PURE__ */ jsx33(
2887
- CheckCircle,
2888
- {
2889
- className: `${iconBaseClass} text-green-600 dark:text-green-400`,
2890
- weight: "fill"
2891
- }
2892
- )
2892
+ icon: /* @__PURE__ */ jsx33(CheckCircle, { className: `${iconBaseClass} text-green-600`, weight: "fill" })
2893
2893
  }),
2894
2894
  error: (message) => sonnertoast.error(message, {
2895
- icon: /* @__PURE__ */ jsx33(
2896
- XCircle,
2897
- {
2898
- className: `${iconBaseClass} text-red-600 dark:text-red-400`,
2899
- weight: "fill"
2900
- }
2901
- )
2895
+ icon: /* @__PURE__ */ jsx33(XCircle, { className: `${iconBaseClass} text-red-600`, weight: "fill" })
2902
2896
  }),
2903
2897
  warning: (message) => sonnertoast.warning(message, {
2904
- icon: /* @__PURE__ */ jsx33(
2905
- Warning,
2906
- {
2907
- className: `${iconBaseClass} text-yellow-600 dark:text-yellow-400`,
2908
- weight: "fill"
2909
- }
2910
- )
2898
+ icon: /* @__PURE__ */ jsx33(Warning, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" })
2911
2899
  }),
2912
2900
  info: (message) => sonnertoast.info(message, {
2913
- icon: /* @__PURE__ */ jsx33(
2914
- Info,
2915
- {
2916
- className: `${iconBaseClass} text-blue-600 dark:text-blue-400`,
2917
- weight: "fill"
2918
- }
2919
- )
2901
+ icon: /* @__PURE__ */ jsx33(Info, { className: `${iconBaseClass} text-blue-600`, weight: "fill" })
2920
2902
  }),
2921
2903
  loading: (message) => sonnertoast(message, {
2922
2904
  icon: /* @__PURE__ */ jsx33(
2923
2905
  Spinner,
2924
2906
  {
2925
- className: `${iconBaseClass} animate-spin text-zinc-500 dark:text-zinc-400`,
2907
+ className: `${iconBaseClass} animate-spin text-neutral-500`,
2926
2908
  weight: "fill"
2927
2909
  }
2928
2910
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mlw-packages/react-components",
3
- "version": "1.3.13",
3
+ "version": "1.3.14",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",