@nswds/app 1.30.0 → 1.31.0

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/globals.css CHANGED
@@ -20,6 +20,7 @@
20
20
  --color-blue-600: oklch(54.6% 0.245 262.881);
21
21
  --color-blue-700: oklch(48.8% 0.243 264.376);
22
22
  --color-blue-950: oklch(28.2% 0.091 267.935);
23
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
23
24
  --color-purple-50: oklch(97.7% 0.014 308.299);
24
25
  --color-purple-100: oklch(94.6% 0.033 307.174);
25
26
  --color-purple-500: oklch(62.7% 0.265 303.9);
@@ -32,6 +33,7 @@
32
33
  --color-slate-700: oklch(37.2% 0.044 257.287);
33
34
  --color-slate-800: oklch(27.9% 0.041 260.031);
34
35
  --color-slate-900: oklch(20.8% 0.042 265.755);
36
+ --color-gray-50: oklch(98.5% 0.002 247.839);
35
37
  --color-gray-100: oklch(96.7% 0.003 264.542);
36
38
  --color-gray-200: oklch(92.8% 0.006 264.531);
37
39
  --color-gray-300: oklch(87.2% 0.01 258.338);
@@ -79,6 +81,8 @@
79
81
  --radius-md: 0.375rem;
80
82
  --radius-lg: 0.5rem;
81
83
  --radius-xl: 0.75rem;
84
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
85
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
82
86
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
83
87
  --animate-spin: spin 1s linear infinite;
84
88
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -386,6 +390,9 @@
386
390
  .isolate {
387
391
  isolation: isolate;
388
392
  }
393
+ .-z-10 {
394
+ z-index: calc(10 * -1);
395
+ }
389
396
  .z-10 {
390
397
  z-index: 10;
391
398
  }
@@ -428,6 +435,9 @@
428
435
  .mx-1 {
429
436
  margin-inline: calc(var(--spacing) * 1);
430
437
  }
438
+ .mx-2 {
439
+ margin-inline: calc(var(--spacing) * 2);
440
+ }
431
441
  .mx-auto {
432
442
  margin-inline: auto;
433
443
  }
@@ -960,6 +970,9 @@
960
970
  .rotate-45 {
961
971
  rotate: 45deg;
962
972
  }
973
+ .rotate-180 {
974
+ rotate: 180deg;
975
+ }
963
976
  .transform {
964
977
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
965
978
  }
@@ -1160,6 +1173,9 @@
1160
1173
  .gap-x-2 {
1161
1174
  column-gap: calc(var(--spacing) * 2);
1162
1175
  }
1176
+ .gap-x-2\.5 {
1177
+ column-gap: calc(var(--spacing) * 2.5);
1178
+ }
1163
1179
  .gap-x-4 {
1164
1180
  column-gap: calc(var(--spacing) * 4);
1165
1181
  }
@@ -1210,6 +1226,19 @@
1210
1226
  border-color: var(--color-gray-100);
1211
1227
  }
1212
1228
  }
1229
+ .divide-gray-900 {
1230
+ :where(& > :not(:last-child)) {
1231
+ border-color: var(--color-gray-900);
1232
+ }
1233
+ }
1234
+ .divide-gray-900\/5 {
1235
+ :where(& > :not(:last-child)) {
1236
+ border-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
1237
+ @supports (color: color-mix(in lab, red, red)) {
1238
+ border-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent);
1239
+ }
1240
+ }
1241
+ }
1213
1242
  .self-start {
1214
1243
  align-self: flex-start;
1215
1244
  }
@@ -1326,6 +1355,10 @@
1326
1355
  border-bottom-style: var(--tw-border-style);
1327
1356
  border-bottom-width: 1px;
1328
1357
  }
1358
+ .border-b-2 {
1359
+ border-bottom-style: var(--tw-border-style);
1360
+ border-bottom-width: 2px;
1361
+ }
1329
1362
  .border-l {
1330
1363
  border-left-style: var(--tw-border-style);
1331
1364
  border-left-width: 1px;
@@ -1481,6 +1514,12 @@
1481
1514
  background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
1482
1515
  }
1483
1516
  }
1517
+ .bg-gray-50 {
1518
+ background-color: var(--color-gray-50);
1519
+ }
1520
+ .bg-gray-100 {
1521
+ background-color: var(--color-gray-100);
1522
+ }
1484
1523
  .bg-gray-800 {
1485
1524
  background-color: var(--color-gray-800);
1486
1525
  }
