katalyst-riya-test 0.0.66 → 0.0.77

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 (4) hide show
  1. package/dist/index.cjs +26 -8
  2. package/dist/index.css +127 -199
  3. package/dist/index.js +26 -8
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -402,8 +402,8 @@ var import_class_variance_authority5 = require("class-variance-authority");
402
402
  var chipVariants = (0, import_class_variance_authority5.cva)("", {
403
403
  variants: {
404
404
  variant: {
405
- primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-[#264D8E]",
406
- secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-[#285092]",
405
+ primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-700",
406
+ secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-700",
407
407
  glass: "text-primary-500"
408
408
  },
409
409
  size: {
@@ -623,7 +623,7 @@ var ImageCard = ({
623
623
  "div",
624
624
  {
625
625
  className: cn(
626
- "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-brand-500 relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
626
+ "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-[#4285F4] relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
627
627
  className
628
628
  ),
629
629
  style: {
@@ -724,11 +724,22 @@ var ListItem = import_react14.default.forwardRef(
724
724
  return /* @__PURE__ */ import_react14.default.createElement(
725
725
  "button",
726
726
  {
727
- className: cn("px-4 py-[8px] group font-karla w-full text-left flex items-center gap-2", variantClasses, className),
727
+ className: cn(
728
+ "px-4 py-[8px] group font-karla w-full text-left flex items-center gap-2",
729
+ variantClasses,
730
+ className
731
+ ),
728
732
  onClick,
729
733
  ref
730
734
  },
731
- /* @__PURE__ */ import_react14.default.createElement(Typography_default, { variant: "h6", className: cn("font-karla group-hover:dark:text-dark", className) }, title),
735
+ /* @__PURE__ */ import_react14.default.createElement(
736
+ Typography_default,
737
+ {
738
+ variant: "h6",
739
+ className: cn("font-karla group-hover:dark:text-dark", className)
740
+ },
741
+ title
742
+ ),
732
743
  icon && /* @__PURE__ */ import_react14.default.createElement("span", { className: "text-dark dark:text-white" }, icon)
733
744
  );
734
745
  }
@@ -752,7 +763,14 @@ var ListItem = import_react14.default.forwardRef(
752
763
  },
753
764
  title
754
765
  ),
755
- icon && /* @__PURE__ */ import_react14.default.createElement(Caption_default, { variant: "md", className: "text-dark dark:text-white group-hover:dark:text-dark" }, icon)
766
+ icon && /* @__PURE__ */ import_react14.default.createElement(
767
+ Caption_default,
768
+ {
769
+ variant: "md",
770
+ className: "text-dark dark:text-white group-hover:dark:text-dark"
771
+ },
772
+ icon
773
+ )
756
774
  );
757
775
  }
758
776
  );
@@ -778,7 +796,7 @@ var Slider = (0, import_react15.forwardRef)(
778
796
  size === "sm" ? "h-1.5" : "h-4"
779
797
  ),
780
798
  style: {
781
- background: `linear-gradient(to right, var(--primary-500) ${progress}%, #d1d5db ${progress}%)`
799
+ background: `linear-gradient(to right, var(--primary-300) ${progress}%, var(--gray-200) ${progress}%)`
782
800
  }
783
801
  }
784
802
  ));
@@ -799,7 +817,7 @@ var StatsCard = ({
799
817
  Card,
800
818
  {
801
819
  className: cn(
802
- "border border-[#eee] hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
820
+ "border border-gray-200 hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-primary-300 hover:to-primary-600 dark:from-primary-800 dark:to-primary-700 dark:hover:from-primary-800 dark:hover:to-primary-900 backdrop-blur-sm px-[32px] py-[64px] group",
803
821
  className
804
822
  )
805
823
  },
package/dist/index.css CHANGED
@@ -113,7 +113,7 @@
113
113
  box-sizing: border-box;
114
114
  border-width: 0;
115
115
  border-style: solid;
116
- border-color: #F2F2F2;
116
+ border-color: var(--gray-200);
117
117
  }
118
118
  ::before,
119
119
  ::after {
@@ -297,7 +297,7 @@ textarea {
297
297
  input::placeholder,
298
298
  textarea::placeholder {
299
299
  opacity: 1;
300
- color: #C0C0C0;
300
+ color: var(--gray-400);
301
301
  }
302
302
  button,
303
303
  [role=button] {
@@ -326,23 +326,33 @@ video {
326
326
  display: none;
327
327
  }
328
328
  :root {
329
- .theme-brand {
330
- --primary-25: #f5faff;
331
- --primary-50: #ECF3FE;
332
- --primary-100: #D9E7FD;
333
- --primary-200: #B3CEFB;
334
- --primary-300: #8EB6F8;
335
- --primary-400: #689DF6;
336
- --primary-500: #4285F4;
337
- --primary-600: #356AC3;
338
- --primary-700: #285092;
339
- --primary-800: #1A3562;
340
- --primary-900: #0D1B31;
341
- }
342
- .rdp {
343
- --rdp-cell-size: 28px;
344
- --rdp-caption-font-size: 15px;
345
- }
329
+ --primary-25: #f5faff;
330
+ --primary-50: #ecf3fe;
331
+ --primary-100: #d9e7fd;
332
+ --primary-200: #b3cefb;
333
+ --primary-300: #8eb6f8;
334
+ --primary-400: #689df6;
335
+ --primary-500: #4285f4;
336
+ --primary-600: #356ac3;
337
+ --primary-700: #285092;
338
+ --primary-800: #1a3562;
339
+ --primary-900: #0d1b31;
340
+ --gray-25: #ffffff;
341
+ --gray-50: #fefefe;
342
+ --gray-100: #f8f8f8;
343
+ --gray-200: #f2f2f2;
344
+ --gray-300: #e4e4e4;
345
+ --gray-400: #c0c0c0;
346
+ --gray-500: #a2a2a2;
347
+ --gray-600: #797979;
348
+ --gray-700: #656565;
349
+ --gray-800: #464646;
350
+ --gray-900: #252525;
351
+ --light: #ffffff;
352
+ --dark: #070707;
353
+ --error: #ea4335;
354
+ --success: #34a853;
355
+ --warning: #fbbc05;
346
356
  }
347
357
  .sr-only {
348
358
  position: absolute;
@@ -793,23 +803,11 @@ video {
793
803
  .border-\[\#FFFFFF29\] {
794
804
  border-color: #FFFFFF29;
795
805
  }
796
- .border-\[\#eee\] {
797
- --tw-border-opacity: 1;
798
- border-color: rgb(238 238 238 / var(--tw-border-opacity));
799
- }
800
806
  .border-gray-200 {
801
- --tw-border-opacity: 1;
802
- border-color: rgb(242 242 242 / var(--tw-border-opacity));
803
- }
804
- .border-gray-200\/50 {
805
- border-color: rgb(242 242 242 / 0.5);
806
- }
807
- .border-gray-25\/15 {
808
- border-color: rgb(255 255 255 / 0.15);
807
+ border-color: var(--gray-200);
809
808
  }
810
809
  .border-gray-300 {
811
- --tw-border-opacity: 1;
812
- border-color: rgb(228 228 228 / var(--tw-border-opacity));
810
+ border-color: var(--gray-300);
813
811
  }
814
812
  .border-primary-200 {
815
813
  border-color: var(--primary-200);
@@ -839,26 +837,16 @@ video {
839
837
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
840
838
  }
841
839
  .bg-gray-100 {
842
- --tw-bg-opacity: 1;
843
- background-color: rgb(248 248 248 / var(--tw-bg-opacity));
840
+ background-color: var(--gray-100);
844
841
  }
845
842
  .bg-gray-300 {
846
- --tw-bg-opacity: 1;
847
- background-color: rgb(228 228 228 / var(--tw-bg-opacity));
848
- }
849
- .bg-gray-50\/\[0\.02\] {
850
- background-color: rgb(254 254 254 / 0.02);
843
+ background-color: var(--gray-300);
851
844
  }
852
845
  .bg-gray-700 {
853
- --tw-bg-opacity: 1;
854
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
846
+ background-color: var(--gray-700);
855
847
  }
856
848
  .bg-light {
857
- --tw-bg-opacity: 1;
858
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
859
- }
860
- .bg-light\/10 {
861
- background-color: rgb(255 255 255 / 0.1);
849
+ background-color: var(--light);
862
850
  }
863
851
  .bg-primary-100 {
864
852
  background-color: var(--primary-100);
@@ -896,7 +884,7 @@ video {
896
884
  background-image: none;
897
885
  }
898
886
  .from-gray-25 {
899
- --tw-gradient-from: #fff var(--tw-gradient-from-position);
887
+ --tw-gradient-from: var(--gray-25) var(--tw-gradient-from-position);
900
888
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
901
889
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
902
890
  }
@@ -1179,36 +1167,28 @@ video {
1179
1167
  color: rgb(0 0 0 / var(--tw-text-opacity));
1180
1168
  }
1181
1169
  .text-dark {
1182
- --tw-text-opacity: 1;
1183
- color: rgb(7 7 7 / var(--tw-text-opacity));
1170
+ color: var(--dark);
1184
1171
  }
1185
1172
  .text-error {
1186
- --tw-text-opacity: 1;
1187
- color: rgb(234 67 53 / var(--tw-text-opacity));
1173
+ color: var(--error);
1188
1174
  }
1189
1175
  .text-gray-300 {
1190
- --tw-text-opacity: 1;
1191
- color: rgb(228 228 228 / var(--tw-text-opacity));
1176
+ color: var(--gray-300);
1192
1177
  }
1193
1178
  .text-gray-400 {
1194
- --tw-text-opacity: 1;
1195
- color: rgb(192 192 192 / var(--tw-text-opacity));
1179
+ color: var(--gray-400);
1196
1180
  }
1197
1181
  .text-gray-600 {
1198
- --tw-text-opacity: 1;
1199
- color: rgb(121 121 121 / var(--tw-text-opacity));
1182
+ color: var(--gray-600);
1200
1183
  }
1201
1184
  .text-gray-800 {
1202
- --tw-text-opacity: 1;
1203
- color: rgb(70 70 70 / var(--tw-text-opacity));
1185
+ color: var(--gray-800);
1204
1186
  }
1205
1187
  .text-gray-900 {
1206
- --tw-text-opacity: 1;
1207
- color: rgb(37 37 37 / var(--tw-text-opacity));
1188
+ color: var(--gray-900);
1208
1189
  }
1209
1190
  .text-light {
1210
- --tw-text-opacity: 1;
1211
- color: rgb(255 255 255 / var(--tw-text-opacity));
1191
+ color: var(--light);
1212
1192
  }
1213
1193
  .text-primary-400 {
1214
1194
  color: var(--primary-400);
@@ -1339,29 +1319,32 @@ video {
1339
1319
  .ease-in-out {
1340
1320
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1341
1321
  }
1322
+ .test {
1323
+ border: 1px solid red;
1324
+ }
1342
1325
  .gradientOne {
1343
1326
  background:
1344
1327
  linear-gradient(
1345
1328
  242deg,
1346
1329
  #070707 5.78%,
1347
- #4285f4 138.66%,
1348
- #8eb6f8 271.69%);
1330
+ var(--primary-500) 138.66%,
1331
+ var(--primary-300) 271.69%);
1349
1332
  }
1350
1333
  .gradientOne:hover {
1351
1334
  background:
1352
1335
  linear-gradient(
1353
1336
  242deg,
1354
- #0d1b31 5.78%,
1337
+ var(--primary-900) 5.78%,
1355
1338
  #070707 49.65%,
1356
- #4285f4 271.69%);
1339
+ var(--primary-500) 271.69%);
1357
1340
  }
1358
1341
  .div-glass {
1359
1342
  background:
1360
1343
  linear-gradient(
1361
1344
  242deg,
1362
- #0d1b31 5.78%,
1345
+ var(--primary-900) 5.78%,
1363
1346
  #070707 49.65%,
1364
- #4285f4 271.69%);
1347
+ var(--primary-500) 271.69%);
1365
1348
  height: 400px;
1366
1349
  background-position: center;
1367
1350
  background-repeat: no-repeat;
@@ -1371,9 +1354,9 @@ video {
1371
1354
  background:
1372
1355
  linear-gradient(
1373
1356
  242deg,
1374
- #0d1b31 5.78%,
1357
+ var(--primary-900) 5.78%,
1375
1358
  #070707 49.65%,
1376
- #4285f4 271.69%);
1359
+ var(--primary-500) 271.69%);
1377
1360
  height: 100px;
1378
1361
  background-position: center;
1379
1362
  background-repeat: no-repeat;
@@ -1396,7 +1379,7 @@ video {
1396
1379
  background-color: var(--primary-700);
1397
1380
  }
1398
1381
  .slider::-webkit-slider-thumb:active {
1399
- background-color: var(--primary-500);
1382
+ background-color: var(--primary-600);
1400
1383
  outline: 3px solid var(--primary-200);
1401
1384
  box-shadow: 0px 4px 4.7px 0px #0000002e;
1402
1385
  }
@@ -1415,27 +1398,22 @@ video {
1415
1398
  border-color: var(--primary-500);
1416
1399
  }
1417
1400
  .focus-within\:border-gray-400:focus-within {
1418
- --tw-border-opacity: 1;
1419
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1401
+ border-color: var(--gray-400);
1420
1402
  }
1421
1403
  .focus-within\:bg-gray-50:focus-within {
1422
- --tw-bg-opacity: 1;
1423
- background-color: rgb(254 254 254 / var(--tw-bg-opacity));
1404
+ background-color: var(--gray-50);
1424
1405
  }
1425
1406
  .focus-within\:text-dark:focus-within {
1426
- --tw-text-opacity: 1;
1427
- color: rgb(7 7 7 / var(--tw-text-opacity));
1407
+ color: var(--dark);
1428
1408
  }
1429
1409
  .hover\:border-2:hover {
1430
1410
  border-width: 2px;
1431
1411
  }
1432
1412
  .hover\:border-gray-300:hover {
1433
- --tw-border-opacity: 1;
1434
- border-color: rgb(228 228 228 / var(--tw-border-opacity));
1413
+ border-color: var(--gray-300);
1435
1414
  }
1436
1415
  .hover\:border-gray-500:hover {
1437
- --tw-border-opacity: 1;
1438
- border-color: rgb(162 162 162 / var(--tw-border-opacity));
1416
+ border-color: var(--gray-500);
1439
1417
  }
1440
1418
  .hover\:border-primary-200:hover {
1441
1419
  border-color: var(--primary-200);
@@ -1455,23 +1433,16 @@ video {
1455
1433
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
1456
1434
  }
1457
1435
  .hover\:bg-gray-100:hover {
1458
- --tw-bg-opacity: 1;
1459
- background-color: rgb(248 248 248 / var(--tw-bg-opacity));
1436
+ background-color: var(--gray-100);
1460
1437
  }
1461
1438
  .hover\:bg-gray-200:hover {
1462
- --tw-bg-opacity: 1;
1463
- background-color: rgb(242 242 242 / var(--tw-bg-opacity));
1464
- }
1465
- .hover\:bg-gray-200\/10:hover {
1466
- background-color: rgb(242 242 242 / 0.1);
1439
+ background-color: var(--gray-200);
1467
1440
  }
1468
1441
  .hover\:bg-gray-300:hover {
1469
- --tw-bg-opacity: 1;
1470
- background-color: rgb(228 228 228 / var(--tw-bg-opacity));
1442
+ background-color: var(--gray-300);
1471
1443
  }
1472
1444
  .hover\:bg-gray-800:hover {
1473
- --tw-bg-opacity: 1;
1474
- background-color: rgb(70 70 70 / var(--tw-bg-opacity));
1445
+ background-color: var(--gray-800);
1475
1446
  }
1476
1447
  .hover\:bg-primary-100:hover {
1477
1448
  background-color: var(--primary-100);
@@ -1491,16 +1462,16 @@ video {
1491
1462
  .hover\:bg-gradient-to-r:hover {
1492
1463
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
1493
1464
  }
1494
- .hover\:from-\[\#8EB6F8D9\]:hover {
1495
- --tw-gradient-from: #8EB6F8D9 var(--tw-gradient-from-position);
1496
- --tw-gradient-to: rgb(142 182 248 / 0) var(--tw-gradient-to-position);
1497
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1498
- }
1499
1465
  .hover\:from-black\/60:hover {
1500
1466
  --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
1501
1467
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
1502
1468
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1503
1469
  }
1470
+ .hover\:from-primary-300:hover {
1471
+ --tw-gradient-from: var(--primary-300) var(--tw-gradient-from-position);
1472
+ --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1473
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1474
+ }
1504
1475
  .hover\:from-primary-500:hover {
1505
1476
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
1506
1477
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
@@ -1516,18 +1487,14 @@ video {
1516
1487
  .hover\:to-\[\#070707\]:hover {
1517
1488
  --tw-gradient-to: #070707 var(--tw-gradient-to-position);
1518
1489
  }
1519
- .hover\:to-\[\#264D8E\]:hover {
1520
- --tw-gradient-to: #264D8E var(--tw-gradient-to-position);
1521
- }
1522
- .hover\:to-\[\#285092\]:hover {
1523
- --tw-gradient-to: #285092 var(--tw-gradient-to-position);
1490
+ .hover\:to-primary-600:hover {
1491
+ --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
1524
1492
  }
1525
- .hover\:to-\[\#356AC3D9\]:hover {
1526
- --tw-gradient-to: #356AC3D9 var(--tw-gradient-to-position);
1493
+ .hover\:to-primary-700:hover {
1494
+ --tw-gradient-to: var(--primary-700) var(--tw-gradient-to-position);
1527
1495
  }
1528
1496
  .hover\:text-gray-500:hover {
1529
- --tw-text-opacity: 1;
1530
- color: rgb(162 162 162 / var(--tw-text-opacity));
1497
+ color: var(--gray-500);
1531
1498
  }
1532
1499
  .hover\:text-primary-400:hover {
1533
1500
  color: var(--primary-400);
@@ -1584,7 +1551,7 @@ video {
1584
1551
  var(--tw-ring-shadow),
1585
1552
  var(--tw-shadow, 0 0 #0000);
1586
1553
  }
1587
- .hover\:ring-brand-500:hover {
1554
+ .hover\:ring-\[\#4285F4\]:hover {
1588
1555
  --tw-ring-opacity: 1;
1589
1556
  --tw-ring-color: rgb(66 133 244 / var(--tw-ring-opacity));
1590
1557
  }
@@ -1600,8 +1567,7 @@ video {
1600
1567
  background-color: var(--primary-50);
1601
1568
  }
1602
1569
  .focus-within\:hover\:text-dark:hover:focus-within {
1603
- --tw-text-opacity: 1;
1604
- color: rgb(7 7 7 / var(--tw-text-opacity));
1570
+ color: var(--dark);
1605
1571
  }
1606
1572
  .focus\:text-white:focus {
1607
1573
  --tw-text-opacity: 1;
@@ -1623,8 +1589,7 @@ video {
1623
1589
  --tw-ring-color: var(--primary-500);
1624
1590
  }
1625
1591
  .active\:bg-gray-25:active {
1626
- --tw-bg-opacity: 1;
1627
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1592
+ background-color: var(--gray-25);
1628
1593
  }
1629
1594
  .active\:bg-primary-400:active {
1630
1595
  background-color: var(--primary-400);
@@ -1633,8 +1598,7 @@ video {
1633
1598
  background-color: var(--primary-50);
1634
1599
  }
1635
1600
  .active\:text-gray-900:active {
1636
- --tw-text-opacity: 1;
1637
- color: rgb(37 37 37 / var(--tw-text-opacity));
1601
+ color: var(--gray-900);
1638
1602
  }
1639
1603
  .active\:shadow-\[0px_0px_0px_3px\]:active {
1640
1604
  --tw-shadow: 0px 0px 0px 3px;
@@ -1649,7 +1613,7 @@ video {
1649
1613
  --tw-shadow: var(--tw-shadow-colored);
1650
1614
  }
1651
1615
  .active\:shadow-gray-700:active {
1652
- --tw-shadow-color: #656565;
1616
+ --tw-shadow-color: var(--gray-700);
1653
1617
  --tw-shadow: var(--tw-shadow-colored);
1654
1618
  }
1655
1619
  .active\:shadow-primary-300:active {
@@ -1667,20 +1631,16 @@ video {
1667
1631
  user-select: none;
1668
1632
  }
1669
1633
  .disabled\:border-gray-400:disabled {
1670
- --tw-border-opacity: 1;
1671
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1634
+ border-color: var(--gray-400);
1672
1635
  }
1673
1636
  .disabled\:bg-gray-25:disabled {
1674
- --tw-bg-opacity: 1;
1675
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1637
+ background-color: var(--gray-25);
1676
1638
  }
1677
1639
  .disabled\:bg-gray-400:disabled {
1678
- --tw-bg-opacity: 1;
1679
- background-color: rgb(192 192 192 / var(--tw-bg-opacity));
1640
+ background-color: var(--gray-400);
1680
1641
  }
1681
1642
  .disabled\:text-light:disabled {
1682
- --tw-text-opacity: 1;
1683
- color: rgb(255 255 255 / var(--tw-text-opacity));
1643
+ color: var(--light);
1684
1644
  }
1685
1645
  .disabled\:opacity-30:disabled {
1686
1646
  opacity: 0.3;
@@ -1724,27 +1684,22 @@ video {
1724
1684
  user-select: none;
1725
1685
  }
1726
1686
  .has-\[\:disabled\]\:border-gray-400:has(:disabled) {
1727
- --tw-border-opacity: 1;
1728
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1687
+ border-color: var(--gray-400);
1729
1688
  }
1730
1689
  .has-\[\:disabled\]\:bg-gray-25:has(:disabled) {
1731
- --tw-bg-opacity: 1;
1732
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1690
+ background-color: var(--gray-25);
1733
1691
  }
1734
1692
  .has-\[\:disabled\]\:opacity-30:has(:disabled) {
1735
1693
  opacity: 0.3;
1736
1694
  }
1737
1695
  .dark\:border-gray-600:is(.dark *) {
1738
- --tw-border-opacity: 1;
1739
- border-color: rgb(121 121 121 / var(--tw-border-opacity));
1696
+ border-color: var(--gray-600);
1740
1697
  }
1741
1698
  .dark\:border-gray-800:is(.dark *) {
1742
- --tw-border-opacity: 1;
1743
- border-color: rgb(70 70 70 / var(--tw-border-opacity));
1699
+ border-color: var(--gray-800);
1744
1700
  }
1745
1701
  .dark\:border-gray-900:is(.dark *) {
1746
- --tw-border-opacity: 1;
1747
- border-color: rgb(37 37 37 / var(--tw-border-opacity));
1702
+ border-color: var(--gray-900);
1748
1703
  }
1749
1704
  .dark\:border-primary-100:is(.dark *) {
1750
1705
  border-color: var(--primary-100);
@@ -1753,75 +1708,61 @@ video {
1753
1708
  border-color: var(--primary-800);
1754
1709
  }
1755
1710
  .dark\:bg-dark:is(.dark *) {
1756
- --tw-bg-opacity: 1;
1757
- background-color: rgb(7 7 7 / var(--tw-bg-opacity));
1758
- }
1759
- .dark\:bg-dark\/20:is(.dark *) {
1760
- background-color: rgb(7 7 7 / 0.2);
1711
+ background-color: var(--dark);
1761
1712
  }
1762
1713
  .dark\:bg-gray-700:is(.dark *) {
1763
- --tw-bg-opacity: 1;
1764
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1714
+ background-color: var(--gray-700);
1765
1715
  }
1766
1716
  .dark\:bg-gray-800:is(.dark *) {
1767
- --tw-bg-opacity: 1;
1768
- background-color: rgb(70 70 70 / var(--tw-bg-opacity));
1717
+ background-color: var(--gray-800);
1769
1718
  }
1770
1719
  .dark\:bg-gray-900:is(.dark *) {
1771
- --tw-bg-opacity: 1;
1772
- background-color: rgb(37 37 37 / var(--tw-bg-opacity));
1773
- }
1774
- .dark\:from-\[\#252525D9\]:is(.dark *) {
1775
- --tw-gradient-from: #252525D9 var(--tw-gradient-from-position);
1776
- --tw-gradient-to: rgb(37 37 37 / 0) var(--tw-gradient-to-position);
1777
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1720
+ background-color: var(--gray-900);
1778
1721
  }
1779
1722
  .dark\:from-cyan-500:is(.dark *) {
1780
1723
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
1781
1724
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
1782
1725
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1783
1726
  }
1727
+ .dark\:from-primary-800:is(.dark *) {
1728
+ --tw-gradient-from: var(--primary-800) var(--tw-gradient-from-position);
1729
+ --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1730
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1731
+ }
1784
1732
  .dark\:from-primary-900:is(.dark *) {
1785
1733
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
1786
1734
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1787
1735
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1788
1736
  }
1789
- .dark\:to-\[\#070707D9\]:is(.dark *) {
1790
- --tw-gradient-to: #070707D9 var(--tw-gradient-to-position);
1791
- }
1792
1737
  .dark\:to-blue-500:is(.dark *) {
1793
1738
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
1794
1739
  }
1795
1740
  .dark\:to-dark:is(.dark *) {
1796
- --tw-gradient-to: #070707 var(--tw-gradient-to-position);
1741
+ --tw-gradient-to: var(--dark) var(--tw-gradient-to-position);
1742
+ }
1743
+ .dark\:to-primary-700:is(.dark *) {
1744
+ --tw-gradient-to: var(--primary-700) var(--tw-gradient-to-position);
1797
1745
  }
1798
1746
  .dark\:text-dark:is(.dark *) {
1799
- --tw-text-opacity: 1;
1800
- color: rgb(7 7 7 / var(--tw-text-opacity));
1747
+ color: var(--dark);
1801
1748
  }
1802
1749
  .dark\:text-gray-25:is(.dark *) {
1803
- --tw-text-opacity: 1;
1804
- color: rgb(255 255 255 / var(--tw-text-opacity));
1750
+ color: var(--gray-25);
1805
1751
  }
1806
1752
  .dark\:text-gray-300:is(.dark *) {
1807
- --tw-text-opacity: 1;
1808
- color: rgb(228 228 228 / var(--tw-text-opacity));
1753
+ color: var(--gray-300);
1809
1754
  }
1810
1755
  .dark\:text-gray-500:is(.dark *) {
1811
- --tw-text-opacity: 1;
1812
- color: rgb(162 162 162 / var(--tw-text-opacity));
1756
+ color: var(--gray-500);
1813
1757
  }
1814
1758
  .dark\:text-gray-600:is(.dark *) {
1815
- --tw-text-opacity: 1;
1816
- color: rgb(121 121 121 / var(--tw-text-opacity));
1759
+ color: var(--gray-600);
1817
1760
  }
1818
1761
  .dark\:text-gray-800:is(.dark *) {
1819
- --tw-text-opacity: 1;
1820
- color: rgb(70 70 70 / var(--tw-text-opacity));
1762
+ color: var(--gray-800);
1821
1763
  }
1822
1764
  .dark\:text-light:is(.dark *) {
1823
- --tw-text-opacity: 1;
1824
- color: rgb(255 255 255 / var(--tw-text-opacity));
1765
+ color: var(--light);
1825
1766
  }
1826
1767
  .dark\:text-primary-200:is(.dark *) {
1827
1768
  color: var(--primary-200);
@@ -1839,32 +1780,25 @@ video {
1839
1780
  var(--tw-shadow);
1840
1781
  }
1841
1782
  .dark\:focus-within\:border-gray-800:focus-within:is(.dark *) {
1842
- --tw-border-opacity: 1;
1843
- border-color: rgb(70 70 70 / var(--tw-border-opacity));
1783
+ border-color: var(--gray-800);
1844
1784
  }
1845
1785
  .dark\:focus-within\:bg-gray-100:focus-within:is(.dark *) {
1846
- --tw-bg-opacity: 1;
1847
- background-color: rgb(248 248 248 / var(--tw-bg-opacity));
1786
+ background-color: var(--gray-100);
1848
1787
  }
1849
1788
  .dark\:focus-within\:text-dark:focus-within:is(.dark *) {
1850
- --tw-text-opacity: 1;
1851
- color: rgb(7 7 7 / var(--tw-text-opacity));
1789
+ color: var(--dark);
1852
1790
  }
1853
1791
  .dark\:hover\:border-gray-700:hover:is(.dark *) {
1854
- --tw-border-opacity: 1;
1855
- border-color: rgb(101 101 101 / var(--tw-border-opacity));
1792
+ border-color: var(--gray-700);
1856
1793
  }
1857
1794
  .hover\:dark\:border-gray-600:is(.dark *):hover {
1858
- --tw-border-opacity: 1;
1859
- border-color: rgb(121 121 121 / var(--tw-border-opacity));
1795
+ border-color: var(--gray-600);
1860
1796
  }
1861
1797
  .dark\:hover\:bg-gray-600:hover:is(.dark *) {
1862
- --tw-bg-opacity: 1;
1863
- background-color: rgb(121 121 121 / var(--tw-bg-opacity));
1798
+ background-color: var(--gray-600);
1864
1799
  }
1865
1800
  .dark\:hover\:bg-gray-800:hover:is(.dark *) {
1866
- --tw-bg-opacity: 1;
1867
- background-color: rgb(70 70 70 / var(--tw-bg-opacity));
1801
+ background-color: var(--gray-800);
1868
1802
  }
1869
1803
  .dark\:hover\:bg-primary-800:hover:is(.dark *) {
1870
1804
  background-color: var(--primary-800);
@@ -1872,36 +1806,31 @@ video {
1872
1806
  .hover\:dark\:bg-transparent:is(.dark *):hover {
1873
1807
  background-color: transparent;
1874
1808
  }
1875
- .dark\:hover\:from-\[\#1A3562D9\]:hover:is(.dark *) {
1876
- --tw-gradient-from: #1A3562D9 var(--tw-gradient-from-position);
1877
- --tw-gradient-to: rgb(26 53 98 / 0) var(--tw-gradient-to-position);
1809
+ .dark\:hover\:from-primary-800:hover:is(.dark *) {
1810
+ --tw-gradient-from: var(--primary-800) var(--tw-gradient-from-position);
1811
+ --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1878
1812
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1879
1813
  }
1880
- .dark\:hover\:to-\[\#070707D9\]:hover:is(.dark *) {
1881
- --tw-gradient-to: #070707D9 var(--tw-gradient-to-position);
1814
+ .dark\:hover\:to-primary-900:hover:is(.dark *) {
1815
+ --tw-gradient-to: var(--primary-900) var(--tw-gradient-to-position);
1882
1816
  }
1883
1817
  .dark\:hover\:text-light:hover:is(.dark *) {
1884
- --tw-text-opacity: 1;
1885
- color: rgb(255 255 255 / var(--tw-text-opacity));
1818
+ color: var(--light);
1886
1819
  }
1887
1820
  .dark\:hover\:text-primary-600:hover:is(.dark *) {
1888
1821
  color: var(--primary-600);
1889
1822
  }
1890
1823
  .dark\:focus-within\:hover\:bg-gray-700:hover:focus-within:is(.dark *) {
1891
- --tw-bg-opacity: 1;
1892
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1824
+ background-color: var(--gray-700);
1893
1825
  }
1894
1826
  .dark\:disabled\:bg-gray-700:disabled:is(.dark *) {
1895
- --tw-bg-opacity: 1;
1896
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1827
+ background-color: var(--gray-700);
1897
1828
  }
1898
1829
  .group:hover .group-hover\:dark\:text-dark:is(.dark *) {
1899
- --tw-text-opacity: 1;
1900
- color: rgb(7 7 7 / var(--tw-text-opacity));
1830
+ color: var(--dark);
1901
1831
  }
1902
1832
  .dark\:has-\[\:disabled\]\:bg-gray-700:has(:disabled):is(.dark *) {
1903
- --tw-bg-opacity: 1;
1904
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1833
+ background-color: var(--gray-700);
1905
1834
  }
1906
1835
  @media (min-width: 768px) {
1907
1836
  .md\:w-\[30\%\] {
@@ -1920,8 +1849,7 @@ video {
1920
1849
  border-right-width: 1px;
1921
1850
  }
1922
1851
  .md\:border-gray-400 {
1923
- --tw-border-opacity: 1;
1924
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1852
+ border-color: var(--gray-400);
1925
1853
  }
1926
1854
  .md\:p-spacing-lg {
1927
1855
  padding: 32px;
package/dist/index.js CHANGED
@@ -333,8 +333,8 @@ import { cva as cva5 } from "class-variance-authority";
333
333
  var chipVariants = cva5("", {
334
334
  variants: {
335
335
  variant: {
336
- primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-[#264D8E]",
337
- secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-[#285092]",
336
+ primary: "bg-white text-primary-500 hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-700",
337
+ secondary: "bg-primary-500 text-white hover:text-white hover:bg-gradient-to-r hover:from-primary-500 hover:to-primary-700",
338
338
  glass: "text-primary-500"
339
339
  },
340
340
  size: {
@@ -554,7 +554,7 @@ var ImageCard = ({
554
554
  "div",
555
555
  {
556
556
  className: cn(
557
- "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-brand-500 relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
557
+ "transition-all duration-300 ease-in-out hover:ring-1 hover:ring-[#4285F4] relative rounded-radius-xl overflow-hidden block z-10 bg-cover bg-no-repeat bg-center",
558
558
  className
559
559
  ),
560
560
  style: {
@@ -655,11 +655,22 @@ var ListItem = React14.forwardRef(
655
655
  return /* @__PURE__ */ React14.createElement(
656
656
  "button",
657
657
  {
658
- className: cn("px-4 py-[8px] group font-karla w-full text-left flex items-center gap-2", variantClasses, className),
658
+ className: cn(
659
+ "px-4 py-[8px] group font-karla w-full text-left flex items-center gap-2",
660
+ variantClasses,
661
+ className
662
+ ),
659
663
  onClick,
660
664
  ref
661
665
  },
662
- /* @__PURE__ */ React14.createElement(Typography_default, { variant: "h6", className: cn("font-karla group-hover:dark:text-dark", className) }, title),
666
+ /* @__PURE__ */ React14.createElement(
667
+ Typography_default,
668
+ {
669
+ variant: "h6",
670
+ className: cn("font-karla group-hover:dark:text-dark", className)
671
+ },
672
+ title
673
+ ),
663
674
  icon && /* @__PURE__ */ React14.createElement("span", { className: "text-dark dark:text-white" }, icon)
664
675
  );
665
676
  }
@@ -683,7 +694,14 @@ var ListItem = React14.forwardRef(
683
694
  },
684
695
  title
685
696
  ),
686
- icon && /* @__PURE__ */ React14.createElement(Caption_default, { variant: "md", className: "text-dark dark:text-white group-hover:dark:text-dark" }, icon)
697
+ icon && /* @__PURE__ */ React14.createElement(
698
+ Caption_default,
699
+ {
700
+ variant: "md",
701
+ className: "text-dark dark:text-white group-hover:dark:text-dark"
702
+ },
703
+ icon
704
+ )
687
705
  );
688
706
  }
689
707
  );
@@ -709,7 +727,7 @@ var Slider = forwardRef3(
709
727
  size === "sm" ? "h-1.5" : "h-4"
710
728
  ),
711
729
  style: {
712
- background: `linear-gradient(to right, var(--primary-500) ${progress}%, #d1d5db ${progress}%)`
730
+ background: `linear-gradient(to right, var(--primary-300) ${progress}%, var(--gray-200) ${progress}%)`
713
731
  }
714
732
  }
715
733
  ));
@@ -730,7 +748,7 @@ var StatsCard = ({
730
748
  Card,
731
749
  {
732
750
  className: cn(
733
- "border border-[#eee] hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-[#8EB6F8D9] hover:to-[#356AC3D9] dark:from-[#252525D9] dark:to-[#070707D9] dark:hover:from-[#1A3562D9] dark:hover:to-[#070707D9] backdrop-blur-sm px-[32px] py-[64px] group",
751
+ "border border-gray-200 hover:border-primary-500 rounded-radius-xl bg-[#FFFFFFE5] bg-gradient-to-b bg-[#fff] hover:from-primary-300 hover:to-primary-600 dark:from-primary-800 dark:to-primary-700 dark:hover:from-primary-800 dark:hover:to-primary-900 backdrop-blur-sm px-[32px] py-[64px] group",
734
752
  className
735
753
  )
736
754
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "katalyst-riya-test",
3
3
  "description": "website design system",
4
- "version": "0.0.66",
4
+ "version": "0.0.77",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.mjs",