singularity-components 0.1.97 → 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;
@@ -295,9 +293,6 @@
295
293
  .sg\:inset-\[18\%\] {
296
294
  inset: 18%;
297
295
  }
298
- .sg\:-z-10 {
299
- z-index: calc(10 * -1);
300
- }
301
296
  .sg\:col-start-2 {
302
297
  grid-column-start: 2;
303
298
  }
@@ -310,12 +305,30 @@
310
305
  .sg\:mt-4 {
311
306
  margin-top: calc(var(--sg-spacing) * 4);
312
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
+ }
313
320
  .sg\:line-clamp-1 {
314
321
  overflow: hidden;
315
322
  display: -webkit-box;
316
323
  -webkit-box-orient: vertical;
317
324
  -webkit-line-clamp: 1;
318
325
  }
326
+ .sg\:line-clamp-2 {
327
+ overflow: hidden;
328
+ display: -webkit-box;
329
+ -webkit-box-orient: vertical;
330
+ -webkit-line-clamp: 2;
331
+ }
319
332
  .sg\:block {
320
333
  display: block;
321
334
  }
@@ -358,12 +371,21 @@
358
371
  .sg\:h-10 {
359
372
  height: calc(var(--sg-spacing) * 10);
360
373
  }
374
+ .sg\:h-11 {
375
+ height: calc(var(--sg-spacing) * 11);
376
+ }
361
377
  .sg\:h-12 {
362
378
  height: calc(var(--sg-spacing) * 12);
363
379
  }
380
+ .sg\:h-48 {
381
+ height: calc(var(--sg-spacing) * 48);
382
+ }
364
383
  .sg\:h-\[100px\] {
365
384
  height: 100px;
366
385
  }
386
+ .sg\:h-full {
387
+ height: 100%;
388
+ }
367
389
  .sg\:min-h-4 {
368
390
  min-height: calc(var(--sg-spacing) * 4);
369
391
  }
@@ -391,6 +413,9 @@
391
413
  .sg\:max-w-\[768px\] {
392
414
  max-width: 768px;
393
415
  }
416
+ .sg\:max-w-md {
417
+ max-width: var(--sg-container-md);
418
+ }
394
419
  .sg\:min-w-0 {
395
420
  min-width: calc(var(--sg-spacing) * 0);
396
421
  }
@@ -425,6 +450,9 @@
425
450
  .sg\:flex-col {
426
451
  flex-direction: column;
427
452
  }
453
+ .sg\:flex-wrap {
454
+ flex-wrap: wrap;
455
+ }
428
456
  .sg\:items-center {
429
457
  align-items: center;
430
458
  }
@@ -476,6 +504,13 @@
476
504
  .sg\:gap-10 {
477
505
  gap: calc(var(--sg-spacing) * 10);
478
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
+ }
479
514
  .sg\:gap-y-0\.5 {
480
515
  row-gap: calc(var(--sg-spacing) * 0.5);
481
516
  }
@@ -485,6 +520,9 @@
485
520
  .sg\:overflow-x-auto {
486
521
  overflow-x: auto;
487
522
  }
523
+ .sg\:rounded-2xl {
524
+ border-radius: var(--sg-radius-2xl);
525
+ }
488
526
  .sg\:rounded-full {
489
527
  border-radius: calc(infinity * 1px);
490
528
  }
@@ -494,10 +532,17 @@
494
532
  .sg\:rounded-md {
495
533
  border-radius: calc(var(--radius) - 2px);
496
534
  }
535
+ .sg\:rounded-xl {
536
+ border-radius: calc(var(--radius) + 4px);
537
+ }
497
538
  .sg\:border {
498
539
  border-style: var(--tw-border-style);
499
540
  border-width: 1px;
500
541
  }
