singularity-components 0.1.98 → 0.1.99

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/main.css CHANGED
@@ -51,6 +51,7 @@
51
51
  :root,
52
52
  :host {
53
53
  --sg-spacing: 0.25rem;
54
+ --sg-container-md: 28rem;
54
55
  --sg-text-xs: 0.75rem;
55
56
  --sg-text-xs--line-height: calc(1 / 0.75);
56
57
  --sg-text-sm: 0.875rem;
@@ -67,10 +68,6 @@
67
68
  --sg-text-3xl--line-height: calc(2.25 / 1.875);
68
69
  --sg-text-4xl: 2.25rem;
69
70
  --sg-text-4xl--line-height: calc(2.5 / 2.25);
70
- --sg-text-5xl: 3rem;
71
- --sg-text-5xl--line-height: 1;
72
- --sg-text-6xl: 3.75rem;
73
- --sg-text-6xl--line-height: 1;
74
71
  --sg-font-weight-normal: 400;
75
72
  --sg-font-weight-medium: 500;
76
73
  --sg-font-weight-semibold: 600;
@@ -78,6 +75,7 @@
78
75
  --sg-font-weight-extrabold: 800;
79
76
  --sg-tracking-tight: -0.025em;
80
77
  --sg-leading-relaxed: 1.625;
78
+ --sg-radius-2xl: 1rem;
81
79
  --sg-animate-spin: spin 1s linear infinite;
82
80
  --sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
83
81
  --sg-default-transition-duration: 150ms;
@@ -307,12 +305,30 @@
307
305
  .sg\:mt-4 {
308
306
  margin-top: calc(var(--sg-spacing) * 4);
309
307
  }
308
+ .sg\:mt-6 {
309
+ margin-top: calc(var(--sg-spacing) * 6);
310
+ }
311
+ .sg\:mb-2 {
312
+ margin-bottom: calc(var(--sg-spacing) * 2);
313
+ }
314
+ .sg\:mb-3 {
315
+ margin-bottom: calc(var(--sg-spacing) * 3);
316
+ }
317
+ .sg\:mb-6 {
318
+ margin-bottom: calc(var(--sg-spacing) * 6);
319
+ }
310
320
  .sg\:line-clamp-1 {
311
321
  overflow: hidden;
312
322
  display: -webkit-box;
313
323
  -webkit-box-orient: vertical;
314
324
  -webkit-line-clamp: 1;
315
325
  }
326
+ .sg\:line-clamp-2 {
327
+ overflow: hidden;
328
+ display: -webkit-box;
329
+ -webkit-box-orient: vertical;
330
+ -webkit-line-clamp: 2;
331
+ }
316
332
  .sg\:block {
317
333
  display: block;
318
334
  }
@@ -355,12 +371,21 @@
355
371
  .sg\:h-10 {
356
372
  height: calc(var(--sg-spacing) * 10);
357
373
  }
374
+ .sg\:h-11 {
375
+ height: calc(var(--sg-spacing) * 11);
376
+ }
358
377
  .sg\:h-12 {
359
378
  height: calc(var(--sg-spacing) * 12);
360
379
  }
380
+ .sg\:h-48 {
381
+ height: calc(var(--sg-spacing) * 48);
382
+ }
361
383
  .sg\:h-\[100px\] {
362
384
  height: 100px;
363
385
  }
386
+ .sg\:h-full {
387
+ height: 100%;
388
+ }
364
389
  .sg\:min-h-4 {
365
390
  min-height: calc(var(--sg-spacing) * 4);
366
391
  }
@@ -388,6 +413,9 @@
388
413
  .sg\:max-w-\[768px\] {
389
414
  max-width: 768px;
390
415
  }
416
+ .sg\:max-w-md {
417
+ max-width: var(--sg-container-md);
418
+ }
391
419
  .sg\:min-w-0 {
392
420
  min-width: calc(var(--sg-spacing) * 0);
393
421
  }
@@ -422,6 +450,9 @@
422
450
  .sg\:flex-col {
423
451
  flex-direction: column;
424
452
  }
453
+ .sg\:flex-wrap {
454
+ flex-wrap: wrap;
455
+ }
425
456
  .sg\:items-center {
426
457
  align-items: center;
427
458
  }
@@ -473,6 +504,13 @@
473
504
  .sg\:gap-10 {
474
505
  gap: calc(var(--sg-spacing) * 10);
475
506
  }
507
+ .sg\:space-y-1\.5 {
508
+ :where(& > :not(:last-child)) {
509
+ --tw-space-y-reverse: 0;
510
+ margin-block-start: calc(calc(var(--sg-spacing) * 1.5) * var(--tw-space-y-reverse));
511
+ margin-block-end: calc(calc(var(--sg-spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
512
+ }
513
+ }
476
514
  .sg\:gap-y-0\.5 {
477
515
  row-gap: calc(var(--sg-spacing) * 0.5);
478
516
  }
@@ -482,6 +520,9 @@
482
520
  .sg\:overflow-x-auto {
483
521
  overflow-x: auto;
484
522
  }
523
+ .sg\:rounded-2xl {
524
+ border-radius: var(--sg-radius-2xl);
525
+ }
485
526
  .sg\:rounded-full {
486
527
  border-radius: calc(infinity * 1px);
487
528
  }
@@ -491,10 +532,17 @@
491
532
  .sg\:rounded-md {
492
533
  border-radius: calc(var(--radius) - 2px);
493
534
  }
535
+ .sg\:rounded-xl {
536
+ border-radius: calc(var(--radius) + 4px);
537
+ }
494
538
  .sg\:border {
495
539
  border-style: var(--tw-border-style);
496
540
  border-width: 1px;
497
541
  }
542
+ .sg\:border-0 {
543
+ border-style: var(--tw-border-style);
544
+ border-width: 0px;
545
+ }
498
546
  .sg\:border-t {
499
547
  border-top-style: var(--tw-border-style);
500
548
  border-top-width: 1px;
@@ -560,10 +608,22 @@
560
608
  .sg\:bg-white {
561
609
  background-color: hsl(var(--sg-white));
562
610
  }
611
+ .sg\:bg-gradient-to-br {
612
+ --tw-gradient-position: to bottom right in oklab;
613
+ background-image: linear-gradient(var(--tw-gradient-stops));
614
+ }
563
615
  .sg\:bg-gradient-to-r {
564
616
  --tw-gradient-position: to right in oklab;
565
617
  background-image: linear-gradient(var(--tw-gradient-stops));
566
618
  }
619
+ .sg\:bg-gradient-to-t {
620
+ --tw-gradient-position: to top in oklab;
621
+ background-image: linear-gradient(var(--tw-gradient-stops));
622
+ }
623
+ .sg\:bg-gradient-to-tr {
624
+ --tw-gradient-position: to top right in oklab;
625
+ background-image: linear-gradient(var(--tw-gradient-stops));
626
+ }
567
627
  .sg\:bg-\[conic-gradient\(hsl\(var\(--sg-gradient-1\)\)\,hsl\(var\(--sg-gradient-2\)\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-gradient-1\)\)\)\] {
568
628
  background-image:
569
629
  conic-gradient(
@@ -587,6 +647,17 @@
587
647
  --tw-gradient-from: hsl(var(--sg-gradient-1));
588
648
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
589
649
  }
650
+ .sg\:from-background {
651
+ --tw-gradient-from: hsl(var(--sg-color-background));
652
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
653
+ }
654
+ .sg\:from-background\/80 {
655
+ --tw-gradient-from: hsl(var(--sg-color-background));
656
+ @supports (color: color-mix(in lab, red, red)) {
657
+ --tw-gradient-from: color-mix(in oklab, hsl(var(--sg-color-background)) 80%, transparent);
658
+ }
659
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
660
+ }
590
661
  .sg\:from-blue {
591
662
  --tw-gradient-from: hsl(var(--sg-blue));
592
663
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -609,20 +680,47 @@
609
680
  var(--tw-gradient-to) var(--tw-gradient-to-position);
610
681
  --tw-gradient-stops: var(--tw-gradient-via-stops);
611
682
  }
683
+ .sg\:to-\[hsl\(var\(--sg-gradient-2\)\)\] {
684
+ --tw-gradient-to: hsl(var(--sg-gradient-2));
685
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
686
+ }
612
687
  .sg\:to-\[hsl\(var\(--sg-primary\)\)\] {
613
688
  --tw-gradient-to: hsl(var(--sg-primary));
614
689
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
615
690
  }
691
+ .sg\:to-background\/60 {
692
+ --tw-gradient-to: hsl(var(--sg-color-background));
693
+ @supports (color: color-mix(in lab, red, red)) {
694
+ --tw-gradient-to: color-mix(in oklab, hsl(var(--sg-color-background)) 60%, transparent);
695
+ }
696
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
697
+ }
616
698
  .sg\:to-red {
617
699
  --tw-gradient-to: hsl(var(--sg-red));
618
700
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
619
701
  }
702
+ .sg\:to-transparent {
703
+ --tw-gradient-to: transparent;
704
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
705
+ }
620
706
  .sg\:bg-clip-text {
621
707
  background-clip: text;
622
708
  }
709
+ .sg\:object-cover {
710
+ object-fit: cover;
711
+ }
623
712
  .sg\:p-2 {
624
713
  padding: calc(var(--sg-spacing) * 2);
625
714
  }
715
+ .sg\:p-5 {
716
+ padding: calc(var(--sg-spacing) * 5);
717
+ }
718
+ .sg\:p-6 {
719
+ padding: calc(var(--sg-spacing) * 6);
720
+ }
721
+ .sg\:p-\[2px\] {
722
+ padding: 2px;
723
+ }
626
724
  .sg\:px-2 {
627
725
  padding-inline: calc(var(--sg-spacing) * 2);
628
726
  }
@@ -650,12 +748,18 @@
650
748
  .sg\:py-4 {
651
749
  padding-block: calc(var(--sg-spacing) * 4);
652
750
  }
751
+ .sg\:py-16 {
752
+ padding-block: calc(var(--sg-spacing) * 16);
753
+ }
653
754
  .sg\:pt-0 {
654
755
  padding-top: calc(var(--sg-spacing) * 0);
655
756
  }
656
757
  .sg\:pb-4 {
657
758
  padding-bottom: calc(var(--sg-spacing) * 4);
658
759
  }
760
+ .sg\:text-center {
761
+ text-align: center;
762
+ }
659
763
  .sg\:text-left {
660
764
  text-align: left;
661
765
  }
@@ -673,18 +777,6 @@
673
777
  font-size: var(--sg-text-3xl);
674
778
  line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
675
779
  }
676
- .sg\:text-4xl {
677
- font-size: var(--sg-text-4xl);
678
- line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
679
- }
680
- .sg\:text-5xl {
681
- font-size: var(--sg-text-5xl);
682
- line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
683
- }
684
- .sg\:text-6xl {
685
- font-size: var(--sg-text-6xl);
686
- line-height: var(--tw-leading, var(--sg-text-6xl--line-height));
687
- }
688
780
  .sg\:text-base {
689
781
  font-size: var(--sg-text-base);
690
782
  line-height: var(--tw-leading, var(--sg-text-base--line-height));
@@ -705,6 +797,10 @@
705
797
  font-size: var(--sg-text-xs);
706
798
  line-height: var(--tw-leading, var(--sg-text-xs--line-height));
707
799
  }
800
+ .sg\:leading-none {
801
+ --tw-leading: 1;
802
+ line-height: 1;
803
+ }
708
804
  .sg\:font-bold {
709
805
  --tw-font-weight: var(--sg-font-weight-bold);
710
806
  font-weight: var(--sg-font-weight-bold);
@@ -777,6 +873,15 @@
777
873
  .sg\:underline-offset-4 {
778
874
  text-underline-offset: 4px;
779
875
  }
876
+ .sg\:shadow-lg {
877
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
878
+ box-shadow:
879
+ var(--tw-inset-shadow),
880
+ var(--tw-inset-ring-shadow),
881
+ var(--tw-ring-offset-shadow),
882
+ var(--tw-ring-shadow),
883
+ var(--tw-shadow);
884
+ }
780
885
  .sg\:shadow-xs {
781
886
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
782
887
  box-shadow:
@@ -786,6 +891,21 @@
786
891
  var(--tw-ring-shadow),
787
892
  var(--tw-shadow);
788
893
  }
894
+ .sg\:ring-1 {
895
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
896
+ box-shadow:
897
+ var(--tw-inset-shadow),
898
+ var(--tw-inset-ring-shadow),
899
+ var(--tw-ring-offset-shadow),
900
+ var(--tw-ring-shadow),
901
+ var(--tw-shadow);
902
+ }
903
+ .sg\:ring-gray\/60 {
904
+ --tw-ring-color: hsl(var(--sg-gray));
905
+ @supports (color: color-mix(in lab, red, red)) {
906
+ --tw-ring-color: color-mix(in oklab, hsl(var(--sg-gray)) 60%, transparent);
907
+ }
908
+ }
789
909
  .sg\:transition-\[color\,box-shadow\] {
790
910
  transition-property: color, box-shadow;
791
911
  transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
@@ -824,6 +944,10 @@
824
944
  --tw-duration: 200ms;
825
945
  transition-duration: 200ms;
826
946
  }
947
+ .sg\:duration-500 {
948
+ --tw-duration: 500ms;
949
+ transition-duration: 500ms;
950
+ }
827
951
  .sg\:outline-none {
828
952
  --tw-outline-style: none;
829
953
  outline-style: none;
@@ -838,6 +962,19 @@
838
962
  .sg\:duration-200 {
839
963
  animation-duration: 200ms;
840
964
  }
965
+ .sg\:duration-500 {
966
+ animation-duration: 500ms;
967
+ }
968
+ .sg\:group-hover\:scale-105 {
969
+ &:is(:where(.sg\:group):hover *) {
970
+ @media (hover: hover) {
971
+ --tw-scale-x: 105%;
972
+ --tw-scale-y: 105%;
973
+ --tw-scale-z: 105%;
974
+ scale: var(--tw-scale-x) var(--tw-scale-y);
975
+ }
976
+ }
977
+ }
841
978
  .sg\:selection\:bg-primary {
842
979
  & *::selection {
843
980
  background-color: hsl(var(--sg-primary));
@@ -1089,6 +1226,11 @@
1089
1226
  background-color: var(--muted);
1090
1227
  }
1091
1228
  }
1229
+ .sg\:sm\:grid-cols-2 {
1230
+ @media (width >= 40rem) {
1231
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1232
+ }
1233
+ }
1092
1234
  .sg\:md\:grid-cols-2 {
1093
1235
  @media (width >= 48rem) {
1094
1236
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1120,10 +1262,15 @@
1120
1262
  line-height: var(--tw-leading, var(--sg-text-sm--line-height));
1121
1263
  }
1122
1264
  }
1123
- .sg\:lg\:text-5xl {
1265
+ .sg\:lg\:grid-cols-3 {
1266
+ @media (width >= 64rem) {
1267
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1268
+ }
1269
+ }
1270
+ .sg\:lg\:text-4xl {
1124
1271
  @media (width >= 64rem) {
1125
- font-size: var(--sg-text-5xl);
1126
- line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
1272
+ font-size: var(--sg-text-4xl);
1273
+ line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
1127
1274
  }
1128
1275
  }
1129
1276
  .sg\:dark\:border-input {
@@ -1440,6 +1587,7 @@
1440
1587
  @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
1441
1588
  @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
1442
1589
  @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
1590
+ @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
1443
1591
  @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
1444
1592
  @property --tw-gradient-position { syntax: "*"; inherits: false; }
1445
1593
  @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@@ -1450,6 +1598,7 @@
1450
1598
  @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
1451
1599
  @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
1452
1600
  @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
1601
+ @property --tw-leading { syntax: "*"; inherits: false; }
1453
1602
  @property --tw-font-weight { syntax: "*"; inherits: false; }
1454
1603
  @property --tw-tracking { syntax: "*"; inherits: false; }
1455
1604
  @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@@ -1467,7 +1616,9 @@
1467
1616
  @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
1468
1617
  @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1469
1618
  @property --tw-duration { syntax: "*"; inherits: false; }
1470
- @property --tw-leading { syntax: "*"; inherits: false; }
1619
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
1620
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
1621
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
1471
1622
  @keyframes spin {
1472
1623
  to {
1473
1624
  transform: rotate(360deg);
@@ -1487,6 +1638,7 @@
1487
1638
  --tw-translate-x: 0;
1488
1639
  --tw-translate-y: 0;
1489
1640
  --tw-translate-z: 0;
1641
+ --tw-space-y-reverse: 0;
1490
1642
  --tw-border-style: solid;
1491
1643
  --tw-gradient-position: initial;
1492
1644
  --tw-gradient-from: #0000;
@@ -1497,6 +1649,7 @@
1497
1649
  --tw-gradient-from-position: 0%;
1498
1650
  --tw-gradient-via-position: 50%;
1499
1651
  --tw-gradient-to-position: 100%;
1652
+ --tw-leading: initial;
1500
1653
  --tw-font-weight: initial;
1501
1654
  --tw-tracking: initial;
1502
1655
  --tw-shadow: 0 0 #0000;
@@ -1514,7 +1667,9 @@
1514
1667
  --tw-ring-offset-color: #fff;
1515
1668
  --tw-ring-offset-shadow: 0 0 #0000;
1516
1669
  --tw-duration: initial;
1517
- --tw-leading: initial;
1670
+ --tw-scale-x: 1;
1671
+ --tw-scale-y: 1;
1672
+ --tw-scale-z: 1;
1518
1673
  }
1519
1674
  }
1520
1675
  }