@ohhwells/bridge 0.1.19 → 0.1.21

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/styles.css CHANGED
@@ -3,6 +3,7 @@
3
3
  @layer ohw-theme {
4
4
  :root, :host {
5
5
  --font-sans: Figtree, sans-serif;
6
+ --color-red-500: oklch(63.7% 0.237 25.331);
6
7
  --color-black: #000;
7
8
  --color-white: #fff;
8
9
  --spacing: 0.25rem;
@@ -16,14 +17,18 @@
16
17
  --text-lg--line-height: 28px;
17
18
  --text-xl: 20px;
18
19
  --text-xl--line-height: 28px;
20
+ --text-4xl: 36px;
21
+ --text-4xl--line-height: 40px;
19
22
  --text-5xl: 48px;
20
23
  --text-5xl--line-height: 1;
21
24
  --font-weight-normal: 400;
22
25
  --font-weight-medium: 500;
23
26
  --font-weight-semibold: 600;
24
27
  --font-weight-bold: 700;
28
+ --leading-tight: 1.25;
25
29
  --radius-md: 6px;
26
30
  --radius-lg: 0.5rem;
31
+ --radius-xl: 0.75rem;
27
32
  --default-transition-duration: 150ms;
28
33
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
29
34
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
@@ -43,6 +48,7 @@
43
48
  --color-input: var(--ohw-input, #e2e8f0);
44
49
  --color-ring: var(--ohw-ring, #64748b);
45
50
  --text-5xl--letter-spacing: -0.025em;
51
+ --text-4xl--letter-spacing: -0.025em;
46
52
  --text-xl--letter-spacing: -0.025em;
47
53
  --text-lg--letter-spacing: 0em;
48
54
  --text-base--letter-spacing: 0em;
@@ -80,12 +86,36 @@
80
86
  .inset-0 {
81
87
  inset: calc(var(--spacing) * 0);
82
88
  }
89
+ .top-0 {
90
+ top: calc(var(--spacing) * 0);
91
+ }
92
+ .top-1\/2 {
93
+ top: calc(1 / 2 * 100%);
94
+ }
95
+ .top-2\.5 {
96
+ top: calc(var(--spacing) * 2.5);
97
+ }
98
+ .right-0 {
99
+ right: calc(var(--spacing) * 0);
100
+ }
101
+ .right-1\.5 {
102
+ right: calc(var(--spacing) * 1.5);
103
+ }
104
+ .bottom-0 {
105
+ bottom: calc(var(--spacing) * 0);
106
+ }
83
107
  .left-0 {
84
108
  left: calc(var(--spacing) * 0);
85
109
  }
110
+ .left-1\/2 {
111
+ left: calc(1 / 2 * 100%);
112
+ }
86
113
  .z-10 {
87
114
  z-index: 10;
88
115
  }
116
+ .z-50 {
117
+ z-index: 50;
118
+ }
89
119
  .z-2147483646 {
90
120
  z-index: 2147483646;
91
121
  }
@@ -116,6 +146,12 @@
116
146
  .mx-auto {
117
147
  margin-inline: auto;
118
148
  }
149
+ .mt-0\.5 {
150
+ margin-top: calc(var(--spacing) * 0.5);
151
+ }
152
+ .mb-8 {
153
+ margin-bottom: calc(var(--spacing) * 8);
154
+ }
119
155
  .box-border {
120
156
  box-sizing: border-box;
121
157
  }
@@ -137,6 +173,9 @@
137
173
  .inline-flex {
138
174
  display: inline-flex;
139
175
  }
176
+ .h-7 {
177
+ height: calc(var(--spacing) * 7);
178
+ }
140
179
  .h-8 {
141
180
  height: calc(var(--spacing) * 8);
142
181
  }
@@ -167,21 +206,18 @@
167
206
  .min-h-screen {
168
207
  min-height: 100vh;
169
208
  }
209
+ .w-7 {
210
+ width: calc(var(--spacing) * 7);
211
+ }
212
+ .w-8 {
213
+ width: calc(var(--spacing) * 8);
214
+ }
170
215
  .w-10 {
171
216
  width: calc(var(--spacing) * 10);
172
217
  }
173
218
  .w-14 {
174
219
  width: calc(var(--spacing) * 14);
175
220
  }
176
- .w-\[72px\] {
177
- width: 72px;
178
- }
179
- .w-\[120px\] {
180
- width: 120px;
181
- }
182
- .w-\[200px\] {
183
- width: 200px;
184
- }
185
221
  .w-full {
186
222
  width: 100%;
187
223
  }
@@ -197,22 +233,23 @@
197
233
  .min-w-10 {
198
234
  min-width: calc(var(--spacing) * 10);
199
235
  }
200
- .min-w-max {
201
- min-width: -moz-max-content;
202
- min-width: max-content;
203
- }
204
236
  .flex-1 {
205
237
  flex: 1;
206
238
  }
207
- .flex-none {
208
- flex: none;
209
- }
210
239
  .shrink-0 {
211
240
  flex-shrink: 0;
212
241
  }
213
242
  .grow {
214
243
  flex-grow: 1;
215
244
  }
245
+ .-translate-x-1\/2 {
246
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
247
+ translate: var(--tw-translate-x) var(--tw-translate-y);
248
+ }
249
+ .-translate-y-1\/2 {
250
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
251
+ translate: var(--tw-translate-x) var(--tw-translate-y);
252
+ }
216
253
  .transform {
217
254
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
218
255
  }
@@ -234,6 +271,9 @@
234
271
  .items-end {
235
272
  align-items: flex-end;
236
273
  }
274
+ .items-start {
275
+ align-items: flex-start;
276
+ }
237
277
  .items-stretch {
238
278
  align-items: stretch;
239
279
  }
@@ -243,6 +283,9 @@
243
283
  .justify-center {
244
284
  justify-content: center;
245
285
  }
286
+ .justify-end {
287
+ justify-content: flex-end;
288
+ }
246
289
  .gap-1 {
247
290
  gap: calc(var(--spacing) * 1);
248
291
  }
@@ -278,6 +321,9 @@
278
321
  text-overflow: ellipsis;
279
322
  white-space: nowrap;
280
323
  }
324
+ .overflow-hidden {
325
+ overflow: hidden;
326
+ }
281
327
  .overflow-x-auto {
282
328
  overflow-x: auto;
283
329
  }
@@ -293,6 +339,9 @@
293
339
  .rounded-md {
294
340
  border-radius: var(--radius-md);
295
341
  }
342
+ .rounded-xl {
343
+ border-radius: var(--radius-xl);
344
+ }
296
345
  .border {
297
346
  border-style: var(--tw-border-style);
298
347
  border-width: 1px;
@@ -309,6 +358,10 @@
309
358
  --tw-border-style: dashed;
310
359
  border-style: dashed;
311
360
  }
361
+ .border-none {
362
+ --tw-border-style: none;
363
+ border-style: none;
364
+ }
312
365
  .border-\[\#E7E5E4\] {
313
366
  border-color: #E7E5E4;
314
367
  }
@@ -351,11 +404,14 @@
351
404
  .bg-white {
352
405
  background-color: var(--color-white);
353
406
  }
407
+ .p-0 {
408
+ padding: calc(var(--spacing) * 0);
409
+ }
354
410
  .p-1 {
355
411
  padding: calc(var(--spacing) * 1);
356
412
  }
357
- .p-10 {
358
- padding: calc(var(--spacing) * 10);
413
+ .p-6 {
414
+ padding: calc(var(--spacing) * 6);
359
415
  }
360
416
  .p-12 {
361
417
  padding: calc(var(--spacing) * 12);
@@ -378,12 +434,12 @@
378
434
  .px-5 {
379
435
  padding-inline: calc(var(--spacing) * 5);
380
436
  }
437
+ .px-7 {
438
+ padding-inline: calc(var(--spacing) * 7);
439
+ }
381
440
  .px-8 {
382
441
  padding-inline: calc(var(--spacing) * 8);
383
442
  }
384
- .px-16 {
385
- padding-inline: calc(var(--spacing) * 16);
386
- }
387
443
  .py-0\.5 {
388
444
  padding-block: calc(var(--spacing) * 0.5);
389
445
  }
@@ -399,12 +455,21 @@
399
455
  .py-8 {
400
456
  padding-block: calc(var(--spacing) * 8);
401
457
  }
402
- .py-20 {
403
- padding-block: calc(var(--spacing) * 20);
458
+ .py-10 {
459
+ padding-block: calc(var(--spacing) * 10);
460
+ }
461
+ .py-12 {
462
+ padding-block: calc(var(--spacing) * 12);
404
463
  }
405
464
  .py-\[10px\] {
406
465
  padding-block: 10px;
407
466
  }
467
+ .pt-2 {
468
+ padding-top: calc(var(--spacing) * 2);
469
+ }
470
+ .pb-6 {
471
+ padding-bottom: calc(var(--spacing) * 6);
472
+ }
408
473
  .text-center {
409
474
  text-align: center;
410
475
  }
@@ -417,10 +482,10 @@
417
482
  .font-sans {
418
483
  font-family: var(--font-sans);
419
484
  }
420
- .text-5xl {
421
- font-size: var(--text-5xl);
422
- line-height: var(--tw-leading, var(--text-5xl--line-height));
423
- letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
485
+ .text-4xl {
486
+ font-size: var(--text-4xl);
487
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
488
+ letter-spacing: var(--tw-tracking, var(--text-4xl--letter-spacing));
424
489
  }
425
490
  .text-base {
426
491
  font-size: var(--text-base);
@@ -451,6 +516,10 @@
451
516
  font-size: var(--text-body);
452
517
  line-height: var(--tw-leading, var(--text-body--line-height));
453
518
  }
519
+ .leading-tight {
520
+ --tw-leading: var(--leading-tight);
521
+ line-height: var(--leading-tight);
522
+ }
454
523
  .font-bold {
455
524
  --tw-font-weight: var(--font-weight-bold);
456
525
  font-weight: var(--font-weight-bold);
@@ -492,6 +561,9 @@
492
561
  .text-primary-foreground {
493
562
  color: var(--color-primary-foreground);
494
563
  }
564
+ .text-red-500 {
565
+ color: var(--color-red-500);
566
+ }
495
567
  .text-secondary-foreground {
496
568
  color: var(--color-secondary-foreground);
497
569
  }
@@ -514,6 +586,10 @@
514
586
  --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0px 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));
515
587
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
516
588
  }
589
+ .shadow-xl {
590
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
591
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
592
+ }
517
593
  .shadow-xs {
518
594
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
519
595
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -655,6 +731,11 @@
655
731
  pointer-events: none;
656
732
  }
657
733
  }
734
+ .disabled\:cursor-not-allowed {
735
+ &:disabled {
736
+ cursor: not-allowed;
737
+ }
738
+ }
658
739
  .disabled\:opacity-50 {
659
740
  &:disabled {
660
741
  opacity: 50%;
@@ -708,6 +789,68 @@
708
789
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
709
790
  }
710
791
  }
792
+ .sm\:contents {
793
+ @media (width >= 40rem) {
794
+ display: contents;
795
+ }
796
+ }
797
+ .sm\:flex {
798
+ @media (width >= 40rem) {
799
+ display: flex;
800
+ }
801
+ }
802
+ .sm\:hidden {
803
+ @media (width >= 40rem) {
804
+ display: none;
805
+ }
806
+ }
807
+ .sm\:w-\[120px\] {
808
+ @media (width >= 40rem) {
809
+ width: 120px;
810
+ }
811
+ }
812
+ .sm\:w-\[200px\] {
813
+ @media (width >= 40rem) {
814
+ width: 200px;
815
+ }
816
+ }
817
+ .sm\:shrink-0 {
818
+ @media (width >= 40rem) {
819
+ flex-shrink: 0;
820
+ }
821
+ }
822
+ .sm\:items-center {
823
+ @media (width >= 40rem) {
824
+ align-items: center;
825
+ }
826
+ }
827
+ .sm\:gap-\[60px\] {
828
+ @media (width >= 40rem) {
829
+ gap: 60px;
830
+ }
831
+ }
832
+ .sm\:p-10 {
833
+ @media (width >= 40rem) {
834
+ padding: calc(var(--spacing) * 10);
835
+ }
836
+ }
837
+ .sm\:px-16 {
838
+ @media (width >= 40rem) {
839
+ padding-inline: calc(var(--spacing) * 16);
840
+ }
841
+ }
842
+ .sm\:py-20 {
843
+ @media (width >= 40rem) {
844
+ padding-block: calc(var(--spacing) * 20);
845
+ }
846
+ }
847
+ .sm\:text-5xl {
848
+ @media (width >= 40rem) {
849
+ font-size: var(--text-5xl);
850
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
851
+ letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
852
+ }
853
+ }
711
854
  .\[\&_svg\]\:pointer-events-none {
712
855
  & svg {
713
856
  pointer-events: none;
@@ -808,6 +951,21 @@
808
951
  appearance: none;
809
952
  }
810
953
  }
954
+ @property --tw-translate-x {
955
+ syntax: "*";
956
+ inherits: false;
957
+ initial-value: 0;
958
+ }
959
+ @property --tw-translate-y {
960
+ syntax: "*";
961
+ inherits: false;
962
+ initial-value: 0;
963
+ }
964
+ @property --tw-translate-z {
965
+ syntax: "*";
966
+ inherits: false;
967
+ initial-value: 0;
968
+ }
811
969
  @property --tw-rotate-x {
812
970
  syntax: "*";
813
971
  inherits: false;
@@ -833,6 +991,10 @@
833
991
  inherits: false;
834
992
  initial-value: solid;
835
993
  }
994
+ @property --tw-leading {
995
+ syntax: "*";
996
+ inherits: false;
997
+ }
836
998
  @property --tw-font-weight {
837
999
  syntax: "*";
838
1000
  inherits: false;
@@ -967,12 +1129,16 @@
967
1129
  @layer properties {
968
1130
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
969
1131
  *, ::before, ::after, ::backdrop {
1132
+ --tw-translate-x: 0;
1133
+ --tw-translate-y: 0;
1134
+ --tw-translate-z: 0;
970
1135
  --tw-rotate-x: initial;
971
1136
  --tw-rotate-y: initial;
972
1137
  --tw-rotate-z: initial;
973
1138
  --tw-skew-x: initial;
974
1139
  --tw-skew-y: initial;
975
1140
  --tw-border-style: solid;
1141
+ --tw-leading: initial;
976
1142
  --tw-font-weight: initial;
977
1143
  --tw-tracking: initial;
978
1144
  --tw-shadow: 0 0 #0000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.19",
3
+ "version": "0.1.21",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",