542
+ .sg\:border-0 {
543
+ border-style: var(--tw-border-style);
544
+ border-width: 0px;
545
+ }
501
546
  .sg\:border-t {
502
547
  border-top-style: var(--tw-border-style);
503
548
  border-top-width: 1px;
@@ -563,10 +608,22 @@
563
608
  .sg\:bg-white {
564
609
  background-color: hsl(var(--sg-white));
565
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
+ }
566
615
  .sg\:bg-gradient-to-r {
567
616
  --tw-gradient-position: to right in oklab;
568
617
  background-image: linear-gradient(var(--tw-gradient-stops));
569
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
+ }
570
627
  .sg\:bg-\[conic-gradient\(hsl\(var\(--sg-gradient-1\)\)\,hsl\(var\(--sg-gradient-2\)\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-gradient-1\)\)\)\] {
571
628
  background-image:
572
629
  conic-gradient(
@@ -590,6 +647,17 @@
590
647
  --tw-gradient-from: hsl(var(--sg-gradient-1));
591
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));
592
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
+ }
593
661
  .sg\:from-blue {
594
662
  --tw-gradient-from: hsl(var(--sg-blue));
595
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));
@@ -612,20 +680,47 @@
612
680
  var(--tw-gradient-to) var(--tw-gradient-to-position);
613
681
  --tw-gradient-stops: var(--tw-gradient-via-stops);
614
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
+ }
615
687
  .sg\:to-\[hsl\(var\(--sg-primary\)\)\] {
616
688
  --tw-gradient-to: hsl(var(--sg-primary));
617
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));
618
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
+ }
619
698
  .sg\:to-red {
620
699
  --tw-gradient-to: hsl(var(--sg-red));
621
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));
622
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
+ }
623
706
  .sg\:bg-clip-text {
624
707
  background-clip: text;
625
708
  }
709
+ .sg\:object-cover {
710
+ object-fit: cover;
711
+ }
626
712
  .sg\:p-2 {
627
713
  padding: calc(var(--sg-spacing) * 2);
628
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
+ }
629
724
  .sg\:px-2 {
630
725
  padding-inline: calc(var(--sg-spacing) * 2);
631
726
  }
@@ -653,12 +748,18 @@
653
748
  .sg\:py-4 {
654
749
  padding-block: calc(var(--sg-spacing) * 4);
655
750
  }
751
+ .sg\:py-16 {
752
+ padding-block: calc(var(--sg-spacing) * 16);
753
+ }
656
754
  .sg\:pt-0 {
657
755
  padding-top: calc(var(--sg-spacing) * 0);
658
756
  }
659
757
  .sg\:pb-4 {
660
758
  padding-bottom: calc(var(--sg-spacing) * 4);
661
759
  }
760
+ .sg\:text-center {
761
+ text-align: center;
762
+ }
662
763
  .sg\:text-left {
663
764
  text-align: left;
664
765
  }
@@ -676,18 +777,6 @@
676
777
  font-size: var(--sg-text-3xl);
677
778
  line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
678
779
  }
679
- .sg\:text-4xl {
680
- font-size: var(--sg-text-4xl);
681
- line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
682
- }
683
- .sg\:text-5xl {
684
- font-size: var(--sg-text-5xl);
685
- line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
686
- }
687
- .sg\:text-6xl {
688
- font-size: var(--sg-text-6xl);
689
- line-height: var(--tw-leading, var(--sg-text-6xl--line-height));
690
- }
691
780
  .sg\:text-base {
692
781
  font-size: var(--sg-text-base);
693
782
  line-height: var(--tw-leading, var(--sg-text-base--line-height));
@@ -708,6 +797,10 @@
708
797
  font-size: var(--sg-text-xs);
709
798
  line-height: var(--tw-leading, var(--sg-text-xs--line-height));
710
799
  }
