katalyst-riya-test 0.0.69 → 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 +129 -200
  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: #fff8e4;
332
- --primary-100: #ffecba;
333
- --primary-200: #ffe08f;
334
- --primary-300: #ffd665;
335
- --primary-400: #ffcb4c;
336
- --primary-500: #ffc342;
337
- --primary-600: #ffb53d;
338
- --primary-700: #ffa33a;
339
- --primary-800: #fd9438;
340
- --primary-900: #f97835;
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,8 +1551,9 @@ video {
1584
1551
  var(--tw-ring-shadow),
1585
1552
  var(--tw-shadow, 0 0 #0000);
1586
1553
  }
1587
- .hover\:ring-brand-500:hover {
1588
- --tw-ring-color: var(--primary-500);
1554
+ .hover\:ring-\[\#4285F4\]:hover {
1555
+ --tw-ring-opacity: 1;
1556
+ --tw-ring-color: rgb(66 133 244 / var(--tw-ring-opacity));
1589
1557
  }
1590
1558
  .hover\:backdrop-blur-md:hover {
1591
1559
  --tw-backdrop-blur: blur(12px);
@@ -1599,8 +1567,7 @@ video {
1599
1567
  background-color: var(--primary-50);
1600
1568
  }
1601
1569
  .focus-within\:hover\:text-dark:hover:focus-within {
1602
- --tw-text-opacity: 1;
1603
- color: rgb(7 7 7 / var(--tw-text-opacity));
1570
+ color: var(--dark);
1604
1571
  }
1605
1572
  .focus\:text-white:focus {
1606
1573
  --tw-text-opacity: 1;
@@ -1622,8 +1589,7 @@ video {
1622
1589
  --tw-ring-color: var(--primary-500);
1623
1590
  }
1624
1591
  .active\:bg-gray-25:active {
1625
- --tw-bg-opacity: 1;
1626
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1592
+ background-color: var(--gray-25);
1627
1593
  }
1628
1594
  .active\:bg-primary-400:active {
1629
1595
  background-color: var(--primary-400);
@@ -1632,8 +1598,7 @@ video {
1632
1598
  background-color: var(--primary-50);
1633
1599
  }
1634
1600
  .active\:text-gray-900:active {
1635
- --tw-text-opacity: 1;
1636
- color: rgb(37 37 37 / var(--tw-text-opacity));
1601
+ color: var(--gray-900);
1637
1602
  }
1638
1603
  .active\:shadow-\[0px_0px_0px_3px\]:active {
1639
1604
  --tw-shadow: 0px 0px 0px 3px;
@@ -1648,7 +1613,7 @@ video {
1648
1613
  --tw-shadow: var(--tw-shadow-colored);
1649
1614
  }
1650
1615
  .active\:shadow-gray-700:active {
1651
- --tw-shadow-color: #656565;
1616
+ --tw-shadow-color: var(--gray-700);
1652
1617
  --tw-shadow: var(--tw-shadow-colored);
1653
1618
  }
1654
1619
  .active\:shadow-primary-300:active {
@@ -1666,20 +1631,16 @@ video {
1666
1631
  user-select: none;
1667
1632
  }
1668
1633
  .disabled\:border-gray-400:disabled {
1669
- --tw-border-opacity: 1;
1670
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1634
+ border-color: var(--gray-400);
1671
1635
  }
1672
1636
  .disabled\:bg-gray-25:disabled {
1673
- --tw-bg-opacity: 1;
1674
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1637
+ background-color: var(--gray-25);
1675
1638
  }
1676
1639
  .disabled\:bg-gray-400:disabled {
1677
- --tw-bg-opacity: 1;
1678
- background-color: rgb(192 192 192 / var(--tw-bg-opacity));
1640
+ background-color: var(--gray-400);
1679
1641
  }
1680
1642
  .disabled\:text-light:disabled {
1681
- --tw-text-opacity: 1;
1682
- color: rgb(255 255 255 / var(--tw-text-opacity));
1643
+ color: var(--light);
1683
1644
  }
1684
1645
  .disabled\:opacity-30:disabled {
1685
1646
  opacity: 0.3;
@@ -1723,27 +1684,22 @@ video {
1723
1684
  user-select: none;
1724
1685
  }
1725
1686
  .has-\[\:disabled\]\:border-gray-400:has(:disabled) {
1726
- --tw-border-opacity: 1;
1727
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1687
+ border-color: var(--gray-400);
1728
1688
  }
1729
1689
  .has-\[\:disabled\]\:bg-gray-25:has(:disabled) {
1730
- --tw-bg-opacity: 1;
1731
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1690
+ background-color: var(--gray-25);
1732
1691
  }
1733
1692
  .has-\[\:disabled\]\:opacity-30:has(:disabled) {
1734
1693
  opacity: 0.3;
1735
1694
  }
1736
1695
  .dark\:border-gray-600:is(.dark *) {
1737
- --tw-border-opacity: 1;
1738
- border-color: rgb(121 121 121 / var(--tw-border-opacity));
1696
+ border-color: var(--gray-600);
1739
1697
  }
1740
1698
  .dark\:border-gray-800:is(.dark *) {
1741
- --tw-border-opacity: 1;
1742
- border-color: rgb(70 70 70 / var(--tw-border-opacity));
1699
+ border-color: var(--gray-800);
1743
1700
  }
1744
1701
  .dark\:border-gray-900:is(.dark *) {
1745
- --tw-border-opacity: 1;
1746
- border-color: rgb(37 37 37 / var(--tw-border-opacity));
1702
+ border-color: var(--gray-900);
1747
1703
  }
1748
1704
  .dark\:border-primary-100:is(.dark *) {
1749
1705
  border-color: var(--primary-100);
@@ -1752,75 +1708,61 @@ video {
1752
1708
  border-color: var(--primary-800);
1753
1709
  }
1754
1710
  .dark\:bg-dark:is(.dark *) {
1755
- --tw-bg-opacity: 1;
1756
- background-color: rgb(7 7 7 / var(--tw-bg-opacity));
1757
- }
1758
- .dark\:bg-dark\/20:is(.dark *) {
1759
- background-color: rgb(7 7 7 / 0.2);
1711
+ background-color: var(--dark);
1760
1712
  }
1761
1713
  .dark\:bg-gray-700:is(.dark *) {
1762
- --tw-bg-opacity: 1;
1763
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1714
+ background-color: var(--gray-700);
1764
1715
  }
1765
1716
  .dark\:bg-gray-800:is(.dark *) {
1766
- --tw-bg-opacity: 1;
1767
- background-color: rgb(70 70 70 / var(--tw-bg-opacity));
1717
+ background-color: var(--gray-800);
1768
1718
  }
1769
1719
  .dark\:bg-gray-900:is(.dark *) {
1770
- --tw-bg-opacity: 1;
1771
- background-color: rgb(37 37 37 / var(--tw-bg-opacity));
1772
- }
1773
- .dark\:from-\[\#252525D9\]:is(.dark *) {
1774
- --tw-gradient-from: #252525D9 var(--tw-gradient-from-position);
1775
- --tw-gradient-to: rgb(37 37 37 / 0) var(--tw-gradient-to-position);
1776
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1720
+ background-color: var(--gray-900);
1777
1721
  }
1778
1722
  .dark\:from-cyan-500:is(.dark *) {
1779
1723
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
1780
1724
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
1781
1725
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1782
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
+ }
1783
1732
  .dark\:from-primary-900:is(.dark *) {
1784
1733
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
1785
1734
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1786
1735
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1787
1736
  }
1788
- .dark\:to-\[\#070707D9\]:is(.dark *) {
1789
- --tw-gradient-to: #070707D9 var(--tw-gradient-to-position);
1790
- }
1791
1737
  .dark\:to-blue-500:is(.dark *) {
1792
1738
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
1793
1739
  }
1794
1740
  .dark\:to-dark:is(.dark *) {
1795
- --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);
1796
1745
  }
1797
1746
  .dark\:text-dark:is(.dark *) {
1798
- --tw-text-opacity: 1;
1799
- color: rgb(7 7 7 / var(--tw-text-opacity));
1747
+ color: var(--dark);
1800
1748
  }
1801
1749
  .dark\:text-gray-25:is(.dark *) {
1802
- --tw-text-opacity: 1;
1803
- color: rgb(255 255 255 / var(--tw-text-opacity));
1750
+ color: var(--gray-25);
1804
1751
  }
1805
1752
  .dark\:text-gray-300:is(.dark *) {
1806
- --tw-text-opacity: 1;
1807
- color: rgb(228 228 228 / var(--tw-text-opacity));
1753
+ color: var(--gray-300);
1808
1754
  }
1809
1755
  .dark\:text-gray-500:is(.dark *) {
1810
- --tw-text-opacity: 1;
1811
- color: rgb(162 162 162 / var(--tw-text-opacity));
1756
+ color: var(--gray-500);
1812
1757
  }
1813
1758
  .dark\:text-gray-600:is(.dark *) {
1814
- --tw-text-opacity: 1;
1815
- color: rgb(121 121 121 / var(--tw-text-opacity));
1759
+ color: var(--gray-600);
1816
1760
  }
1817
1761
  .dark\:text-gray-800:is(.dark *) {
1818
- --tw-text-opacity: 1;
1819
- color: rgb(70 70 70 / var(--tw-text-opacity));
1762
+ color: var(--gray-800);
1820
1763
  }
1821
1764
  .dark\:text-light:is(.dark *) {
1822
- --tw-text-opacity: 1;
1823
- color: rgb(255 255 255 / var(--tw-text-opacity));
1765
+ color: var(--light);
1824
1766
  }
1825
1767
  .dark\:text-primary-200:is(.dark *) {
1826
1768
  color: var(--primary-200);
@@ -1838,32 +1780,25 @@ video {
1838
1780
  var(--tw-shadow);
1839
1781
  }
1840
1782
  .dark\:focus-within\:border-gray-800:focus-within:is(.dark *) {
1841
- --tw-border-opacity: 1;
1842
- border-color: rgb(70 70 70 / var(--tw-border-opacity));
1783
+ border-color: var(--gray-800);
1843
1784
  }
1844
1785
  .dark\:focus-within\:bg-gray-100:focus-within:is(.dark *) {
1845
- --tw-bg-opacity: 1;
1846
- background-color: rgb(248 248 248 / var(--tw-bg-opacity));
1786
+ background-color: var(--gray-100);
1847
1787
  }
1848
1788
  .dark\:focus-within\:text-dark:focus-within:is(.dark *) {
1849
- --tw-text-opacity: 1;
1850
- color: rgb(7 7 7 / var(--tw-text-opacity));
1789
+ color: var(--dark);
1851
1790
  }
1852
1791
  .dark\:hover\:border-gray-700:hover:is(.dark *) {
1853
- --tw-border-opacity: 1;
1854
- border-color: rgb(101 101 101 / var(--tw-border-opacity));
1792
+ border-color: var(--gray-700);
1855
1793
  }
1856
1794
  .hover\:dark\:border-gray-600:is(.dark *):hover {
1857
- --tw-border-opacity: 1;
1858
- border-color: rgb(121 121 121 / var(--tw-border-opacity));
1795
+ border-color: var(--gray-600);
1859
1796
  }
1860
1797
  .dark\:hover\:bg-gray-600:hover:is(.dark *) {
1861
- --tw-bg-opacity: 1;
1862
- background-color: rgb(121 121 121 / var(--tw-bg-opacity));
1798
+ background-color: var(--gray-600);
1863
1799
  }
1864
1800
  .dark\:hover\:bg-gray-800:hover:is(.dark *) {
1865
- --tw-bg-opacity: 1;
1866
- background-color: rgb(70 70 70 / var(--tw-bg-opacity));
1801
+ background-color: var(--gray-800);
1867
1802
  }
1868
1803
  .dark\:hover\:bg-primary-800:hover:is(.dark *) {
1869
1804
  background-color: var(--primary-800);
@@ -1871,36 +1806,31 @@ video {
1871
1806
  .hover\:dark\:bg-transparent:is(.dark *):hover {
1872
1807
  background-color: transparent;
1873
1808
  }
1874
- .dark\:hover\:from-\[\#1A3562D9\]:hover:is(.dark *) {
1875
- --tw-gradient-from: #1A3562D9 var(--tw-gradient-from-position);
1876
- --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);
1877
1812
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1878
1813
  }
1879
- .dark\:hover\:to-\[\#070707D9\]:hover:is(.dark *) {
1880
- --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);
1881
1816
  }
1882
1817
  .dark\:hover\:text-light:hover:is(.dark *) {
1883
- --tw-text-opacity: 1;
1884
- color: rgb(255 255 255 / var(--tw-text-opacity));
1818
+ color: var(--light);
1885
1819
  }
1886
1820
  .dark\:hover\:text-primary-600:hover:is(.dark *) {
1887
1821
  color: var(--primary-600);
1888
1822
  }
1889
1823
  .dark\:focus-within\:hover\:bg-gray-700:hover:focus-within:is(.dark *) {
1890
- --tw-bg-opacity: 1;
1891
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1824
+ background-color: var(--gray-700);
1892
1825
  }
1893
1826
  .dark\:disabled\:bg-gray-700:disabled:is(.dark *) {
1894
- --tw-bg-opacity: 1;
1895
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1827
+ background-color: var(--gray-700);
1896
1828
  }
1897
1829
  .group:hover .group-hover\:dark\:text-dark:is(.dark *) {
1898
- --tw-text-opacity: 1;
1899
- color: rgb(7 7 7 / var(--tw-text-opacity));
1830
+ color: var(--dark);
1900
1831
  }
1901
1832
  .dark\:has-\[\:disabled\]\:bg-gray-700:has(:disabled):is(.dark *) {
1902
- --tw-bg-opacity: 1;
1903
- background-color: rgb(101 101 101 / var(--tw-bg-opacity));
1833
+ background-color: var(--gray-700);
1904
1834
  }
1905
1835
  @media (min-width: 768px) {
1906
1836
  .md\:w-\[30\%\] {
@@ -1919,8 +1849,7 @@ video {
1919
1849
  border-right-width: 1px;
1920
1850
  }
1921
1851
  .md\:border-gray-400 {
1922
- --tw-border-opacity: 1;
1923
- border-color: rgb(192 192 192 / var(--tw-border-opacity));
1852
+ border-color: var(--gray-400);
1924
1853
  }
1925
1854
  .md\:p-spacing-lg {
1926
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.69",
4
+ "version": "0.0.77",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.mjs",