@ohhwells/bridge 0.1.18 → 0.1.20

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,16 +3,34 @@
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);
7
+ --color-black: #000;
8
+ --color-white: #fff;
6
9
  --spacing: 0.25rem;
7
10
  --text-xs: 12px;
8
11
  --text-xs--line-height: 16px;
9
12
  --text-sm: 14px;
10
13
  --text-sm--line-height: 20px;
14
+ --text-base: 16px;
15
+ --text-base--line-height: 24px;
16
+ --text-lg: 18px;
17
+ --text-lg--line-height: 28px;
18
+ --text-xl: 20px;
19
+ --text-xl--line-height: 28px;
20
+ --text-5xl: 48px;
21
+ --text-5xl--line-height: 1;
22
+ --font-weight-normal: 400;
11
23
  --font-weight-medium: 500;
12
24
  --font-weight-semibold: 600;
25
+ --font-weight-bold: 700;
26
+ --leading-tight: 1.25;
13
27
  --radius-md: 6px;
28
+ --radius-lg: 0.5rem;
29
+ --radius-xl: 0.75rem;
14
30
  --default-transition-duration: 150ms;
15
31
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
32
+ --font-display: 'Instrument Serif', 'Times New Roman', serif;
33
+ --font-body: 'Red Hat Display', system-ui, sans-serif;
16
34
  --color-primary: var(--ohw-primary, #0885FE);
17
35
  --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
18
36
  --color-background: var(--ohw-background, #ffffff);
@@ -27,8 +45,15 @@
27
45
  --color-destructive-foreground: var(--ohw-destructive-foreground, #f8fafc);
28
46
  --color-input: var(--ohw-input, #e2e8f0);
29
47
  --color-ring: var(--ohw-ring, #64748b);
48
+ --text-5xl--letter-spacing: -0.025em;
49
+ --text-xl--letter-spacing: -0.025em;
50
+ --text-lg--letter-spacing: 0em;
51
+ --text-base--letter-spacing: 0em;
30
52
  --text-sm--letter-spacing: 0em;
31
53
  --text-xs--letter-spacing: 0em;
54
+ --text-body: 18px;
55
+ --text-body--line-height: 1.5;
56
+ --tracking-display-tight: -0.030em;
32
57
  }
33
58
  }
34
59
  .pointer-events-auto {
@@ -55,9 +80,33 @@
55
80
  .sticky {
56
81
  position: sticky;
57
82
  }
83
+ .inset-0 {
84
+ inset: calc(var(--spacing) * 0);
85
+ }
86
+ .top-1\/2 {
87
+ top: calc(1 / 2 * 100%);
88
+ }
89
+ .top-2\.5 {
90
+ top: calc(var(--spacing) * 2.5);
91
+ }
92
+ .right-0 {
93
+ right: calc(var(--spacing) * 0);
94
+ }
95
+ .right-1\.5 {
96
+ right: calc(var(--spacing) * 1.5);
97
+ }
58
98
  .left-0 {
59
99
  left: calc(var(--spacing) * 0);
60
100
  }
101
+ .left-1\/2 {
102
+ left: calc(1 / 2 * 100%);
103
+ }
104
+ .z-10 {
105
+ z-index: 10;
106
+ }
107
+ .z-50 {
108
+ z-index: 50;
109
+ }
61
110
  .z-2147483646 {
62
111
  z-index: 2147483646;
63
112
  }
@@ -82,6 +131,21 @@
82
131
  max-width: 96rem;
83
132
  }
84
133
  }
134
+ .m-0 {
135
+ margin: calc(var(--spacing) * 0);
136
+ }
137
+ .mx-auto {
138
+ margin-inline: auto;
139
+ }
140
+ .mt-0\.5 {
141
+ margin-top: calc(var(--spacing) * 0.5);
142
+ }
143
+ .mb-8 {
144
+ margin-bottom: calc(var(--spacing) * 8);
145
+ }
146
+ .box-border {
147
+ box-sizing: border-box;
148
+ }
85
149
  .block {
86
150
  display: block;
87
151
  }
@@ -100,15 +164,30 @@
100
164
  .inline-flex {
101
165
  display: inline-flex;
102
166
  }
167
+ .h-7 {
168
+ height: calc(var(--spacing) * 7);
169
+ }
103
170
  .h-8 {
104
171
  height: calc(var(--spacing) * 8);
105
172
  }
173
+ .h-9 {
174
+ height: calc(var(--spacing) * 9);
175
+ }
106
176
  .h-10 {
107
177
  height: calc(var(--spacing) * 10);
108
178
  }
179
+ .h-\[70px\] {
180
+ height: 70px;
181
+ }
182
+ .h-\[264px\] {
183
+ height: 264px;
184
+ }
109
185
  .h-dvh {
110
186
  height: 100dvh;
111
187
  }
188
+ .h-px {
189
+ height: 1px;
190
+ }
112
191
  .h-screen {
113
192
  height: 100vh;
114
193
  }
@@ -118,9 +197,33 @@
118
197
  .min-h-screen {
119
198
  min-height: 100vh;
120
199
  }
200
+ .w-7 {
201
+ width: calc(var(--spacing) * 7);
202
+ }
203
+ .w-8 {
204
+ width: calc(var(--spacing) * 8);
205
+ }
206
+ .w-10 {
207
+ width: calc(var(--spacing) * 10);
208
+ }
209
+ .w-14 {
210
+ width: calc(var(--spacing) * 14);
211
+ }
212
+ .w-\[120px\] {
213
+ width: 120px;
214
+ }
215
+ .w-\[200px\] {
216
+ width: 200px;
217
+ }
121
218
  .w-full {
122
219
  width: 100%;
123
220
  }
221
+ .max-w-\[1280px\] {
222
+ max-width: 1280px;
223
+ }
224
+ .min-w-0 {
225
+ min-width: calc(var(--spacing) * 0);
226
+ }
124
227
  .min-w-8 {
125
228
  min-width: calc(var(--spacing) * 8);
126
229
  }
@@ -136,33 +239,106 @@
136
239
  .grow {
137
240
  flex-grow: 1;
138
241
  }
242
+ .-translate-x-1\/2 {
243
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
244
+ translate: var(--tw-translate-x) var(--tw-translate-y);
245
+ }
246
+ .-translate-y-1\/2 {
247
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
248
+ translate: var(--tw-translate-x) var(--tw-translate-y);
249
+ }
139
250
  .transform {
140
251
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
141
252
  }
253
+ .cursor-default {
254
+ cursor: default;
255
+ }
142
256
  .cursor-pointer {
143
257
  cursor: pointer;
144
258
  }
145
259
  .resize {
146
260
  resize: both;
147
261
  }
262
+ .flex-col {
263
+ flex-direction: column;
264
+ }
148
265
  .items-center {
149
266
  align-items: center;
150
267
  }
268
+ .items-end {
269
+ align-items: flex-end;
270
+ }
271
+ .items-start {
272
+ align-items: flex-start;
273
+ }
274
+ .items-stretch {
275
+ align-items: stretch;
276
+ }
277
+ .justify-between {
278
+ justify-content: space-between;
279
+ }
151
280
  .justify-center {
152
281
  justify-content: center;
153
282
  }
283
+ .justify-end {
284
+ justify-content: flex-end;
285
+ }
154
286
  .gap-1 {
155
287
  gap: calc(var(--spacing) * 1);
156
288
  }
289
+ .gap-1\.5 {
290
+ gap: calc(var(--spacing) * 1.5);
291
+ }
157
292
  .gap-2 {
158
293
  gap: calc(var(--spacing) * 2);
159
294
  }
295
+ .gap-3 {
296
+ gap: calc(var(--spacing) * 3);
297
+ }
298
+ .gap-4 {
299
+ gap: calc(var(--spacing) * 4);
300
+ }
301
+ .gap-6 {
302
+ gap: calc(var(--spacing) * 6);
303
+ }
304
+ .gap-10 {
305
+ gap: calc(var(--spacing) * 10);
306
+ }
307
+ .gap-16 {
308
+ gap: calc(var(--spacing) * 16);
309
+ }
310
+ .gap-\[60px\] {
311
+ gap: 60px;
312
+ }
313
+ .gap-px {
314
+ gap: 1px;
315
+ }
316
+ .truncate {
317
+ overflow: hidden;
318
+ text-overflow: ellipsis;
319
+ white-space: nowrap;
320
+ }
321
+ .overflow-hidden {
322
+ overflow: hidden;
323
+ }
324
+ .overflow-x-auto {
325
+ overflow-x: auto;
326
+ }
327
+ .rounded-\[10px\] {
328
+ border-radius: 10px;
329
+ }
160
330
  .rounded-full {
161
331
  border-radius: calc(infinity * 1px);
162
332
  }
333
+ .rounded-lg {
334
+ border-radius: var(--radius-lg);
335
+ }
163
336
  .rounded-md {
164
337
  border-radius: var(--radius-md);
165
338
  }
339
+ .rounded-xl {
340
+ border-radius: var(--radius-xl);
341
+ }
166
342
  .border {
167
343
  border-style: var(--tw-border-style);
168
344
  border-width: 1px;
@@ -171,12 +347,42 @@
171
347
  border-style: var(--tw-border-style);
172
348
  border-width: 0px;
173
349
  }
350
+ .border-2 {
351
+ border-style: var(--tw-border-style);
352
+ border-width: 2px;
353
+ }
354
+ .border-dashed {
355
+ --tw-border-style: dashed;
356
+ border-style: dashed;
357
+ }
358
+ .border-none {
359
+ --tw-border-style: none;
360
+ border-style: none;
361
+ }
362
+ .border-\[\#E7E5E4\] {
363
+ border-color: #E7E5E4;
364
+ }
174
365
  .border-input {
175
366
  border-color: var(--color-input);
176
367
  }
177
368
  .border-transparent {
178
369
  border-color: transparent;
179
370
  }
371
+ .bg-\(--color-light\,\#FEFFF0\) {
372
+ background-color: var(--color-light,#FEFFF0);
373
+ }
374
+ .bg-\[\#F5F5F4\] {
375
+ background-color: #F5F5F4;
376
+ }
377
+ .bg-\[\#FAFAF9\] {
378
+ background-color: #FAFAF9;
379
+ }
380
+ .bg-black\/20 {
381
+ background-color: color-mix(in srgb, #000 20%, transparent);
382
+ @supports (color: color-mix(in lab, red, red)) {
383
+ background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
384
+ }
385
+ }
180
386
  .bg-destructive {
181
387
  background-color: var(--color-destructive);
182
388
  }
@@ -192,9 +398,24 @@
192
398
  .bg-transparent {
193
399
  background-color: transparent;
194
400
  }
401
+ .bg-white {
402
+ background-color: var(--color-white);
403
+ }
195
404
  .p-1 {
196
405
  padding: calc(var(--spacing) * 1);
197
406
  }
407
+ .p-6 {
408
+ padding: calc(var(--spacing) * 6);
409
+ }
410
+ .p-10 {
411
+ padding: calc(var(--spacing) * 10);
412
+ }
413
+ .p-12 {
414
+ padding: calc(var(--spacing) * 12);
415
+ }
416
+ .px-1 {
417
+ padding-inline: calc(var(--spacing) * 1);
418
+ }
198
419
  .px-1\.5 {
199
420
  padding-inline: calc(var(--spacing) * 1.5);
200
421
  }
@@ -204,39 +425,133 @@
204
425
  .px-2\.5 {
205
426
  padding-inline: calc(var(--spacing) * 2.5);
206
427
  }
428
+ .px-3 {
429
+ padding-inline: calc(var(--spacing) * 3);
430
+ }
431
+ .px-5 {
432
+ padding-inline: calc(var(--spacing) * 5);
433
+ }
434
+ .px-7 {
435
+ padding-inline: calc(var(--spacing) * 7);
436
+ }
207
437
  .px-8 {
208
438
  padding-inline: calc(var(--spacing) * 8);
209
439
  }
440
+ .px-16 {
441
+ padding-inline: calc(var(--spacing) * 16);
442
+ }
210
443
  .py-0\.5 {
211
444
  padding-block: calc(var(--spacing) * 0.5);
212
445
  }
213
446
  .py-1 {
214
447
  padding-block: calc(var(--spacing) * 1);
215
448
  }
449
+ .py-1\.5 {
450
+ padding-block: calc(var(--spacing) * 1.5);
451
+ }
452
+ .py-4 {
453
+ padding-block: calc(var(--spacing) * 4);
454
+ }
455
+ .py-8 {
456
+ padding-block: calc(var(--spacing) * 8);
457
+ }
458
+ .py-12 {
459
+ padding-block: calc(var(--spacing) * 12);
460
+ }
461
+ .py-20 {
462
+ padding-block: calc(var(--spacing) * 20);
463
+ }
464
+ .py-\[10px\] {
465
+ padding-block: 10px;
466
+ }
467
+ .pt-2 {
468
+ padding-top: calc(var(--spacing) * 2);
469
+ }
470
+ .pb-6 {
471
+ padding-bottom: calc(var(--spacing) * 6);
472
+ }
473
+ .text-center {
474
+ text-align: center;
475
+ }
476
+ .font-body {
477
+ font-family: var(--font-body);
478
+ }
479
+ .font-display {
480
+ font-family: var(--font-display);
481
+ }
216
482
  .font-sans {
217
483
  font-family: var(--font-sans);
218
484
  }
485
+ .text-5xl {
486
+ font-size: var(--text-5xl);
487
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
488
+ letter-spacing: var(--tw-tracking, var(--text-5xl--letter-spacing));
489
+ }
490
+ .text-base {
491
+ font-size: var(--text-base);
492
+ line-height: var(--tw-leading, var(--text-base--line-height));
493
+ letter-spacing: var(--tw-tracking, var(--text-base--letter-spacing));
494
+ }
495
+ .text-lg {
496
+ font-size: var(--text-lg);
497
+ line-height: var(--tw-leading, var(--text-lg--line-height));
498
+ letter-spacing: var(--tw-tracking, var(--text-lg--letter-spacing));
499
+ }
219
500
  .text-sm {
220
501
  font-size: var(--text-sm);
221
502
  line-height: var(--tw-leading, var(--text-sm--line-height));
222
503
  letter-spacing: var(--tw-tracking, var(--text-sm--letter-spacing));
223
504
  }
505
+ .text-xl {
506
+ font-size: var(--text-xl);
507
+ line-height: var(--tw-leading, var(--text-xl--line-height));
508
+ letter-spacing: var(--tw-tracking, var(--text-xl--letter-spacing));
509
+ }
224
510
  .text-xs {
225
511
  font-size: var(--text-xs);
226
512
  line-height: var(--tw-leading, var(--text-xs--line-height));
227
513
  letter-spacing: var(--tw-tracking, var(--text-xs--letter-spacing));
228
514
  }
515
+ .text-body {
516
+ font-size: var(--text-body);
517
+ line-height: var(--tw-leading, var(--text-body--line-height));
518
+ }
519
+ .leading-tight {
520
+ --tw-leading: var(--leading-tight);
521
+ line-height: var(--leading-tight);
522
+ }
523
+ .font-bold {
524
+ --tw-font-weight: var(--font-weight-bold);
525
+ font-weight: var(--font-weight-bold);
526
+ }
229
527
  .font-medium {
230
528
  --tw-font-weight: var(--font-weight-medium);
231
529
  font-weight: var(--font-weight-medium);
232
530
  }
531
+ .font-normal {
532
+ --tw-font-weight: var(--font-weight-normal);
533
+ font-weight: var(--font-weight-normal);
534
+ }
233
535
  .font-semibold {
234
536
  --tw-font-weight: var(--font-weight-semibold);
235
537
  font-weight: var(--font-weight-semibold);
236
538
  }
539
+ .tracking-display-tight {
540
+ --tw-tracking: var(--tracking-display-tight);
541
+ letter-spacing: var(--tracking-display-tight);
542
+ }
237
543
  .whitespace-nowrap {
238
544
  white-space: nowrap;
239
545
  }
546
+ .text-\(--color-accent\,\#A89B83\) {
547
+ color: var(--color-accent,#A89B83);
548
+ }
549
+ .text-\(--color-dark\,\#200C02\) {
550
+ color: var(--color-dark,#200C02);
551
+ }
552
+ .text-\[\#0A0A0A\] {
553
+ color: #0A0A0A;
554
+ }
240
555
  .text-destructive-foreground {
241
556
  color: var(--color-destructive-foreground);
242
557
  }
@@ -246,6 +561,9 @@
246
561
  .text-primary-foreground {
247
562
  color: var(--color-primary-foreground);
248
563
  }
564
+ .text-red-500 {
565
+ color: var(--color-red-500);
566
+ }
249
567
  .text-secondary-foreground {
250
568
  color: var(--color-secondary-foreground);
251
569
  }
@@ -255,10 +573,23 @@
255
573
  .underline {
256
574
  text-decoration-line: underline;
257
575
  }
576
+ .opacity-50 {
577
+ opacity: 50%;
578
+ }
579
+ .opacity-80 {
580
+ opacity: 80%;
581
+ }
582
+ .opacity-100 {
583
+ opacity: 100%;
584
+ }
258
585
  .shadow-popover {
259
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));
260
587
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
261
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
+ }
262
593
  .shadow-xs {
263
594
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
264
595
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -400,6 +731,11 @@
400
731
  pointer-events: none;
401
732
  }
402
733
  }
734
+ .disabled\:cursor-not-allowed {
735
+ &:disabled {
736
+ cursor: not-allowed;
737
+ }
738
+ }
403
739
  .disabled\:opacity-50 {
404
740
  &:disabled {
405
741
  opacity: 50%;
@@ -470,6 +806,8 @@
470
806
  }
471
807
  }
472
808
  [data-ohw-bridge-root] {
809
+ --color-primary: var(--ohw-primary, #0885FE);
810
+ --color-primary-foreground: var(--ohw-primary-foreground, #FAFAF9);
473
811
  --ohw-primary: #0885FE;
474
812
  --ohw-primary-foreground: #FAFAF9;
475
813
  --ohw-background: #ffffff;
@@ -478,8 +816,6 @@
478
816
  --ohw-card-foreground: #020617;
479
817
  --ohw-popover: #ffffff;
480
818
  --ohw-popover-foreground: #020617;
481
- --ohw-primary: #0f172a;
482
- --ohw-primary-foreground: #f8fafc;
483
819
  --ohw-hover-primary: #1e293b;
484
820
  --ohw-secondary: #f1f5f9;
485
821
  --ohw-secondary-foreground: #0f172a;
@@ -553,6 +889,21 @@
553
889
  appearance: none;
554
890
  }
555
891
  }
892
+ @property --tw-translate-x {
893
+ syntax: "*";
894
+ inherits: false;
895
+ initial-value: 0;
896
+ }
897
+ @property --tw-translate-y {
898
+ syntax: "*";
899
+ inherits: false;
900
+ initial-value: 0;
901
+ }
902
+ @property --tw-translate-z {
903
+ syntax: "*";
904
+ inherits: false;
905
+ initial-value: 0;
906
+ }
556
907
  @property --tw-rotate-x {
557
908
  syntax: "*";
558
909
  inherits: false;
@@ -578,10 +929,18 @@
578
929
  inherits: false;
579
930
  initial-value: solid;
580
931
  }
932
+ @property --tw-leading {
933
+ syntax: "*";
934
+ inherits: false;
935
+ }
581
936
  @property --tw-font-weight {
582
937
  syntax: "*";
583
938
  inherits: false;
584
939
  }
940
+ @property --tw-tracking {
941
+ syntax: "*";
942
+ inherits: false;
943
+ }
585
944
  @property --tw-shadow {
586
945
  syntax: "*";
587
946
  inherits: false;
@@ -708,13 +1067,18 @@
708
1067
  @layer properties {
709
1068
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
710
1069
  *, ::before, ::after, ::backdrop {
1070
+ --tw-translate-x: 0;
1071
+ --tw-translate-y: 0;
1072
+ --tw-translate-z: 0;
711
1073
  --tw-rotate-x: initial;
712
1074
  --tw-rotate-y: initial;
713
1075
  --tw-rotate-z: initial;
714
1076
  --tw-skew-x: initial;
715
1077
  --tw-skew-y: initial;
716
1078
  --tw-border-style: solid;
1079
+ --tw-leading: initial;
717
1080
  --tw-font-weight: initial;
1081
+ --tw-tracking: initial;
718
1082
  --tw-shadow: 0 0 #0000;
719
1083
  --tw-shadow-color: initial;
720
1084
  --tw-shadow-alpha: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ohhwells/bridge",
3
- "version": "0.1.18",
3
+ "version": "0.1.20",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",