@@ -1610,6 +1649,9 @@
1610
1649
  .p-2 {
1611
1650
  padding: calc(var(--spacing) * 2);
1612
1651
  }
1652
+ .p-3 {
1653
+ padding: calc(var(--spacing) * 3);
1654
+ }
1613
1655
  .p-4 {
1614
1656
  padding: calc(var(--spacing) * 4);
1615
1657
  }
@@ -1661,6 +1703,9 @@
1661
1703
  .px-6 {
1662
1704
  padding-inline: calc(var(--spacing) * 6);
1663
1705
  }
1706
+ .px-8 {
1707
+ padding-inline: calc(var(--spacing) * 8);
1708
+ }
1664
1709
  .px-\[calc\(--spacing\(1\)\*1\.5\)\] {
1665
1710
  padding-inline: calc(calc(var(--spacing) * 1) * 1.5);
1666
1711
  }
@@ -1706,6 +1751,9 @@
1706
1751
  .py-6 {
1707
1752
  padding-block: calc(var(--spacing) * 6);
1708
1753
  }
1754
+ .py-8 {
1755
+ padding-block: calc(var(--spacing) * 8);
1756
+ }
1709
1757
  .py-16 {
1710
1758
  padding-block: calc(var(--spacing) * 16);
1711
1759
  }
@@ -1736,6 +1784,9 @@
1736
1784
  .pt-8 {
1737
1785
  padding-top: calc(var(--spacing) * 8);
1738
1786
  }
1787
+ .pt-14 {
1788
+ padding-top: calc(var(--spacing) * 14);
1789
+ }
1739
1790
  .pr-1 {
1740
1791
  padding-right: calc(var(--spacing) * 1);
1741
1792
  }
@@ -1763,6 +1814,9 @@
1763
1814
  .pb-4 {
1764
1815
  padding-bottom: calc(var(--spacing) * 4);
1765
1816
  }
1817
+ .pb-12 {
1818
+ padding-bottom: calc(var(--spacing) * 12);
1819
+ }
1766
1820
  .pb-16 {
1767
1821
  padding-bottom: calc(var(--spacing) * 16);
1768
1822
  }
@@ -1899,6 +1953,10 @@
1899
1953
  .text-\[length\:var\(--font-size-4\)\] {
1900
1954
  font-size: var(--font-size-4);
1901
1955
  }
1956
+ .leading-6 {
1957
+ --tw-leading: calc(var(--spacing) * 6);
1958
+ line-height: calc(var(--spacing) * 6);
1959
+ }
1902
1960
  .leading-\[var\(--line-height\)\] {
1903
1961
  --tw-leading: var(--line-height);
1904
1962
  line-height: var(--line-height);
@@ -2095,6 +2153,9 @@
2095
2153
  .text-nsw-grey-800 {
2096
2154
  color: var(--color-nsw-grey-800);
2097
2155
  }
2156
+ .text-nsw-grey-900 {
2157
+ color: var(--color-nsw-grey-900);
2158
+ }
2098
2159
  .text-popover-foreground {
2099
2160
  color: var(--popover-foreground);
2100
2161
  }
@@ -3117,6 +3178,22 @@
3117
3178
  border-bottom-width: 0px;
3118
3179
  }
3119
3180
  }
3181
+ .focus-within\:ring-2 {
3182
+ &:focus-within {
3183
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3184
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3185
+ }
3186
+ }
3187
+ .focus-within\:ring-indigo-500 {
3188
+ &:focus-within {
3189
+ --tw-ring-color: var(--color-indigo-500);
3190
+ }
3191
+ }
3192
+ .focus-within\:ring-inset {
3193
+ &:focus-within {
3194
+ --tw-ring-inset: inset;
3195
+ }
3196
+ }
3120
3197
  .hover\:z-10 {
3121
3198
  &:hover {
3122
3199
  @media (hover: hover) {
@@ -3165,6 +3242,13 @@
3165
3242
  }
3166
3243
  }
3167
3244
  }
3245
+ .hover\:bg-gray-50 {
3246
+ &:hover {
3247
+ @media (hover: hover) {
3248
+ background-color: var(--color-gray-50);
3249
+ }
3250
+ }
3251
+ }
3168
3252
  .hover\:bg-gray-100 {
3169
3253
  &:hover {
3170
3254
  @media (hover: hover) {
@@ -3210,6 +3294,16 @@
3210
3294
  }
3211
3295
  }
3212
3296
  }