800
+ .sg\:leading-none {
801
+ --tw-leading: 1;
802
+ line-height: 1;
803
+ }
711
804
  .sg\:font-bold {
712
805
  --tw-font-weight: var(--sg-font-weight-bold);
713
806
  font-weight: var(--sg-font-weight-bold);
@@ -780,6 +873,15 @@
780
873
  .sg\:underline-offset-4 {
781
874
  text-underline-offset: 4px;
782
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
+ }
783
885
  .sg\:shadow-xs {
784
886
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
785
887
  box-shadow:
@@ -789,6 +891,21 @@
789
891
  var(--tw-ring-shadow),
790
892
  var(--tw-shadow);
791
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
+ }
792
909
  .sg\:transition-\[color\,box-shadow\] {
793
910
  transition-property: color, box-shadow;
794
911
  transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
@@ -827,6 +944,10 @@
827
944
  --tw-duration: 200ms;
828
945
  transition-duration: 200ms;
829
946
  }
947
+ .sg\:duration-500 {
948
+ --tw-duration: 500ms;
949
+ transition-duration: 500ms;
950
+ }
830
951
  .sg\:outline-none {
831
952
  --tw-outline-style: none;
832
953
  outline-style: none;
@@ -841,6 +962,19 @@
841
962
  .sg\:duration-200 {
842
963
  animation-duration: 200ms;
843
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
+ }
844
978
  .sg\:selection\:bg-primary {
845
979
  & *::selection {
846
980
  background-color: hsl(var(--sg-primary));
@@ -1092,6 +1226,11 @@
1092
1226
  background-color: var(--muted);
1093
1227
  }
1094
1228
  }
1229
+ .sg\:sm\:grid-cols-2 {
1230
+ @media (width >= 40rem) {
1231
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1232
+ }
1233
+ }
1095
1234
  .sg\:md\:grid-cols-2 {
1096
1235
  @media (width >= 48rem) {
1097
1236
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1123,10 +1262,15 @@
1123
1262
  line-height: var(--tw-leading, var(--sg-text-sm--line-height));
1124
1263
  }
1125
1264
  }
1126
- .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 {
1127
1271
  @media (width >= 64rem) {
1128
- font-size: var(--sg-text-5xl);
1129
- 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));
1130
1274
  }
1131
1275
  }
1132
1276
  .sg\:dark\:border-input {
@@ -1443,6 +1587,7 @@
1443
1587
  @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
1444
1588
  @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
1445
1589
  @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
1590
+ @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
1446
1591
  @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
1447
1592
  @property --tw-gradient-position { syntax: "*"; inherits: false; }
1448
1593
  @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@@ -1453,6 +1598,7 @@
1453
1598
  @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
1454
1599
  @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
1455
1600
  @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
1601
+ @property --tw-leading { syntax: "*"; inherits: false; }
1456
1602
  @property --tw-font-weight { syntax: "*"; inherits: false; }
1457
1603
  @property --tw-tracking { syntax: "*"; inherits: false; }
1458
1604
  @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@@ -1470,7 +1616,9 @@
1470
1616
  @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
1471
1617
  @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1472
1618
  @property --tw-duration { syntax: "*"; inherits: false; }
1473
- @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; }
1474
1622
  @keyframes spin {
1475
1623
  to {
1476
1624
  transform: rotate(360deg);
@@ -1490,6 +1638,7 @@
1490
1638
  --tw-translate-x: 0;
1491
1639
  --tw-translate-y: 0;
1492
1640
  --tw-translate-z: 0;
1641
+ --tw-space-y-reverse: 0;
1493
1642
  --tw-border-style: solid;
1494
1643
  --tw-gradient-position: initial;
1495
1644
  --tw-gradient-from: #0000;
@@ -1500,6 +1649,7 @@
1500
1649
  --tw-gradient-from-position: 0%;
1501
1650
  --tw-gradient-via-position: 50%;
1502
1651
  --tw-gradient-to-position: 100%;
1652
+ --tw-leading: initial;
1503
1653
  --tw-font-weight: initial;
1504
1654
  --tw-tracking: initial;
1505
1655
  --tw-shadow: 0 0 #0000;
@@ -1517,7 +1667,9 @@
1517
1667
  --tw-ring-offset-color: #fff;
1518
1668
  --tw-ring-offset-shadow: 0 0 #0000;
1519
1669
  --tw-duration: initial;
1520
- --tw-leading: initial;
1670
+ --tw-scale-x: 1;
1671
+ --tw-scale-y: 1;
1672
+ --tw-scale-z: 1;
1521
1673
  }
1522
1674
  }
1523
1675
  }