@ohhwells/bridge 0.1.50 → 0.1.51

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 (2) hide show
  1. package/dist/styles.css +255 -375
  2. package/package.json +2 -1
package/dist/styles.css CHANGED
@@ -175,19 +175,29 @@
175
175
  }
176
176
  .container {
177
177
  width: 100%;
178
- @media (width >= 40rem) {
178
+ }
179
+ @media (width >= 40rem) {
180
+ .container {
179
181
  max-width: 40rem;
180
182
  }
181
- @media (width >= 48rem) {
183
+ }
184
+ @media (width >= 48rem) {
185
+ .container {
182
186
  max-width: 48rem;
183
187
  }
184
- @media (width >= 64rem) {
188
+ }
189
+ @media (width >= 64rem) {
190
+ .container {
185
191
  max-width: 64rem;
186
192
  }
187
- @media (width >= 80rem) {
193
+ }
194
+ @media (width >= 80rem) {
195
+ .container {
188
196
  max-width: 80rem;
189
197
  }
190
- @media (width >= 96rem) {
198
+ }
199
+ @media (width >= 96rem) {
200
+ .container {
191
201
  max-width: 96rem;
192
202
  }
193
203
  }
@@ -589,13 +599,17 @@
589
599
  }
590
600
  .bg-black\/20 {
591
601
  background-color: color-mix(in srgb, #000 20%, transparent);
592
- @supports (color: color-mix(in lab, red, red)) {
602
+ }
603
+ @supports (color: color-mix(in lab, red, red)) {
604
+ .bg-black\/20 {
593
605
  background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
594
606
  }
595
607
  }
596
608
  .bg-black\/50 {
597
609
  background-color: color-mix(in srgb, #000 50%, transparent);
598
- @supports (color: color-mix(in lab, red, red)) {
610
+ }
611
+ @supports (color: color-mix(in lab, red, red)) {
612
+ .bg-black\/50 {
599
613
  background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
600
614
  }
601
615
  }
@@ -616,7 +630,9 @@
616
630
  }
617
631
  .bg-muted\/40 {
618
632
  background-color: var(--color-muted);
619
- @supports (color: color-mix(in lab, red, red)) {
633
+ }
634
+ @supports (color: color-mix(in lab, red, red)) {
635
+ .bg-muted\/40 {
620
636
  background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
621
637
  }
622
638
  }
@@ -1018,495 +1034,359 @@
1018
1034
  --tw-outline-style: none;
1019
1035
  outline-style: none;
1020
1036
  }
1021
- .placeholder\:text-muted-foreground {
1022
- &::-moz-placeholder {
1023
- color: var(--color-muted-foreground);
1024
- }
1025
- &::placeholder {
1026
- color: var(--color-muted-foreground);
1027
- }
1037
+ .placeholder\:text-muted-foreground::-moz-placeholder {
1038
+ color: var(--color-muted-foreground);
1028
1039
  }
1029
- .before\:pointer-events-none {
1030
- &::before {
1031
- content: var(--tw-content);
1032
- pointer-events: none;
1033
- }
1040
+ .placeholder\:text-muted-foreground::placeholder {
1041
+ color: var(--color-muted-foreground);
1034
1042
  }
1035
- .before\:absolute {
1036
- &::before {
1037
- content: var(--tw-content);
1038
- position: absolute;
1039
- }
1043
+ .before\:pointer-events-none::before {
1044
+ content: var(--tw-content);
1045
+ pointer-events: none;
1040
1046
  }
1041
- .before\:top-0 {
1042
- &::before {
1043
- content: var(--tw-content);
1044
- top: calc(var(--spacing) * 0);
1045
- }
1047
+ .before\:absolute::before {
1048
+ content: var(--tw-content);
1049
+ position: absolute;
1046
1050
  }
1047
- .before\:top-1\/2 {
1048
- &::before {
1049
- content: var(--tw-content);
1050
- top: calc(1 / 2 * 100%);
1051
- }
1051
+ .before\:top-0::before {
1052
+ content: var(--tw-content);
1053
+ top: calc(var(--spacing) * 0);
1052
1054
  }
1053
- .before\:right-0 {
1054
- &::before {
1055
- content: var(--tw-content);
1056
- right: calc(var(--spacing) * 0);
1057
- }
1055
+ .before\:top-1\/2::before {
1056
+ content: var(--tw-content);
1057
+ top: calc(1 / 2 * 100%);
1058
1058
  }
1059
- .before\:bottom-0 {
1060
- &::before {
1061
- content: var(--tw-content);
1062
- bottom: calc(var(--spacing) * 0);
1063
- }
1059
+ .before\:right-0::before {
1060
+ content: var(--tw-content);
1061
+ right: calc(var(--spacing) * 0);
1064
1062
  }
1065
- .before\:left-0 {
1066
- &::before {
1067
- content: var(--tw-content);
1068
- left: calc(var(--spacing) * 0);
1069
- }
1063
+ .before\:bottom-0::before {
1064
+ content: var(--tw-content);
1065
+ bottom: calc(var(--spacing) * 0);
1070
1066
  }
1071
- .before\:left-1\/2 {
1072
- &::before {
1073
- content: var(--tw-content);
1074
- left: calc(1 / 2 * 100%);
1075
- }
1067
+ .before\:left-0::before {
1068
+ content: var(--tw-content);
1069
+ left: calc(var(--spacing) * 0);
1076
1070
  }
1077
- .before\:size-2 {
1078
- &::before {
1079
- content: var(--tw-content);
1080
- width: calc(var(--spacing) * 2);
1081
- height: calc(var(--spacing) * 2);
1082
- }
1071
+ .before\:left-1\/2::before {
1072
+ content: var(--tw-content);
1073
+ left: calc(1 / 2 * 100%);
1083
1074
  }
1084
- .before\:-translate-x-1\/2 {
1085
- &::before {
1086
- content: var(--tw-content);
1087
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
1088
- translate: var(--tw-translate-x) var(--tw-translate-y);
1089
- }
1075
+ .before\:size-2::before {
1076
+ content: var(--tw-content);
1077
+ width: calc(var(--spacing) * 2);
1078
+ height: calc(var(--spacing) * 2);
1090
1079
  }
1091
- .before\:translate-x-1\/2 {
1092
- &::before {
1093
- content: var(--tw-content);
1094
- --tw-translate-x: calc(1 / 2 * 100%);
1095
- translate: var(--tw-translate-x) var(--tw-translate-y);
1096
- }
1080
+ .before\:-translate-x-1\/2::before {
1081
+ content: var(--tw-content);
1082
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
1083
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1097
1084
  }
1098
- .before\:-translate-y-1\/2 {
1099
- &::before {
1100
- content: var(--tw-content);
1101
- --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
1102
- translate: var(--tw-translate-x) var(--tw-translate-y);
1103
- }
1085
+ .before\:translate-x-1\/2::before {
1086
+ content: var(--tw-content);
1087
+ --tw-translate-x: calc(1 / 2 * 100%);
1088
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1104
1089
  }
1105
- .before\:translate-y-1\/2 {
1106
- &::before {
1107
- content: var(--tw-content);
1108
- --tw-translate-y: calc(1 / 2 * 100%);
1109
- translate: var(--tw-translate-x) var(--tw-translate-y);
1110
- }
1090
+ .before\:-translate-y-1\/2::before {
1091
+ content: var(--tw-content);
1092
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
1093
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1111
1094
  }
1112
- .before\:rotate-45 {
1113
- &::before {
1114
- content: var(--tw-content);
1115
- rotate: 45deg;
1116
- }
1095
+ .before\:translate-y-1\/2::before {
1096
+ content: var(--tw-content);
1097
+ --tw-translate-y: calc(1 / 2 * 100%);
1098
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1117
1099
  }
1118
- .before\:bg-foreground {
1119
- &::before {
1120
- content: var(--tw-content);
1121
- background-color: var(--color-foreground);
1122
- }
1100
+ .before\:rotate-45::before {
1101
+ content: var(--tw-content);
1102
+ rotate: 45deg;
1123
1103
  }
1124
- .before\:content-\[\"\"\] {
1125
- &::before {
1126
- --tw-content: "";
1127
- content: var(--tw-content);
1128
- }
1104
+ .before\:bg-foreground::before {
1105
+ content: var(--tw-content);
1106
+ background-color: var(--color-foreground);
1129
1107
  }
1130
- .hover\:bg-accent {
1131
- &:hover {
1132
- @media (hover: hover) {
1133
- background-color: var(--color-accent);
1134
- }
1135
- }
1108
+ .before\:content-\[\"\"\]::before {
1109
+ --tw-content: "";
1110
+ content: var(--tw-content);
1136
1111
  }
1137
- .hover\:bg-background {
1138
- &:hover {
1139
- @media (hover: hover) {
1140
- background-color: var(--color-background);
1141
- }
1112
+ @media (hover: hover) {
1113
+ .hover\:bg-accent:hover {
1114
+ background-color: var(--color-accent);
1142
1115
  }
1143
1116
  }
1144
- .hover\:bg-destructive\/80 {
1145
- &:hover {
1146
- @media (hover: hover) {
1147
- background-color: var(--color-destructive);
1148
- @supports (color: color-mix(in lab, red, red)) {
1149
- background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
1150
- }
1151
- }
1117
+ @media (hover: hover) {
1118
+ .hover\:bg-background:hover {
1119
+ background-color: var(--color-background);
1152
1120
  }
1153
1121
  }
1154
- .hover\:bg-muted {
1155
- &:hover {
1156
- @media (hover: hover) {
1157
- background-color: var(--color-muted);
1158
- }
1122
+ @media (hover: hover) {
1123
+ .hover\:bg-destructive\/80:hover {
1124
+ background-color: var(--color-destructive);
1159
1125
  }
1160
- }
1161
- .hover\:bg-muted\/30 {
1162
- &:hover {
1163
- @media (hover: hover) {
1164
- background-color: var(--color-muted);
1165
- @supports (color: color-mix(in lab, red, red)) {
1166
- background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
1167
- }
1126
+ @supports (color: color-mix(in lab, red, red)) {
1127
+ .hover\:bg-destructive\/80:hover {
1128
+ background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
1168
1129
  }
1169
1130
  }
1170
1131
  }
1171
- .hover\:bg-muted\/50 {
1172
- &:hover {
1173
- @media (hover: hover) {
1174
- background-color: var(--color-muted);
1175
- @supports (color: color-mix(in lab, red, red)) {
1176
- background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
1177
- }
1178
- }
1132
+ @media (hover: hover) {
1133
+ .hover\:bg-muted:hover {
1134
+ background-color: var(--color-muted);
1179
1135
  }
1180
1136
  }
1181
- .hover\:bg-muted\/80 {
1182
- &:hover {
1183
- @media (hover: hover) {
1184
- background-color: var(--color-muted);
1185
- @supports (color: color-mix(in lab, red, red)) {
1186
- background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
1187
- }
1188
- }
1137
+ @media (hover: hover) {
1138
+ .hover\:bg-muted\/30:hover {
1139
+ background-color: var(--color-muted);
1189
1140
  }
1190
- }
1191
- .hover\:bg-primary {
1192
- &:hover {
1193
- @media (hover: hover) {
1194
- background-color: var(--color-primary);
1141
+ @supports (color: color-mix(in lab, red, red)) {
1142
+ .hover\:bg-muted\/30:hover {
1143
+ background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
1195
1144
  }
1196
1145
  }
1197
1146
  }
1198
- .hover\:bg-secondary\/80 {
1199
- &:hover {
1200
- @media (hover: hover) {
1201
- background-color: var(--color-secondary);
1202
- @supports (color: color-mix(in lab, red, red)) {
1203
- background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
1204
- }
1205
- }
1147
+ @media (hover: hover) {
1148
+ .hover\:bg-muted\/50:hover {
1149
+ background-color: var(--color-muted);
1206
1150
  }
1207
- }
1208
- .hover\:bg-transparent {
1209
- &:hover {
1210
- @media (hover: hover) {
1211
- background-color: transparent;
1151
+ @supports (color: color-mix(in lab, red, red)) {
1152
+ .hover\:bg-muted\/50:hover {
1153
+ background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
1212
1154
  }
1213
1155
  }
1214
1156
  }
1215
- .hover\:text-accent-foreground {
1216
- &:hover {
1217
- @media (hover: hover) {
1218
- color: var(--color-accent-foreground);
1219
- }
1157
+ @media (hover: hover) {
1158
+ .hover\:bg-muted\/80:hover {
1159
+ background-color: var(--color-muted);
1220
1160
  }
1221
- }
1222
- .hover\:text-foreground {
1223
- &:hover {
1224
- @media (hover: hover) {
1225
- color: var(--color-foreground);
1161
+ @supports (color: color-mix(in lab, red, red)) {
1162
+ .hover\:bg-muted\/80:hover {
1163
+ background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
1226
1164
  }
1227
1165
  }
1228
1166
  }
1229
- .hover\:text-muted-foreground {
1230
- &:hover {
1231
- @media (hover: hover) {
1232
- color: var(--color-muted-foreground);
1233
- }
1167
+ @media (hover: hover) {
1168
+ .hover\:bg-primary:hover {
1169
+ background-color: var(--color-primary);
1234
1170
  }
1235
1171
  }
1236
- .hover\:opacity-90 {
1237
- &:hover {
1238
- @media (hover: hover) {
1239
- opacity: 90%;
1172
+ @media (hover: hover) {
1173
+ .hover\:bg-secondary\/80:hover {
1174
+ background-color: var(--color-secondary);
1175
+ }
1176
+ @supports (color: color-mix(in lab, red, red)) {
1177
+ .hover\:bg-secondary\/80:hover {
1178
+ background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
1240
1179
  }
1241
1180
  }
1242
1181
  }
1243
- .focus\:ring-2 {
1244
- &:focus {
1245
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1246
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1182
+ @media (hover: hover) {
1183
+ .hover\:bg-transparent:hover {
1184
+ background-color: transparent;
1247
1185
  }
1248
1186
  }
1249
- .focus\:ring-ring {
1250
- &:focus {
1251
- --tw-ring-color: var(--color-ring);
1187
+ @media (hover: hover) {
1188
+ .hover\:text-accent-foreground:hover {
1189
+ color: var(--color-accent-foreground);
1252
1190
  }
1253
1191
  }
1254
- .focus\:ring-offset-2 {
1255
- &:focus {
1256
- --tw-ring-offset-width: 2px;
1257
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1192
+ @media (hover: hover) {
1193
+ .hover\:text-foreground:hover {
1194
+ color: var(--color-foreground);
1258
1195
  }
1259
1196
  }
1260
- .focus\:outline-none {
1261
- &:focus {
1262
- --tw-outline-style: none;
1263
- outline-style: none;
1197
+ @media (hover: hover) {
1198
+ .hover\:text-muted-foreground:hover {
1199
+ color: var(--color-muted-foreground);
1264
1200
  }
1265
1201
  }
1266
- .focus-visible\:border-ring {
1267
- &:focus-visible {
1268
- border-color: var(--color-ring);
1202
+ @media (hover: hover) {
1203
+ .hover\:opacity-90:hover {
1204
+ opacity: 90%;
1269
1205
  }
1270
1206
  }
1271
- .focus-visible\:ring-\[3px\] {
1272
- &:focus-visible {
1273
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1274
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1275
- }
1207
+ .focus\:ring-2:focus {
1208
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1209
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1276
1210
  }
1277
- .focus-visible\:ring-ring\/50 {
1278
- &:focus-visible {
1279
- --tw-ring-color: var(--color-ring);
1280
- @supports (color: color-mix(in lab, red, red)) {
1281
- --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
1282
- }
1283
- }
1211
+ .focus\:ring-ring:focus {
1212
+ --tw-ring-color: var(--color-ring);
1284
1213
  }
1285
- .enabled\:hover\:border {
1286
- &:enabled {
1287
- &:hover {
1288
- @media (hover: hover) {
1289
- border-style: var(--tw-border-style);
1290
- border-width: 1px;
1291
- }
1292
- }
1293
- }
1214
+ .focus\:ring-offset-2:focus {
1215
+ --tw-ring-offset-width: 2px;
1216
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1294
1217
  }
1295
- .enabled\:hover\:border-stone-200 {
1296
- &:enabled {
1297
- &:hover {
1298
- @media (hover: hover) {
1299
- border-color: var(--color-stone-200);
1300
- }
1301
- }
1302
- }
1218
+ .focus\:outline-none:focus {
1219
+ --tw-outline-style: none;
1220
+ outline-style: none;
1303
1221
  }
1304
- .enabled\:hover\:text-stone-950 {
1305
- &:enabled {
1306
- &:hover {
1307
- @media (hover: hover) {
1308
- color: var(--color-stone-950);
1309
- }
1310
- }
1311
- }
1222
+ .focus-visible\:border-ring:focus-visible {
1223
+ border-color: var(--color-ring);
1312
1224
  }
1313
- .enabled\:active\:cursor-grabbing {
1314
- &:enabled {
1315
- &:active {
1316
- cursor: grabbing;
1317
- }
1318
- }
1225
+ .focus-visible\:ring-\[3px\]:focus-visible {
1226
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1227
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1319
1228
  }
1320
- .enabled\:active\:border {
1321
- &:enabled {
1322
- &:active {
1323
- border-style: var(--tw-border-style);
1324
- border-width: 1px;
1325
- }
1326
- }
1229
+ .focus-visible\:ring-ring\/50:focus-visible {
1230
+ --tw-ring-color: var(--color-ring);
1327
1231
  }
1328
- .enabled\:active\:border-primary {
1329
- &:enabled {
1330
- &:active {
1331
- border-color: var(--color-primary);
1332
- }
1232
+ @supports (color: color-mix(in lab, red, red)) {
1233
+ .focus-visible\:ring-ring\/50:focus-visible {
1234
+ --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
1333
1235
  }
1334
1236
  }
1335
- .enabled\:active\:bg-primary-50 {
1336
- &:enabled {
1337
- &:active {
1338
- background-color: var(--color-primary-50);
1339
- }
1237
+ @media (hover: hover) {
1238
+ .enabled\:hover\:border:enabled:hover {
1239
+ border-style: var(--tw-border-style);
1240
+ border-width: 1px;
1340
1241
  }
1341
1242
  }
1342
- .enabled\:active\:text-stone-950 {
1343
- &:enabled {
1344
- &:active {
1345
- color: var(--color-stone-950);
1346
- }
1243
+ @media (hover: hover) {
1244
+ .enabled\:hover\:border-stone-200:enabled:hover {
1245
+ border-color: var(--color-stone-200);
1347
1246
  }
1348
1247
  }
1349
- .enabled\:active\:shadow {
1350
- &:enabled {
1351
- &:active {
1352
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1353
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1354
- }
1248
+ @media (hover: hover) {
1249
+ .enabled\:hover\:text-stone-950:enabled:hover {
1250
+ color: var(--color-stone-950);
1355
1251
  }
1356
1252
  }
1357
- .disabled\:pointer-events-none {
1358
- &:disabled {
1359
- pointer-events: none;
1360
- }
1253
+ .enabled\:active\:cursor-grabbing:enabled:active {
1254
+ cursor: grabbing;
1361
1255
  }
1362
- .disabled\:cursor-not-allowed {
1363
- &:disabled {
1364
- cursor: not-allowed;
1365
- }
1256
+ .enabled\:active\:border:enabled:active {
1257
+ border-style: var(--tw-border-style);
1258
+ border-width: 1px;
1366
1259
  }
1367
- .disabled\:text-muted-foreground {
1368
- &:disabled {
1369
- color: var(--color-muted-foreground);
1370
- }
1260
+ .enabled\:active\:border-primary:enabled:active {
1261
+ border-color: var(--color-primary);
1371
1262
  }
1372
- .disabled\:text-stone-950 {
1373
- &:disabled {
1374
- color: var(--color-stone-950);
1375
- }
1263
+ .enabled\:active\:bg-primary-50:enabled:active {
1264
+ background-color: var(--color-primary-50);
1376
1265
  }
1377
- .disabled\:opacity-40 {
1378
- &:disabled {
1379
- opacity: 40%;
1380
- }
1266
+ .enabled\:active\:text-stone-950:enabled:active {
1267
+ color: var(--color-stone-950);
1381
1268
  }
1382
- .disabled\:opacity-50 {
1383
- &:disabled {
1384
- opacity: 50%;
1385
- }
1269
+ .enabled\:active\:shadow:enabled:active {
1270
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1271
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1386
1272
  }
1387
- .disabled\:opacity-60 {
1388
- &:disabled {
1389
- opacity: 60%;
1390
- }
1273
+ .disabled\:pointer-events-none:disabled {
1274
+ pointer-events: none;
1391
1275
  }
1392
- .aria-invalid\:border-destructive {
1393
- &[aria-invalid="true"] {
1394
- border-color: var(--color-destructive);
1395
- }
1276
+ .disabled\:cursor-not-allowed:disabled {
1277
+ cursor: not-allowed;
1396
1278
  }
1397
- .aria-invalid\:ring-destructive\/20 {
1398
- &[aria-invalid="true"] {
1399
- --tw-ring-color: var(--color-destructive);
1400
- @supports (color: color-mix(in lab, red, red)) {
1401
- --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
1402
- }
1403
- }
1279
+ .disabled\:text-muted-foreground:disabled {
1280
+ color: var(--color-muted-foreground);
1404
1281
  }
1405
- .data-\[state\=off\]\:opacity-50 {
1406
- &[data-state="off"] {
1407
- opacity: 50%;
1408
- }
1282
+ .disabled\:text-stone-950:disabled {
1283
+ color: var(--color-stone-950);
1409
1284
  }
1410
- .data-\[state\=off\]\:hover\:opacity-75 {
1411
- &[data-state="off"] {
1412
- &:hover {
1413
- @media (hover: hover) {
1414
- opacity: 75%;
1415
- }
1416
- }
1417
- }
1285
+ .disabled\:opacity-40:disabled {
1286
+ opacity: 40%;
1418
1287
  }
1419
- .data-\[state\=on\]\:bg-accent {
1420
- &[data-state="on"] {
1421
- background-color: var(--color-accent);
1422
- }
1288
+ .disabled\:opacity-50:disabled {
1289
+ opacity: 50%;
1423
1290
  }
1424
- .data-\[state\=on\]\:bg-background {
1425
- &[data-state="on"] {
1426
- background-color: var(--color-background);
1427
- }
1291
+ .disabled\:opacity-60:disabled {
1292
+ opacity: 60%;
1428
1293
  }
1429
- .data-\[state\=on\]\:text-accent-foreground {
1430
- &[data-state="on"] {
1431
- color: var(--color-accent-foreground);
1294
+ .aria-invalid\:border-destructive[aria-invalid="true"] {
1295
+ border-color: var(--color-destructive);
1296
+ }
1297
+ .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
1298
+ --tw-ring-color: var(--color-destructive);
1299
+ }
1300
+ @supports (color: color-mix(in lab, red, red)) {
1301
+ .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
1302
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
1432
1303
  }
1433
1304
  }
1434
- .data-\[state\=on\]\:shadow-sm {
1435
- &[data-state="on"] {
1436
- --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
1437
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1305
+ .data-\[state\=off\]\:opacity-50[data-state="off"] {
1306
+ opacity: 50%;
1307
+ }
1308
+ @media (hover: hover) {
1309
+ .data-\[state\=off\]\:hover\:opacity-75[data-state="off"]:hover {
1310
+ opacity: 75%;
1438
1311
  }
1439
1312
  }
1440
- .sm\:contents {
1441
- @media (width >= 40rem) {
1313
+ .data-\[state\=on\]\:bg-accent[data-state="on"] {
1314
+ background-color: var(--color-accent);
1315
+ }
1316
+ .data-\[state\=on\]\:bg-background[data-state="on"] {
1317
+ background-color: var(--color-background);
1318
+ }
1319
+ .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
1320
+ color: var(--color-accent-foreground);
1321
+ }
1322
+ .data-\[state\=on\]\:shadow-sm[data-state="on"] {
1323
+ --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
1324
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1325
+ }
1326
+ @media (width >= 40rem) {
1327
+ .sm\:contents {
1442
1328
  display: contents;
1443
1329
  }
1444
1330
  }
1445
- .sm\:flex {
1446
- @media (width >= 40rem) {
1331
+ @media (width >= 40rem) {
1332
+ .sm\:flex {
1447
1333
  display: flex;
1448
1334
  }
1449
1335
  }
1450
- .sm\:hidden {
1451
- @media (width >= 40rem) {
1336
+ @media (width >= 40rem) {
1337
+ .sm\:hidden {
1452
1338
  display: none;
1453
1339
  }
1454
1340
  }
1455
- .sm\:w-\[120px\] {
1456
- @media (width >= 40rem) {
1341
+ @media (width >= 40rem) {
1342
+ .sm\:w-\[120px\] {
1457
1343
  width: 120px;
1458
1344
  }
1459
1345
  }
1460
- .sm\:w-\[200px\] {
1461
- @media (width >= 40rem) {
1346
+ @media (width >= 40rem) {
1347
+ .sm\:w-\[200px\] {
1462
1348
  width: 200px;
1463
1349
  }
1464
1350
  }
1465
- .sm\:shrink-0 {
1466
- @media (width >= 40rem) {
1351
+ @media (width >= 40rem) {
1352
+ .sm\:shrink-0 {
1467
1353
  flex-shrink: 0;
1468
1354
  }
1469
1355
  }
1470
- .sm\:items-center {
1471
- @media (width >= 40rem) {
1356
+ @media (width >= 40rem) {
1357
+ .sm\:items-center {
1472
1358
  align-items: center;
1473
1359
  }
1474
1360
  }
1475
- .sm\:gap-\[60px\] {
1476
- @media (width >= 40rem) {
1361
+ @media (width >= 40rem) {
1362
+ .sm\:gap-\[60px\] {
1477
1363
  gap: 60px;
1478
1364
  }
1479
1365
  }
1480
- .sm\:p-10 {
1481
- @media (width >= 40rem) {
1366
+ @media (width >= 40rem) {
1367
+ .sm\:p-10 {
1482
1368
  padding: calc(var(--spacing) * 10);
1483
1369
  }
1484
1370
  }
1485
- .sm\:px-16 {
1486
- @media (width >= 40rem) {
1371
+ @media (width >= 40rem) {
1372
+ .sm\:px-16 {
1487
1373
  padding-inline: calc(var(--spacing) * 16);
1488
1374
  }
1489
1375
  }
1490
- .sm\:py-20 {
1491
- @media (width >= 40rem) {
1376
+ @media (width >= 40rem) {
1377
+ .sm\:py-20 {
1492
1378
  padding-block: calc(var(--spacing) * 20);
1493
1379
  }
1494
1380
  }
1495
- .\[\&_svg\]\:pointer-events-none {
1496
- & svg {
1497
- pointer-events: none;
1498
- }
1381
+ .\[\&_svg\]\:pointer-events-none svg {
1382
+ pointer-events: none;
1499
1383
  }
1500
- .\[\&_svg\]\:shrink-0 {
1501
- & svg {
1502
- flex-shrink: 0;
1503
- }
1384
+ .\[\&_svg\]\:shrink-0 svg {
1385
+ flex-shrink: 0;
1504
1386
  }
1505
- .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
1506
- & svg:not([class*='size-']) {
1507
- width: calc(var(--spacing) * 4);
1508
- height: calc(var(--spacing) * 4);
1509
- }
1387
+ .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
1388
+ width: calc(var(--spacing) * 4);
1389
+ height: calc(var(--spacing) * 4);
1510
1390
  }
1511
1391
  [data-ohw-bridge-root] {
1512
1392
  --color-primary: var(--ohw-primary, #0885FE);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.50",
3
+ "version": "0.1.51",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -41,6 +41,7 @@
41
41
  "clsx": "^2.1.1",
42
42
  "postcss": "^8.4.0",
43
43
  "postcss-cli": "^11.0.0",
44
+ "postcss-nesting": "^14.0.1",
44
45
  "tailwind-merge": "^3.6.0",
45
46
  "tailwindcss": "^4",
46
47
  "tsup": "^8.0.0",