3297
+ .hover\:bg-nsw-grey-900\/10 {
3298
+ &:hover {
3299
+ @media (hover: hover) {
3300
+ background-color: color-mix(in srgb, oklch(0.17511812981113217 0.007251980042076026 242.08383926925922) 10%, transparent);
3301
+ @supports (color: color-mix(in lab, red, red)) {
3302
+ background-color: color-mix(in oklab, var(--color-nsw-grey-900) 10%, transparent);
3303
+ }
3304
+ }
3305
+ }
3306
+ }
3213
3307
  .hover\:bg-primary-800\/10 {
3214
3308
  &:hover {
3215
3309
  @media (hover: hover) {
@@ -3409,6 +3503,18 @@
3409
3503
  color: oklch(0.2899986864508513 0.11729574451023282 259.841936589881);
3410
3504
  }
3411
3505
  }
3506
+ .focus\:ring-0 {
3507
+ &:focus {
3508
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3509
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3510
+ }
3511
+ }
3512
+ .focus\:ring-offset-0 {
3513
+ &:focus {
3514
+ --tw-ring-offset-width: 0px;
3515
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3516
+ }
3517
+ }
3412
3518
  .focus\:outline {
3413
3519
  &:focus {
3414
3520
  outline-style: var(--tw-outline-style);
@@ -3462,6 +3568,12 @@
3462
3568
  outline-color: color-mix(in oklab, oklch(0.5038341615701663 0.20169915825513662 260.52773388396713) 70%, transparent);
3463
3569
  }
3464
3570
  }
3571
+ .focus\:outline-none {
3572
+ &:focus {
3573
+ --tw-outline-style: none;
3574
+ outline-style: none;
3575
+ }
3576
+ }
3465
3577
  .focus-visible\:z-10 {
3466
3578
  &:focus-visible {
3467
3579
  z-index: 10;
@@ -3682,6 +3794,17 @@
3682
3794
  }
3683
3795
  }
3684
3796
  }
3797
+ .data-\[closed\]\:-translate-y-1 {
3798
+ &[data-closed] {
3799
+ --tw-translate-y: calc(var(--spacing) * -1);
3800
+ translate: var(--tw-translate-x) var(--tw-translate-y);
3801
+ }
3802
+ }
3803
+ .data-\[closed\]\:opacity-0 {
3804
+ &[data-closed] {
3805
+ opacity: 0%;
3806
+ }
3807
+ }
3685
3808
  .data-\[disabled\]\:pointer-events-none {
3686
3809
  &[data-disabled] {
3687
3810
  pointer-events: none;
@@ -3702,6 +3825,28 @@
3702
3825
  opacity: 50%;
3703
3826
  }
3704
3827
  }
3828
+ .data-\[enter\]\:duration-200 {
3829
+ &[data-enter] {
3830
+ --tw-duration: 200ms;
3831
+ transition-duration: 200ms;
3832
+ }
3833
+ }
3834
+ .data-\[enter\]\:ease-out {
3835
+ &[data-enter] {
3836
+ --tw-ease: var(--ease-out);
3837
+ transition-timing-function: var(--ease-out);
3838
+ }
3839
+ }
3840
+ .data-\[enter\]\:duration-200 {
3841
+ &[data-enter] {
3842
+ animation-duration: 200ms;
3843
+ }
3844
+ }
3845
+ .data-\[enter\]\:ease-out {
3846
+ &[data-enter] {
3847
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
3848
+ }
3849
+ }
3705
3850
  .data-\[error\=true\]\:text-destructive {
3706
3851
  &[data-error="true"] {
3707
3852
  color: var(--destructive);
@@ -3712,6 +3857,28 @@
3712
3857
  padding-left: calc(var(--spacing) * 8);
3713
3858
  }
3714
3859
  }
3860
+ .data-\[leave\]\:duration-150 {
3861
+ &[data-leave] {
3862
+ --tw-duration: 150ms;
3863
+ transition-duration: 150ms;
3864
+ }
3865
+ }
3866
+ .data-\[leave\]\:ease-in {
3867
+ &[data-leave] {
3868
+ --tw-ease: var(--ease-in);
3869
+ transition-timing-function: var(--ease-in);
3870
+ }
3871
+ }
3872
+ .data-\[leave\]\:duration-150 {
3873
+ &[data-leave] {
3874
+ animation-duration: 150ms;
3875
+ }
3876
+ }
3877
+ .data-\[leave\]\:ease-in {
3878
+ &[data-leave] {
3879
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
3880
+ }
3881
+ }
3715
3882
  .data-\[motion\=from-end\]\:slide-in-from-right-52 {
3716
3883
  &[data-motion="from-end"] {
3717
3884
  --tw-enter-translate-x: 13rem;
@@ -4731,6 +4898,11 @@
4731
4898
  flex-direction: row;
4732
4899
  }
4733
4900
  }
4901
+ .sm\:justify-center {
4902
+ @media (width >= 40rem) {
4903
+ justify-content: center;
4904
+ }
4905
+ }
4734
4906
  .sm\:justify-end {
4735
4907
  @media (width >= 40rem) {
4736
4908
  justify-content: flex-end;
@@ -4746,6 +4918,41 @@
4746
4918
  gap: calc(var(--spacing) * 4);
4747
4919
  }
4748
4920
  }
4921
+ .sm\:divide-x {
4922
+ @media (width >= 40rem) {
4923
+ :where(& > :not(:last-child)) {
4924
+ --tw-divide-x-reverse: 0;
4925
+ border-inline-style: var(--tw-border-style);
4926
+ border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
4927
+ border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
4928
+ }
4929
+ }
4930
+ }
4931
+ .sm\:divide-y-0 {
4932
+ @media (width >= 40rem) {
4933
+ :where(& > :not(:last-child)) {
4934
+ --tw-divide-y-reverse: 0;
4935
+ border-bottom-style: var(--tw-border-style);
4936
+ border-top-style: var(--tw-border-style);
4937
+ border-top-width: calc(0px * var(--tw-divide-y-reverse));
4938
+ border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
4939
+ }
4940
+ }
4941
+ }
4942
+ .sm\:border-x {
4943
+ @media (width >= 40rem) {
4944
+ border-inline-style: var(--tw-border-style);
4945
+ border-inline-width: 1px;
4946
+ }
4947
+ }
4948
+ .sm\:border-gray-900\/5 {
4949
+ @media (width >= 40rem) {
4950
+ border-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
4951
+ @supports (color: color-mix(in lab, red, red)) {
4952
+ border-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent);
4953
+ }
4954
+ }
4955
+ }
4749
4956
  .sm\:px-0 {
4750
4957
  @media (width >= 40rem) {
4751
4958
  padding-inline: calc(var(--spacing) * 0);
@@ -5027,11 +5234,21 @@
5027
5234
  }
5028
5235
  }
5029
5236
  }
5237
+ .lg\:px-4 {
5238
+ @media (width >= 64rem) {
5239
+ padding-inline: calc(var(--spacing) * 4);
5240
+ }
5241
+ }
5030
5242
  .lg\:px-8 {
5031
5243
  @media (width >= 64rem) {
5032
5244
  padding-inline: calc(var(--spacing) * 8);
5033
5245
  }
5034
5246
  }
5247
+ .lg\:px-12 {
5248
+ @media (width >= 64rem) {
5249
+ padding-inline: calc(var(--spacing) * 12);
5250
+ }
5251
+ }
5035
5252
  .lg\:pr-0 {
5036
5253
  @media (width >= 64rem) {
5037
5254
  padding-right: calc(var(--spacing) * 0);
@@ -6225,6 +6442,12 @@
6225
6442
  }
6226
6443
  }
6227
6444
  }
6445
+ .\[\&\:nth-last-child\(-n\+3\)\]\:border-b {
6446
+ &:nth-last-child(-n+3) {
6447
+ border-bottom-style: var(--tw-border-style);
6448
+ border-bottom-width: 1px;
6449
+ }
6450
+ }
6228
6451
  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
6229
6452
  &>[role=checkbox] {
6230
6453
  --tw-translate-y: 2px;
@@ -7160,6 +7383,11 @@ body {
7160
7383
  initial-value: "";
7161
7384
  inherits: false;
7162
7385
  }
7386
+ @property --tw-divide-x-reverse {
7387
+ syntax: "*";
7388
+ inherits: false;
7389
+ initial-value: 0;
7390
+ }
7163
7391
  @keyframes spin {
7164
7392
  to {
7165
7393
  transform: rotate(360deg);
@@ -7227,6 +7455,7 @@ body {
7227
7455
  --tw-duration: initial;
7228
7456
  --tw-ease: initial;
7229
7457
  --tw-content: "";
7458
+ --tw-divide-x-reverse: 0;
7230
7459
  }
7231
7460
  }
7232
7461
  }